Switch the main picture on the website

Hi @bartgr1,

possible yes, but to answer if its possible OOTB or you would need to integrate with a Personalization tool please share some more details on what exactly you want to achieve?

Do you aim to display different images to different customers based on some customer traits or segments? Do you have the customer data tracked and stored somewhere?

Assuming no personalization is needed, we can create a multifield for image paths in your AEM component. The image list can be retrieved in the Sling Model, and you can create logic to randomly select an image path from the list.

Drawback

One drawback of this approach is that if the page is cached for a longer time in the CDN or Dispatcher, it will continue to show the same image due to caching.

Client-Side Handling

To handle this from the client side, follow these steps:

1. Multifield Image Paths: Populate all image paths received from the multifield in a data attribute.
2. HTML Placeholder: Add a placeholder <img> tag in the Sightly (HTL) code.
3. JavaScript Logic: Write the JavaScript logic to pick a random image from the dataset and replace the src attribute of the placeholder <img> tag.

This approach offers flexibility, as the client-side logic will ensure a random image is selected each time the page is loaded, avoiding caching issues at the CDN or Dispatcher level.

@bartgr1 Did you find the suggestions helpful? Please let us know if you require more information. Otherwise, please mark the answer as correct for posterity. If you've discovered a solution yourself, we would appreciate it if you could share it with the community. Thank you!

Hi @bartgr1 

• To show more images: The simplest way is to create a Carousel component in AEM that automatically switches images after a set interval (X seconds). This can be achieved by dynamically adding multiple images to the component and using JavaScript for automatic image switching.

• To display different images to different users: If you want to show personalized images based on user behavior or characteristics, the recommended approach is to use a personalization tool like Adobe Target. Adobe Target allows you to deliver tailored content, including images, based on user segments or conditions, making it the ideal solution for personalized experiences.

In summary:

• For more images: A simple carousel with JavaScript.
• For different images for different users: Use Adobe Target or AEM Personalization for targeted content delivery.

This approach provides both flexibility and a personalized user experience.