image as pathfield | Community
Skip to main content
Level 2
June 23, 2023
Solved

image as pathfield

  • June 23, 2023
  • 2 replies
  • 1067 views

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

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 Tanika02

@shivanandh - 

 

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>

 

 

2 replies

Tanika02
Level 7
June 23, 2023

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. 

Level 2
June 24, 2023

can you provide cq:dialog for this? @tanika02 

Tanika02
Tanika02Accepted solution
Level 7
June 25, 2023

@shivanandh - 

 

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>

 

 

aanchal-sikka
Community Advisor
Community Advisor
June 23, 2023

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.

 

https://github.com/adobe/aem-core-wcm-components/blob/main/bundles/core/src/main/java/com/adobe/cq/wcm/core/components/internal/models/v1/TeaserImpl.java

 

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/wcm/core/components/internal/models/v1/AbstractImageDelegatingModel.java 

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.
*/

Aanchal Sikka