Get specific resource property value from data-sly-resource | Carousel component | | Community
Skip to main content
G
georhe6
Level 4
September 27, 2024
Solved

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

  • September 27, 2024
  • 4 replies
  • 875 views

 

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,

How to retrieve 'alt' and 'title' from this so that can be consumed by the FE team.

Thanks,

Geo

 

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by konstantyn_diachenko

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.

4 replies

EstebanBustamante
Community Advisor and Adobe Champion
EstebanBustamanteCommunity Advisor and Adobe Champion
Community Advisor and Adobe Champion
September 27, 2024

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
    Shashi_Mulugu
    Community Advisor
    Shashi_MuluguCommunity Advisor
    Community Advisor
    September 28, 2024

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

      konstantyn_diachenko
      Community Advisor
      konstantyn_diachenkoCommunity AdvisorAccepted solution
      Community Advisor
      September 30, 2024

      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.

      Kostiantyn Diachenko, Community Advisor, Certified Senior AEM Developer, creator of free AEM VLT Tool, maintainer of AEM Tools plugin.
        kautuk_sahni
        Community Manager
        kautuk_sahniCommunity Manager
        Community Manager
        October 9, 2024

        @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
        Terms & ConditionsAccessibility statement

        Loading footer...