How to set some images as a default for image component in AEM | Community
Skip to main content
August 9, 2024
Solved

How to set some images as a default for image component in AEM

  • August 9, 2024
  • 3 replies
  • 1355 views

Hello,

 

As part of one of my requirement, I need to create a dialog enabling author to drag and drop an image of their choice. As part of the requirement, dialog should load one image as a default image always and then author will update the image as per their need.

Can someone help me out that how can I set one image to appear as a default image on dialog load or which property do I need to specify for making a default image to appear.

 

Best Regards,

Ravi

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by EstebanBustamante

Hi, 

You could use cq:template to achieve this behavior, however, this works only the first time when you drop the component on your page. After you update the image, or let the image field empty this won't return to the default value (which seems a expected behavior).

Please check how cq:template works here: 

https://www.aem-blog.com/post/how-to-pre-populate-values-in-aem-component 

https://experienceleague.adobe.com/en/docs/experience-manager-cloud-service/content/implementing/developing/full-stack/components-templates/templates#creating-template-types 

Hope this helps

3 replies

EstebanBustamante
Community Advisor and Adobe Champion
EstebanBustamanteCommunity Advisor and Adobe ChampionAccepted solution
Community Advisor and Adobe Champion
August 9, 2024

Hi, 

You could use cq:template to achieve this behavior, however, this works only the first time when you drop the component on your page. After you update the image, or let the image field empty this won't return to the default value (which seems a expected behavior).

Please check how cq:template works here: 

https://www.aem-blog.com/post/how-to-pre-populate-values-in-aem-component 

https://experienceleague.adobe.com/en/docs/experience-manager-cloud-service/content/implementing/developing/full-stack/components-templates/templates#creating-template-types 

Hope this helps

Esteban Bustamante
RaviCh3Author
August 11, 2024

Thank you very much for your quick reply and I have tried Its working fine.  

kaisekarenet
August 12, 2024

To set a default image in an AEM component dialog:

  • Upload the Default Image to AEM DAM.
  • Edit the Dialog XML of your component (e.g., dialog.xml):
<image
fieldLabel="Image"
name="./image"
xtype="dialog"
defaultValue="/content/dam/your-project/default-image.jpg"/>
  • Save and Test: The default image should appear in the dialog.

This sets the specified image as the default when the dialog loads.

EstebanBustamante
Community Advisor and Adobe Champion
Community Advisor and Adobe Champion
August 12, 2024

@kaisekarenet the classic UI widget are no longer supported nor recommended, so xtype is no longer a viable solution.

Esteban Bustamante
Level 3
August 15, 2024

You can set an alternate image if no image is authored.


in sling model you can check for image and set a default image if there is no image

 

String filereference = properties.get(“yourLogo, “/content/dam/logo.jpg")