Tuesday, March 12, 2019

Render Image after inplaceEditing Features in AEM


Hello Everyone,

In my previous blog, we already talk about how inplace editing works for different
component like rich text, title, image etc.

Before continuing for multiple inplace editing, I want to talk about what are all the available plugins for image and how to render an image with available plugins.

Because in my previous blog,we only talk about how to enable the plugins but after resizing, we need to render cropped,resized image also.When you crop,resize and image Map in the image, these values get stored in the content hierarchy and now need to use those values to render image using all features.

Below are the editing plugins available for an image:
1. Start Crop:
: Selecting this option opens a drop-down for pre-defined crop proportions.


  • Choose the option Free Hand to define your own crop.
  • Choose the option Remove Crop to display the original asset.
  • Fig-1:Default crop options


Note:All the options shown in above image are default options for crop and if you want to add more based on your own aspect ratio you can do from here.

You can add your custom aspect radios for the cropping image like shown below.


Note:In AEM, crop aspect ratios are defined as height/width. This differs from the conventional definition of width/height and is done for legacy compatibility reasons.


2. Rotate Right:

:This will rotate image 90° to the right clockwise.

3. Image Map:
:An image map is a graphic image where a user can click on different parts of the image and be directed to different destinations. Image maps are made by defining each of the hot areas in terms of their x and y coordinates (relative to the top left hand corner). With each set of coordinates, you specify a link that users will be directed to when they click within the area.Take a demo of image Map from link here.

Note: The Launch Map feature requires release 2.1.0 of the Core Components or higher along with service pack 2 for AEM 6.4 or service pack 3 for AEM 6.3 or higher to support new image editor features within AEM.
There are three kinds of shapes available for image Map.
  • Add Rectangular Map
  • Add Circular Map
  • Add Polygon Map
Fig-2: Shapes available for Image Map
Once a map shape is selected, it is superimposed on the image allowing for resizing. Drag and drop the blue resize handles to adjust the shape.After sizing the launch map, click on it to open a floating toolbar to define the path of the link.Path: If path is AEM related path, use relative path and if not in AEM then use absolute path.

Alt Text: Alternative description of path destination.
Target:Define target for the path.

4. Reset Zoom:
If image is already zoomed this option is used to reset the zoom level.
5. Open Zoom Slider:This option is used to control the zoom level of image using slider.
Fig-3: Open Zoom Slider Plugin for InplaceEditing of Image

6.Flip
:

Note: it will display the Flip Vertically and Flip Horizontally buttons in the edit dialog of the image component, however the feature is not currently supported by AEM and any changes made using these options will not be persisted so no point of using this plugin in Image Component.

Note:Image edit operations (crop, resize, rotate) are not supported for GIF images. Any such changes made in edit mode to GIFs will not be persisted.

Make an image component with image Editing options and render the image??

Let’s make a new component and add “sling:resourceSuperType” as
core/wcm/components/imageand then call this logic from the sightly code.
<div data-sly-use.image="com.adobe.cq.wcm.core.components.models.Image">
<div class="cq-dd-image ">
  <img src="${image.src}"/>
</div>
But if you use “core/wcm/components/image” as "sling:resourceSuperType" then you can not render image with image Map options.

So if you want to use image Maps in your component, use“core/wcm/components/image/v2/image
as "sling:resourceSuperType" and add inplaceEditing feature in the dialog and to render image after editing feature use the below code to render image with cropping and resizing features
<div data-sly-use.image="com.adobe.cq.wcm.core.components.models.Image">
<div class="cq-dd-image ">
  <sly data-sly-test.usemap="${'{0}{1}' @ format=['#', resource.path]}"></sly>
  <img src="${image.src}" data-sly-attribute.usemap="${image.areas ? usemap : ''}"/>
    <map data-sly-test="${image.areas}"
     data-sly-list.area="${image.areas}"
     name="${resource.path}">
     <area shape="${area.shape}" coords="${area.coordinates}" href="${area.href}" target="${area.target}" alt="${area.alt}">
  </map>
</div>

If you add sling:resourceType as “core/wcm/components/image/v2/image” in your component,no need to do anything because there is already a sling Model Exporter for this resourceType and when we call “com.adobe.cq.wcm.core.components.models.Image” this model creates the image path as expected.
The problem with inheriting this component is you need to overwrite image component dialog.


Note: To render image with editing  options, The Adaptive Image Servlet is being used.
We need to render the image path like shown below and when the image is called using
the below mentioned path,it calls the Adaptive Image Servlet which is being registered using
the selector.

To render image after cropping resizing and many more things, the url of image in
author and publish mode will be like shown below:
Author:
/content/<project_path>/<page_path>/<component_path>/<component_name>.coreimg.<quality>.<width>.<extension>/<timestamp>.<extension>

Publish:
/content/<project_path>/<page_path>/<component_path>/<component_name>.coreimg.<quality>.<width>.<extension>

There is an OSGI Configuration (AEM Core WCM Components Adaptive Image Servlet Mapping Configuration) for adaptive Image Servlet.
Fig-4:AEM  Core WCM  Components Adaptive Image Servlet Mapping

Resource Types: The resourcetype or resourceSuperType of the component should be mentioned here.
Selectors: You can create a different selector also as per your requirement and the adaptive Image servlet will be called using that selector.


Note:If only one image in the dialog and the name properties are same as OOTB Image
component, then you can use OOTB sling Model but if more than one image in a single dialog
or you don't have the same name properties for image widget then you can’t use OOTB
models and you need to write custom logic (Implement your own ImageImpl.class).I have
already linked the classes to corresponding github so If you need to write your own custom
logic then you can refer to those classes.

In my next blog, Multiple inplace Editing in a component, I will explain how to write
custom logic to implement image rendering feature.

You don't need to write Adaptive Servlet again for your custom requirements.just
need to change the interface and implementation of Image as per your requirements

If you have any query or suggestion then kindly comment or mail us at sgaem.blog02@gmail.com


Hope it will help you guys !!

Thanks and Happy Learning.



9 comments:


  1. This is an awesome post. Really very informative and creative contents.
    Graphic Design company in Chennai

    ReplyDelete
  2. This is an awesome post.Really very informative and creative contents.
    flyer design service in chennai

    ReplyDelete
  3. Thanks for sharing informative content. Could you please share more info like how to use imagemap in the component present in aem page. We want to make image clickable on the aem page component using launchmap.
    We found that the image is clickable when we edit the image and go to launchmap and provide the path. And the imagemap property is getting stored at /content/dam/.... (/content/dam/we-retail/en/experiences/48-hours-of-wilderness/48-hours-of-wilderness-1.jpg/jcr:content/metadata) something like below :

    imagemap path [rect(409,299,1296,861)""|""|""][rect(324,217,1296,865)"https://www.google.com/"|""|""]

    But how can we use this imagemap to make the image clickable on the aem page itself. Like say we have a aem page and we dragged image component in it and dragged the image in it. Now how we can make this image clickable on page itself where we dragged using launchmap or imagemap property

    ReplyDelete