RotatingImageComponent : how can we include responsive images

[Former Member]

We have a Image carousal implemented using RotatingImageComponent . We are trying to use different images for Desktop/tab/mobile versions .Didn't find a way to include ResponsiveImageComponent in this case . Please let me know your valuable suggestions .

[Former Member · Accepted solution]

rotating images component can hold multiple banner components. Each banner component can hold an Image

So your structure should be
RotatingImageComponent
-> Banner1 -> Image1
-> Banner2 -> Image2

JSP snippet below

 <c:forEach var="banner" items="component.banners">
     <picture>
       <source media="(min-width: 768px)" srcset="${banner.media.url}">
       <img src="${component.mobileMedia.url}">
     </picture>
 </c:forEach>

Note: You have to introduce a new attribute called mobileMedia and link it to your banner component. below is items.xml snippet.

 <itemtype code="BannerComponent" autocreate="false"
                       generate="true">
                 <attributes>
                     
                     <attribute type="Media" qualifier="mobileImage">
                         <persistence type="property"/>
                     </attribute>
                     
                 </attributes>
             </itemtype>

[Former Member · Accepted solution]

Thanks for the details . On quick question : I can see 'BannerComponentDataPopulator' in OOB code , should we be customizing this as well to populte the new attributes?

[Former Member · Accepted solution]

I can see this class is deprecated in HybrisV6.7. See if you can populate the model and use it in JSP

[Former Member · Accepted solution]

Thanks , I have customized the OOB populator and it is working as expected. Thanks for the help.

[Former Member]

Hi Mohan

RotatingImagesComponent is rendered with the help of rotatingImagesComponent.jsp

In your JSP, change the markup and use the HTML 5's picture element in place of image element, picture element enables you to display images of multiple resolution based on your screen size.

Have a look at the link below. https://www.w3schools.com/tags/tag_picture.asp

Let me know how you go.

[Former Member]

: The images are defined currently in the impex as 'Media' component ,hence it is configurable via hmc.So we cannot go with the option of front end modification for this change. Is there any impex change or component customization to achieve this . Thanks .