Get specific resource property value from data-sly-resource | Carousel component |

[georhe6]

In the OOTB carousel we updated the HTL and kept the below code.
We are including image component in carousel

<div data-sly-repeat.item="${carousel.items}"
data-sly-resource="${item.name }"
 </div>

The above code generates below on the console,

How to retrieve 'alt' and 'title' from this so that can be consumed by the FE team.

Thanks,

Geo

[EstebanBustamante]

Hi,

The carousel component embeds other AEM’s components, from what I can see in your screenshot you have another component that is the one who is setting the 'alt' and 'title' attributes in the HTML. So to grab those attributes you need to access that embedded component.

Hope this helps

[Shashi_Mulugu]

@georhe6 can you please explain your issue more detailed? In above html screenshot I can see alttext generated? What else you want?

[konstantyn_diachenko · Accepted solution]

Hi @georhe6, 

Core Carousel items class is com.adobe.cq.wcm.core.components.internal.models.v1.PanelContainerItemImpl and it has getResource getter. So, you can build solution around it. The solution consist of 2 parts: HTL and Sling Model Helper.

HTL changes example:

<div data-sly-repeat.item="${carousel.items}">
    <sly data-sly-test.isImage="${'core/wcm/components/image/v3/image' == item.resource.resourceType}"></sly>
    <sly data-sly-test="${!isImage}"
         data-sly-resource="${item.name}"></sly>
    <sly data-sly-test="${isImage}"
         data-sly-use.imageAdapterHelper="${'com.models.ImageAdapterHelper' @ imagePath = item.resource.path}"
         data-sly-set.alt="${imageAdapterHelper.image && imageAdapterHelper.image.alt}"
         data-sly-set.title="${imageAdapterHelper.image && imageAdapterHelper.image.title}">
        <p>${alt}: ${title}</p>
    </sly>
</div>

Sling Model Helper:

import com.adobe.cq.wcm.core.components.models.Image;

@Model(adaptables = SlingHttpServletRequest.class)
public class ImageAdapterHelper {
    @RequestAttribute
    private String imagePath;
    @Self
    private SlingHttpServletRequest request;
    @OSGiService
    private ModelFactory modelFactory;

    @Getter
    private Image image;

    @PostConstruct
    void init() {
        if (StringUtils.isEmpty(imagePath)) {
            return;
        }
        image = Optional.ofNullable(request.getResourceResolver().getResource(imagePath))
                .map(imageResource -> modelFactory.getModelFromWrappedRequest(request, imageResource, Image.class))
                .orElse(null);
    }
}

Additionally, you can implement isImage condition directly in the model.

[kautuk_sahni]

@georhe6 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!