Hi @arunpatidar Following our earlier conversation, I successfully implemented the functionality to pick images from Content Fragments and generate responsive renditions using srcsetfor different devices. However, I want the image widths to be dynamically driven by the content policy instead of being hardcoded. Despite trying multiple approaches, I couldn’t achieve this.
Two Approaches Tried to Avoid Hardcoding Image Widths
Direct Policy-Based Widths:
- Fetched image widths from the content policy in the Dynamic Carousel Model.
- Dynamically constructed the srcset using the image path from the Content Fragment and policy-defined widths.
- Issue: This approach lacked Core Image model features, and on-the-fly rendition generation didn’t work reliably without Dynamic Media.
Processing CF Images with Core Image Model:
- Adapted images from Content Fragments to the Core Image model to leverage policy-based responsive renditions.
- Used the Core Image model’s srcset and content policy configurations for image widths.
- Issue: The Core Image model is tightly coupled with drag-and-drop authoring, making integration with CF-driven static images complex and less maintainable.
Both approaches were unsuitable for seamlessly achieving the requirement.
import com.adobe.cq.dam.cfm.ContentFragment;
import com.adobe.cq.dam.cfm.FragmentData;
import com.adobe.cq.wcm.core.components.models.Carousel;
import org.apache.commons.lang3.StringUtils;
import org.apache.sling.api.resource.Resource;
import org.apache.sling.api.resource.ResourceResolver;
import org.apache.sling.models.annotations.DefaultInjectionStrategy;
import org.apache.sling.models.annotations.Model;
import org.apache.sling.models.annotations.injectorspecific.SlingObject;
import org.apache.sling.models.annotations.injectorspecific.ValueMapValue;
import javax.annotation.PostConstruct;
import java.util.ArrayList;
import java.util.Collections;
import java.util.List;
@Model(adaptables = Resource.class, defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL)
public class DynamicCardCarouselModel implements Carousel {
@SlingObject
private ResourceResolver resourceResolver;
@ValueMapValue
private String[] contentFragments;
private List<ContentFragmentData> fragmentDataList;
@PostConstruct
protected void init() {
fragmentDataList = new ArrayList<>();
if (contentFragments == null || contentFragments.length == 0) {
return;
}
for (String fragmentPath : contentFragments) {
if (StringUtils.isNotBlank(fragmentPath)) {
processFragmentPath(fragmentPath);
}
}
}
/**
* Processes a single Content Fragment path and extracts its data if valid.
*
* @param fragmentPath The Content Fragment path to process.
*/
private void processFragmentPath(String fragmentPath) {
Resource fragmentResource = resourceResolver.getResource(fragmentPath);
if (fragmentResource == null) {
return;
}
ContentFragment contentFragment = fragmentResource.adaptTo(ContentFragment.class);
if (contentFragment == null) {
return;
}
ContentFragmentData data = extractContentFragmentData(contentFragment);
if (data != null) {
fragmentDataList.add(data);
}
}
/**
* Extracts relevant data from a Content Fragment.
*
* @param contentFragment The content fragment to extract data from.
* @return A ContentFragmentData object containing the fragment's title, description, image path, and link URL.
*/
private ContentFragmentData extractContentFragmentData(ContentFragment contentFragment) {
String title = getFragmentStringProperty(contentFragment, "cardTitle");
String description = getFragmentStringProperty(contentFragment, "cardDescription");
String imagePath = getFragmentStringProperty(contentFragment, "cardImage");
String linkURL = getFragmentStringProperty(contentFragment, "cardLinkURL");
return new ContentFragmentData(title, description, imagePath, linkURL);
}
/**
* Retrieves a string property value from a Content Fragment.
*
* @param contentFragment The content fragment.
* @param propertyName The name of the property to retrieve.
* @return The string value of the property, or an empty string if not found.
*/
private String getFragmentStringProperty(ContentFragment contentFragment, String propertyName) {
if (contentFragment.hasElement(propertyName)) {
FragmentData fragmentData = contentFragment.getElement(propertyName).getValue();
return fragmentData.getValue(String.class);
}
return "";
}
/**
* Exposes the list of content fragment data for rendering.
*
* @return List of ContentFragmentData objects.
*/
public List<ContentFragmentData> getFragmentDataList() {
return fragmentDataList != null ? fragmentDataList : Collections.emptyList();
}
/**
* Inner class representing the data of a content fragment.
*/
public static class ContentFragmentData {
private final String title;
private final String description;
private final String imagePath;
private final String linkURL;
public ContentFragmentData(String title, String description, String imagePath, String linkURL) {
this.title = title;
this.description = description;
this.imagePath = imagePath;
this.linkURL = linkURL;
}
public String getTitle() {
return title;
}
public String getDescription() {
return description;
}
public String getImagePath() {
return imagePath;
}
public String getLinkURL() {
return linkURL;
}
}
}
<sly data-sly-use.dynamicCarousel="com.v2.core.models.DynamicCardCarouselModel">
<sly data-sly-use.inPageNavModel="com.v2.core.models.InPageNavigationModel">
<div class="cmp-card-carousel" data-cmp-is="card-carousel" id="${carousel.id}">
<div class="cmp-card-carousel__wrapper" data-sly-attribute.id="${inPageNavModel.currentResourceInPageNavID}">
<div class="cmp-card-carousel__controls">
<button class="swiper-button swiper-button--prev">
<span class="visually-hidden">Previous</span>
</button>
<button class="swiper-button swiper-button--next">
<span class="visually-hidden">Next</span>
</button>
</div>
<div class="cmp-card-carousel__swiper swiper">
<sly data-sly-test="${dynamicCarousel.fragmentDataList.size > 0}">
<div class="swiper-wrapper" data-sly-list.fragment="${dynamicCarousel.fragmentDataList}">
<div class="swiper-slide" role="tabpanel" data-cmp-hook-carousel="item" aria-roledescription="slide">
<div class="cmp-card--carousel-item-inner${fragment.linkURL ? ' clickable' : ''}">
<div class="cmp-card__wrapper">
<div class="cmp-card__header">
<img src="${fragment.imagePath}"
srcset="${fragment.imagePath}?width=320 320w,
${fragment.imagePath}?width=520 520w,
${fragment.imagePath}?width=960 960w"
sizes="(max-width: 480px) 320px,
(min-width: 481px) and (max-width: 768px) 640px,
(min-width: 769px) 960px"
alt="${fragment.title}">
</div>
<div class="cmp-card__contents">
<h5 class="cmp-card__title">
<a href="${fragment.linkURL}" target="_blank">${fragment.title}</a>
</h5>
<div class="cmp-card__description">
<p>${fragment.description @ context='html'}</p>
</div>
</div>
</div>
</div>
</div>
</div>
</sly>
</div>
<div class="cmp-card-carousel__scrollbar">
<div class="swiper-scrollbar"></div>
</div>
</div>
</div>
</sly>
</sly>
