Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
BedrockMission!

Learn more

View all

Sign in to view all badges

SOLVED

Fetching image component using a relative path

majohns0321
Level 1
Level 1
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
Ritesh_M
Correct answer by
Community Advisor
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
Prince_Shivhare
Level 9
Level 9

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_M
Correct answer by
Community Advisor
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