Expand my Community achievements bar.

Radically easy to access on brand approved content for distribution and omnichannel performant delivery. AEM Assets Content Hub and Dynamic Media with OpenAPI capabilities is now GA.
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