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

Forum|Forum|1 year ago
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

Adobe Developer

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

G

gvaem

New Participant

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")

kaisekarenet

New Participant

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

New Participant

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

Esteban Bustamante

EstebanBustamanteAccepted solution

New Participant

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