Fetching image component using a relative path

Question

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:

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?

Ritesh_Mittal · Accepted Answer

Hi @melaniejo ,

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>

${mediaModel.resource.path}

Prince_Shivhare · Answer

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

Sign up

Login with SSO

Login to the community

Login with SSO