Fetching image component using a relative path

[majohns0321]

In the List component which we have customized, we have this resource call to bring in the image from an article page that has been built using layout containers:

<sly data-sly-resource="${item.path @ appendPath='/_jcr_content/root/responsivegrid/responsivegrid/image', resourceType='cfin/components/content/image', decoration='false'}"></sly>

We need the second "responsivegrid" to be relative since AEM will sometimes store that name with random digits at the end of the name in the content structure. Ex, it could be stored as:

root
-- responsivegrid
----- responsivegrid_123421

I have tried using a combination of ../ to pull in the image, but no luck. Thoughts? How can I relatively reference this?

[Prince_Shivhare]

I think we can achieve it using the iterator?

Using the sling models, we can iterate the child nodes and find the node which you want.

and then we can use that path.

Thanks,

Prince

[Ritesh_Mittal · Accepted solution]

Hi @majohns0321 ,

Inside your Sling Model, you can iterate through all the children resources and then can make a list of those, the same you can iterate on HTL side, for example-

Sling Model-

@SlingObject
Resource resource;

List<ImageModel> images; //ImageModel can be simple Resource or if you want to add custom props

public List<ImageModel> getImages() {
if (images== null) {
try (Stream<Resource> stream = StreamSupport.stream(resource.getChildren().spliterator(), false)) {
images= stream.map(r -> r.adaptTo(ImageModel.class)).filter(Objects::nonNull)
.collect(Collectors.toList());
}
}

return images;
}

HTL code -

<sly data-sly-list.mediaModel="${model.images}">
<p>${mediaModel.resource.path}</p>
<sly
data-sly-resource="${@path= mediaModel.resource.path, resourceType=mediaModel.resource.resourceType, decorationTagName='div'}" />
</sly>

[majohns0321]

Thank you so much! I will give it a try!