hii all,
is how to get the multiple images on page only when we give path in the component not as upload and what can be sling model for this
Solved! Go to Solution.
Views
Replies
Total Likes
This is the cq;dialog structure :
<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0"
xmlns:cq="http://www.day.com/jcr/cq/1.0"
xmlns:granite="http://www.adobe.com/jcr/granite/1.0"
jcr:primaryType="nt:unstructured"
jcr:title="Image Component"
sling:resourceType="cq/gui/components/authoring/dialog">
<content
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/container">
<items jcr:primaryType="nt:unstructured">
<path
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/pathfield"
fieldLabel="Path"
name="./path"
rootPath="/content/dam"
relativeRootPath="../.."/>
</items>
</content>
</jcr:root>
Hello @Shivanandh -
import org.apache.sling.api.resource.Resource;
import org.apache.sling.models.annotations.DefaultInjectionStrategy;
import org.apache.sling.models.annotations.Model;
import org.apache.sling.models.annotations.injectorspecific.Self;
import javax.inject.Inject;
import java.util.ArrayList;
import java.util.List;
@Model(adaptables = Resource.class, defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL)
public class ImageComponentModel {
@Self
private Resource resource;
public List<String> getImages() {
List<String> images = new ArrayList<>();
if (resource != null) {
Resource imagesResource = resource.getChild("images");
if (imagesResource != null && imagesResource.isResourceType("sling:Folder")) {
for (Resource child : imagesResource.getChildren()) {
if (child.isResourceType("nt:file")) {
Resource fileResource = child.getChild("jcr:content/renditions/original/jcr:content");
if (fileResource != null && fileResource.isResourceType("dam:Asset")) {
// Assuming the path leads to a DAM asset
images.add(fileResource.getPath());
}
}
}
}
}
return images;
}
}
Make sure that the structure and naming conventions in the code align with your AEM component & content structure.
This is the cq;dialog structure :
<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0"
xmlns:cq="http://www.day.com/jcr/cq/1.0"
xmlns:granite="http://www.adobe.com/jcr/granite/1.0"
jcr:primaryType="nt:unstructured"
jcr:title="Image Component"
sling:resourceType="cq/gui/components/authoring/dialog">
<content
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/container">
<items jcr:primaryType="nt:unstructured">
<path
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/pathfield"
fieldLabel="Path"
name="./path"
rootPath="/content/dam"
relativeRootPath="../.."/>
</items>
</content>
</jcr:root>
Hello @Shivanandh
You can use the concept of IMAGE_DELEGATE to render the images.
It is used in WCM core components as well like Teaser component.
It uses following code to generate Image URLs
https://github.com/adobe/aem-core-wcm-components/blob/main/bundles/core/src/main/java/com/adobe/cq/w...
benefit: /**
* Component property name that indicates which Image Component will perform the image rendering for composed components. When
* rendering images, the composed components that provide this property will be able to retrieve the content policy defined for the
* Image Component's resource type.
*/