Use Adaptive Servlet for Custom Image Dialog Property

[Mahedi_Sabuj]

Let's consider a scenario where I have a component named the "Article" component. Within the dialog box of the Article component, there is a tab dedicated to "Author Information." Within this Author Information tab, an Author can drag and drop their image from the Assets section.

Currently, we display the author's image using the Asset URL in the following format: <img src="/content/dam/.../image.png" />. However, could we potentially utilize coreimg (Adaptive Servlet) to display Image which is not inherited from Core Component? For instance, could we modify the image source to something like: <img src="/content/aem-demo/.../image.coreimg.png" />?

<file jcr:primaryType="nt:unstructured"
  sling:resourceType="cq/gui/components/authoring/dialog/fileupload"
  autoStart="{Boolean}false"
  class="cq-droptarget"
  fileNameParameter="./fileName"
  fileReferenceParameter="./fileReference"
  mimeTypes="[image/jpeg,image/png]"
  multiple="{Boolean}false"
  name="./file"
  title="Author Image"
  uploadUrl="${suffix.path}"
  useHTML5="{Boolean}true"
  allowUpload="{Boolean}false"/>

[EstebanBustamante · Accepted solution]

You can utilize the Adaptive Image Servlet but not the way you are describing.

There could be a couple of ways to achieve what you are thinking:

1. The Servlet mapping is set through a factory configuration which means you could create your own configuration to register your "Article" component and that way do not rely on the image component

2. You could embed the image core component into your article component

3. You can use DynamicMedia (if available) to optimize your images.

Hope this helps.

You can learn more here:

https://github.com/adobe/aem-core-wcm-components/wiki/The-Adaptive-Image-Servlet