Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

SOLVED

How to fetch image from Sling Model

Avatar

Level 4

How to fetch image object from Sling Model into Sightly? Please help

1 Accepted Solution

Avatar

Correct answer by
Level 5

If you want to drag and drop image already present in DAM, you can use below for Reference

Model - https://github.com/adobe/aem-core-wcm-components/blob/main/bundles/core/src/main/java/com/adobe/cq/w...

Sightly - https://github.com/adobe/aem-core-wcm-components/blob/main/content/src/content/jcr_root/apps/core/wc...

 

In this case you would be returning the fileReference to sightly.

View solution in original post

8 Replies

Avatar

Level 4

I need to fetch the image path and map as resources. How to do it? Please help. I'm new to this concept

Avatar

Level 5

Hi @Sanjana12 

 

In Sling model, you need to follow the below steps :

1. Get your resource in Sling Model.

2. Get the path of the resource using resource.getPath and append to it the path where the Binary file is stored and store the entire path in a variable say imagePath

imagePath=resource.getPath()+"/photo/image";

3. Now write a getter method for the same

@Override
    public String getImagePath() {
        return imagePath;
    }

4. Now in sightly call the Model and then call the getter method as below :

<div data-sly-use.sampleModel="com.xyz.aem.tutorials.core.models.ComponentModel"></div>

<img src="${sampleModel.imagePath}" class="image" alt="User-Profile-Image">

 

Refer to : https://github.com/aemgeeks1212/geekstutorials/blob/main/core/src/main/java/com/geeks/aem/tutorials/...

 

If this doesn't help you I would recommend you to go through the below YouTube tutorial 

https://youtu.be/BnU4AXWcKx4

Avatar

Level 5

Hi @Sanjana12

 

In Sling Model kindly do the below,

1. Get The resource .

2. From the resource get the resource path and append to it the path of the Binary File and store it in the imagePath variable as below 

imagePath=resource.getPath()+"/photo/image";

3. Write a getter method to return the imagePath as below

@Override
    public String getImagePath() {
        return imagePath;
    }

4. In sightly call the model and then call the getter method to fetch the imagePath

<div data-sly-use.sampleModelObject="com.xyz.aem.tutorials.core.models.ComponentModel"></div>

<img src="${sampleModelObject.imagePath}" alt="User-Profile-Image">

 

Please refer to the below code :

https://github.com/aemgeeks1212/geekstutorials/blob/main/core/src/main/java/com/geeks/aem/tutorials/...

 

If this doesn't help I would recommend you to go through the below Youtube Tutorial :

https://www.youtube.com/watch?v=BnU4AXWcKx4

Avatar

Level 4

What if I just want to drag and drop and not upload from local filesystem?

Avatar

Correct answer by
Level 5

If you want to drag and drop image already present in DAM, you can use below for Reference

Model - https://github.com/adobe/aem-core-wcm-components/blob/main/bundles/core/src/main/java/com/adobe/cq/w...

Sightly - https://github.com/adobe/aem-core-wcm-components/blob/main/content/src/content/jcr_root/apps/core/wc...

 

In this case you would be returning the fileReference to sightly.

Avatar

Level 2

Use the pathbrowser field in the dialog, you will get the path from here. After getting the path in Sling Model, use that object image src reference.

Please use below link for reference: 

https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/how-to-render-image-via-si...