Basic Challenge is as follows...please help if you can:
AEM 6 DAM - we want the DAM to automatically create various image renditions for each of mobile, tablet and desktop breakpoints. We want to preserve aspect ratio. We do not want to mandate the size/aspect ration of images that are uploaded to the DAM or used on the site.
There don't seem to be many sizing options apart from assigning both exact Width and Height for each rendition in pixels.
Will this mean that images are stretched or cropped if they don't fit the size exactly? Or, hopefully, does AEM give precedence to the WIDTH and allow the height to flow to maintain aspect ratio?
Your help on this, and on how best to execute this simply using the workflow so that the renditions are created automatically on upload, would be much appreciated.
Thanks,
Sentry1
UPDATE:::::: It appears that editing the 'Thumbnail' step of the out of the box Workflow for "DAM Update Asset" with [height,width] of the rendition in question actually preserves the aspect ratio whatever the initial height and width and creates a rendition based on whichever of the H or W is the smaller. Does anyone agree?
This is correct - as per the RenditionMaker interface in DAM API:
The aspect ratio of the assets base image will be preserved. Depending on orientation, either width or height of the target size will be smaller.
http://docs.adobe.com/content/docs/en/aem/6-0/develop/ref/javadoc/com/day/cq/dam/api/renditions/RenditionMaker.html
Another option could be to use ootb adaptive image component instead of creating renditions on upload.
http://blogs.adobe.com/experiencedelivers/experience-management/cq_5_6_and_responsivedesign0/
https://docs.adobe.com/docs/en/cq/5-6-1/developing/mobile/responsive.html
That way you don't fill your DAM with such renditions.
Related
Different between nine-patch Image vs regular Bitmap Image in Android. and where we use nine-patch Image and where we use regular Bitmap Image.
9 patch images allow you to choose the area of the image that can be scaled and the area that should keep unscaled, unlike the regular images that are scaled along height and width in the same way.
For example this image, where the corners will not be scaled
It is useful for layouts that can vary greatly in size.
To control scaling in regular images you can use ScaleType property of ImageView
These description from Google search:
What Are 9 Patch Images
https://github.com/chrislondon/9-Patch-Image-for-Websites/wiki/What-Are-9-Patch-Images
Google Slideshow: https://docs.google.com/present/view?id=dc7ghz8w_34f8338rcg
very very helpful tool to understand 9 patch image:
https://romannurik.github.io/AndroidAssetStudio/nine-patches.html#source.type=image&sourceDensity=320&name=logo_cbfea26
I built this site via Google Web Designer (ZippyDriver.com) and want it to scale to my viewport but haven't figured out how to do it. I don't want a responsive site — just want it to stretch to the screen if possible. Any ideas???
Have you tried to change all your elements size to % instead of px dimensions?
You can achieve this by selecting any of your elements, lets say an IMG, then in its Properties -> Size and Position be sure it shows the IMG dimensions in % not in px.
After that, try resizing the viewport and see if it works.
I´ve a cropped picture in a powerpoint layer and I want to change the picture without changing the size of the cropping area.
If I change the image by clicking "change picture" the cropping area resizes too, to show the whole picture.
How can I do that without changing the cropping area?
In Apple Keynote you only have to drag the picture you want to the cropping area and you only have to align it.
From my experience, I'm afraid you have to set the crop manually by "Format Picture" -"Crop" to remain the same cropping area when you replace a picture.
This isn't much help, but Libreoffice will do this. Crop, resize, then select your image and re-insert a new image - formatting will be the same, perfect for when you want to quickly redo formatting for same sized images.
In my experience, a picture that you insert to replace an existing one, using Change Picture, will "inherit" the crop&size settings of the old picture IF the old&new images are actually of the same size (in pixels) - if not, the new one will revert to the default crop&size so you will have to redo these manually.
This changes if the image to-be-replaced has any crop setting applied to it in Powerpoint. In this case, the replacing image will not inherit those, and might also be inserted with a different size&position, leading most likely to an unwanted result & further work needed.
A workaround I found is to first remove the crop setting from the old picture, replace with new image, then reapply the crop. This is still less work than having to manually redo the size&position (or to define these based on numbers copied from the PropertiesPane of the old image).
Quick work around: if you plan to have multiple same size images and you wish to use change image to swap the content on each page (something we do with floor plans all the time); don't bother cropping them.
Put the whole image in and crop it by sticking shapes on top of it, which are the same color as the presentation background color, like a mask.
optionally crop the images only when the whole presentation is finished.
Good evening,
I'm using Eclipse with the UI-Framework Codename One.
I would like to know how it would be possible to scale an image to fit the width of the screen?
I would like to create a list with one image( or even an imageslider if this is possible), which has the full width of the phone, and under that some text.
Another question is, how can I set an Image via Hastable and Vector from code ? I tried everything but I can't find a solution.
Thank you a lot,
Greetings Patric
It depends on what you are trying to do.
Normally you would just set the image as the background image of the component and select the background behavior as SCALE_TO_FIT which can be done both via the theme designer and via the Style object of the component.
You can also use the ImageViewer class if you want to have a viewable/zoomable image.
You can also just scale the image to the size you want using either the scaled() method or ImageIO.
It seemed so simple just a day ago, but I can't figure it out:
How do I center an image on a page, giving it fixed % margins (10% on all sides) and still have it scale with the window on resize?
It's very important that the page and the image display well on all platforms, without scrollers (!).
The page itself is very simple and only contains the image (which on different versions of the page has different dimensions), and a bar on the top with a link to send it to another page.
The max size of the image would be 1500x1000px, no minimum size.
I wholeheartedly hope someone can help me out with this, thanks so much!
Best way to do that is using JavaScript. Get the window size, subscribe for window.onresize event and update the image size and position accordingly.
Using CSS only will NOT work, because any position properties depend on the container. In your case the container is the window, which will size itself based on the content. This creates a sort of circular dependency (window size depends on the image, the image size and position depend on the window size).
For information about getting the exact available window size in cross-browser way you could check this post: Get the size of the screen, current web page and browser window - haven't done that in a while to provide you with exact code.
Also note that you don't mention keeping the aspect ratio of the image. If it should not be maintained there is no way to do it HTML/CSS only, because all operations with them do maintain AR of images.