Expand my Community achievements bar.

SOLVED

Fetching image component using a relative path

Avatar

Level 2
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?
1 Accepted Solution

Avatar

Correct answer by
Community Advisor
 

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>

View solution in original post

3 Replies

Avatar

Community Advisor

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

Avatar

Correct answer by
Community Advisor
 

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>