Expand my Community achievements bar.

Don’t miss the AEM Skill Exchange in SF on Nov 14—hear from industry leaders, learn best practices, and enhance your AEM strategy with practical tips.
SOLVED

Get specific resource property value from data-sly-resource | Carousel component |

Avatar

Level 3

 

In the OOTB carousel we updated the HTL and kept the below code.
We are including image component in carousel

<div data-sly-repeat.item="${carousel.items}"
data-sly-resource="${item.name }"
 </div>

The above code generates below on the console,
georhe6_0-1727450876390.png
How to retrieve 'alt' and 'title' from this so that can be consumed by the FE team.

Thanks,

Geo

 

1 Accepted Solution

Avatar

Correct answer by
Level 4

Hi @georhe6

Core Carousel items class is com.adobe.cq.wcm.core.components.internal.models.v1.PanelContainerItemImpl and it has getResource getter. So, you can build solution around it. The solution consist of 2 parts: HTL and Sling Model Helper.

HTL changes example:

<div data-sly-repeat.item="${carousel.items}">
<sly data-sly-test.isImage="${'core/wcm/components/image/v3/image' == item.resource.resourceType}"></sly>
<sly data-sly-test="${!isImage}"
data-sly-resource="${item.name}"></sly>
<sly data-sly-test="${isImage}"
data-sly-use.imageAdapterHelper="${'com.models.ImageAdapterHelper' @ imagePath = item.resource.path}"
data-sly-set.alt="${imageAdapterHelper.image && imageAdapterHelper.image.alt}"
data-sly-set.title="${imageAdapterHelper.image && imageAdapterHelper.image.title}">
<p>${alt}: ${title}</p>
</sly>
</div>

Sling Model Helper:

import com.adobe.cq.wcm.core.components.models.Image;

@Model
(adaptables = SlingHttpServletRequest.class)
public class ImageAdapterHelper {
@RequestAttribute
private String imagePath;
@Self
private SlingHttpServletRequest request;
@OSGiService
private ModelFactory modelFactory;

@Getter
private Image image;

@PostConstruct
void init() {
if (StringUtils.isEmpty(imagePath)) {
return;
}
image = Optional.ofNullable(request.getResourceResolver().getResource(imagePath))
.map(imageResource -> modelFactory.getModelFromWrappedRequest(request, imageResource, Image.class))
.orElse(null);
}
}

Additionally, you can implement isImage condition directly in the model.

View solution in original post

4 Replies

Avatar

Community Advisor

Hi,

 

The carousel component embeds other AEM’s components, from what I can see in your screenshot you have another component that is the one who is setting the 'alt' and 'title' attributes in the HTML. So to grab those attributes you need to access that embedded component.

 

Hope this helps



Esteban Bustamante

Avatar

Community Advisor

@georhe6 can you please explain your issue more detailed? In above html screenshot I can see alttext generated? What else you want?

Avatar

Correct answer by
Level 4

Hi @georhe6

Core Carousel items class is com.adobe.cq.wcm.core.components.internal.models.v1.PanelContainerItemImpl and it has getResource getter. So, you can build solution around it. The solution consist of 2 parts: HTL and Sling Model Helper.

HTL changes example:

<div data-sly-repeat.item="${carousel.items}">
<sly data-sly-test.isImage="${'core/wcm/components/image/v3/image' == item.resource.resourceType}"></sly>
<sly data-sly-test="${!isImage}"
data-sly-resource="${item.name}"></sly>
<sly data-sly-test="${isImage}"
data-sly-use.imageAdapterHelper="${'com.models.ImageAdapterHelper' @ imagePath = item.resource.path}"
data-sly-set.alt="${imageAdapterHelper.image && imageAdapterHelper.image.alt}"
data-sly-set.title="${imageAdapterHelper.image && imageAdapterHelper.image.title}">
<p>${alt}: ${title}</p>
</sly>
</div>

Sling Model Helper:

import com.adobe.cq.wcm.core.components.models.Image;

@Model
(adaptables = SlingHttpServletRequest.class)
public class ImageAdapterHelper {
@RequestAttribute
private String imagePath;
@Self
private SlingHttpServletRequest request;
@OSGiService
private ModelFactory modelFactory;

@Getter
private Image image;

@PostConstruct
void init() {
if (StringUtils.isEmpty(imagePath)) {
return;
}
image = Optional.ofNullable(request.getResourceResolver().getResource(imagePath))
.map(imageResource -> modelFactory.getModelFromWrappedRequest(request, imageResource, Image.class))
.orElse(null);
}
}

Additionally, you can implement isImage condition directly in the model.

Avatar

Administrator

@georhe6 Did you find the suggestions helpful? Please let us know if you require more information. Otherwise, please mark the answer as correct for posterity. If you've discovered a solution yourself, we would appreciate it if you could share it with the community. Thank you!



Kautuk Sahni