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

Fetching image component using a relative path

Avatar

Avatar
Level 1
majohns0321
Level 1

Likes

0 likes

Total Posts

4 posts

Correct Reply

0 solutions
View profile

Avatar
Level 1
majohns0321
Level 1

Likes

0 likes

Total Posts

4 posts

Correct Reply

0 solutions
View profile
majohns0321
Level 1

07-05-2021

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?

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar
Boost 5
Level 5
Ritesh_M
Level 5

Likes

86 likes

Total Posts

73 posts

Correct Reply

24 solutions
Top badges earned
Boost 5
Boost 3
Boost 1
Applaud 5
Affirm 1
View profile

Avatar
Boost 5
Level 5
Ritesh_M
Level 5

Likes

86 likes

Total Posts

73 posts

Correct Reply

24 solutions
Top badges earned
Boost 5
Boost 3
Boost 1
Applaud 5
Affirm 1
View profile
Ritesh_M
Level 5

08-05-2021

 

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>

Answers (1)

Answers (1)

Avatar

Avatar
Springboard
Level 7
Prince_Shivhare
Level 7

Likes

107 likes

Total Posts

393 posts

Correct Reply

63 solutions
Top badges earned
Springboard
Establish
Give Back 100
Boost 100
Validate 1
View profile

Avatar
Springboard
Level 7
Prince_Shivhare
Level 7

Likes

107 likes

Total Posts

393 posts

Correct Reply

63 solutions
Top badges earned
Springboard
Establish
Give Back 100
Boost 100
Validate 1
View profile
Prince_Shivhare
Level 7

08-05-2021

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