Expand my Community achievements bar.

Applications for the 2024-2025 Adobe Experience Manager Champion Program are open!
SOLVED

image as pathfield

Avatar

Level 3

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

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

@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>

 

 

View solution in original post

4 Replies

Avatar

Community Advisor

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. 

Avatar

Correct answer by
Community Advisor

@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>

 

 

Avatar

Community Advisor

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

 

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


Aanchal Sikka