Aem Find Original Image From Thumbnail Upload

Objective

Objective of this document is to define the out of the box Image renditions and processing concepts in AEM and compare with the Epitome Transformation process using ACS (Adobe Consulting Services) eatables library. Its pros/cons are also listed.

Image Renditions vs Image transformations

In Image renditions separate images are created and stored in DAM for each size/resolutions, whereas in transformations one high quality epitome is uploaded and the same is used in unlike sizes and resolutions and are transformed according to the need in runtime on the wing and cached in dispatcher.

More details pros/cons are mentioned in below sections.

Image Rendition

Rendition is a process of creating multiple sizes and versions of images post uploading them to DAM (Digital Asset One thousandanagement). These renditions are helpful in creating thumbnails or smaller image views of large and high-resolution images which can be used in the content of the website for unlike purposes.

Epitome Rendition with Cropping in AEM half-dozen.five

"DAM Update Nugget" is a default workflow which is triggered whenever any asset is uploaded into the DAM. This workflow helps to limit the size and the quality of the prototype displayed.

Why Epitome Renditions are required

one. Using different size images on the websites.

2. Images for different devices or viewPort.

3. Reducing the page load time.

Steps for creating rendition in AEM

1. Click the Tools icon in siteadmin folio.

ii. Click Tools > Workflow > Models.

3. From the Models console, select the DAM Update Asset workflow.

four. A new window (named after the workflow) opens for editing and configuring the workflow.

5. Right-click the process thumbnail component in the workflow, and click Edit.

half dozen. Click the THUMBNAILS tab from dialog.

a. Enter a rendition values for the thumbnails text field: 1280:1280:imitation ; 319:319:faux ; 48:48:false (dynamically as per requirement ).

[ Note : As above, if the eye flag is prepare every bit fake and if the resized prototype is smaller it will be centred inside the thumbnail. If information technology is set true, the thumbnail epitome will take exactly the size given by the configuration. Improve to retain flag every bit simulated ].

7. Click the Web ENABLED Image tab from dialog:

a. Add the value for width and height: 1280 , 1280(pixels) respectively. It can be any dynamic value. If the field is left empty the default value will be applied equally 1000*1000.

b. Add the value for quality: 90 (by default).

c. Add together the value for mime type: epitome/png (by default).

d. Add the value for continue format list: paradigm /jpeg, image/jpg. (list of mime type to go on the format of the asset).

e. Add the value for Skip list: application/pdf , sound/mpeg (listing of mime blazon to skip the process).

This web enabled image combination helps to limit the size and the quality of the image displayed thus reducing the page load fourth dimension.

8. Click OK, so click Save in the top left.

nine. Become back to the damadmin page of the browser.

10. Click New > NewFile > Browse > select an prototype > upload for uploading an image.

11. Become dorsum to the crx/de page of the browser and click content > dam > image >jcr:content > renditions to view the newly created rendition .

Steps to use rendition images :

12. By Dialog using property predicate, rendition images volition be bound.

Name = predicate

Type = String

Value = nosystem

13. OSGI service , which exposes images based on rendition should be created It should fetch the rendition images when hit through browser (eastward.g., [localhost:4502/ imageServlet.480.480.png] should give y'all an paradigm of size 480*480 ).

xiv. Go dorsum to the organization/console/bundles page of the browser and click install/update to add the newly created service packet and go far active.

15. In html code inside the img src=" ",call the finish point servlet and laissez passer the rendition. Instead of < div > use < film > tag.

Adding additional web enabled or thumbnail image component footstep:

xvi. Follow step 1 to iv and from the sidekick panel on the right side, drag the create web enabled paradigm/create thumbnail component (from DAM) to the end of the workflow.

17 ) Right-click the newly added component in the workflow, and click Edit . Echo steps (half dozen-fifteen)for creating rendition.

Arguments: The custom workflow takes the arguments as input, fetch the original image size and crop the image from superlative, lesser, left and right.

Example: Permit'southward suppose the original size of paradigm is "2200*1200" and the required image size is "640*360" .

Reduce the prototype from left and right every bit ( 780px) to make the width as 640.
Reduce the image from top and bottom equally ( 420px) to make the height equally 320.

Rendition Pros And Cons

Pros

one. Renditions are created immediately later on the images are uploaded to DAM.

2. Renditions are readily bachelor for author to preview.

Cons

1. Occupies more space (every bit separate images are created for every size divers), if renditions are used with the DAM UPDATE ASSEST workflow.

2. Need to re-run the workflow if new rendition is required.

3. While processing above 800 pixels, the size of the rendered epitome will be larger than the original image on proceeding with process thumbnail step. To overcome this a new component create spider web enabled epitome can be added to proceed further

Image Tranformation

Purpose

Many web site designs demands consistency of images based on their use within components. For example, a panoramic spotlight may demand the image be 960 x 400, and bio picture must be 100 x 100 and greyscale.

The ACS AEM Commons Named Transform Prototype Servlet allows specific paradigm transforms to be divers centrally via OSGi configurations. These image transforms can be easily invoked via parameterized HTTP Go requests to prototype resources in AEM.

Example

The below DAM Asset image has been resizes, rotated, cropped and greyscaled equally defined past the custom defined my-transform-name transform rule set.

( Original image on left. Transformed image on right. )

Supporting OSGi Configuration

Supported "image-y" resources:

Almost any "paradigm-like" resource tin can be requested using the named transform URI parameterization, and the underlying image will exist derived and rendered using the transformation parameters.

1. Pages ( cq:Page )

HTTP Get /content/acme/article.transform/feature/image.png

2. Paradigm component resource

HTTP GET /content/acme/commodity/_jcr_content/image.transform/characteristic/epitome.png

3. DAM Assets ( dam:Nugget )

HTTP GET /content/dam/images/dog.jpg.transform/feature/image.jpg

four. DAM Asset Renditions

HTTP GET /content/dam/images/dog.jpg/jcr:content/renditions/thumbnail.jpg.transform/feature/image.jpg

5. "Raw" Binary Images ( nt:file or nt:resources )

HTTP Go /etc/designs/acme/images/cat.png.transform/characteristic/image.jpg

How to Use

one. Ascertain any number of sling:OsgiConfig 's, each representing a different named transform

/apps/mysite/config/com.adobe.acs.commons.images.impl.NamedImageTransformerImplmyTransformName.xml

<?xml version="one.0″ encoding="UTF-8″?>

<jcr:root xmlns:sling= "http://sling.apache.org/jcr/sling/one.0" xmlns:cq= "http://www.day.com/j

cr/cq/ane.0" xmlns:jcr= "http://www.jcp.org/jcr/1.0" xmlns:nt= "http://www.jcp.org/jcr/nt/1.0"

jcr:primaryType="sling:OsgiConfig"

name="my-transform"

transforms="[resize:width=400,rotate:degrees=10]"/>

i. Club matters when defining your image transformation rules. For example, a resize and then ingather can yield significantly dissimilar results than a crop then resize.

2. Become the URI to a supported resource (see above) to transform

three. add the .transform extension (suspend this even if the resources is named with an extension; like a DAM asset)

4. Add an initial suffix segment that matches your transform name (Ex. /my-transform)

five. Add together a final suffix segment of /epitome.<image-format-extension> OR /img.<imageformat-extension>

Resulting in

<img src="/content/mysite/commodity/_jcr_content/epitome.transform/mytransform/image.png"/>

<img src="/content/dam/images/domestic dog.jpg.transform/my-transform/img.png"/>

Use-case:

You want a custom image rendition, i.due east. something that's non out-of-the-box for AEM. Also, you don't want to tap into AEM's nugget updater, add the rendition, and rerun the asset-update workflow for the billions of images in your instance. Something like this might easily bring the instance downwards on your knees..

Solution:

1. Utilize AEM'south "Named Image Transform Servlet"

Methodology:

The application is pretty standard. This solution uses ACS AEM Common's "Named Prototype Transform Servlet" which takes in an OSGI configuration node, and renders the rendition on the fly. The key idea is that images are cached in the dispatcher, so that performance is not hampered in production. This caching should be enabled past default on all dispatchers.

Steps:

Create an OSGI configuration file. The application I need defines the file equally follows: – com.adobe.acs.commons.images.impl.NamedImageTransformerImpl.xml with content:

Change your image tag in the JSP file so that it reads every bit follows:

Advantages

ane. It doesn't Occupy more than space, because new transfer epitome volition create at the time of page load and it is cached inside that page in dispatcher level.

2. When new rendition image required then no need to upload new prototype information technology will create from existing image when page is going to load.

3. Flexible to configure custom viewports on-the-wing.

iv. Have an selection to command the quality of the image.

Examples of Transformation

Example ane

Original Image – 179kb