Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.
SOLVED

Sightly component with drag and drop image (get the file reference)

Avatar

Level 2

<sly data-sly-resource="${'mainImg' @resourceType='wcm/foundation/components/image'}" />
Question: I want to use drag-and-drop image (html5smartimage) component in Edit Mode only and to fetch the link to the image file (./fileReference ) and use it as a css/background-image for a div.

while I edited it I decided I can do it with "use" function...

In other words: how to get access to the html5smartimage's dialog from "use" function

P.s By the way, why there isn't exist such a tag "Sightly" on this forum?

1 Accepted Solution

Avatar

Correct answer by
Level 8
public class ImageHelper extends WCMUsePojo { public String getImageSrc() { Image image = new Image(this.getResource(), "image"); if (image != null && image.hasContent()) { image.setSelector("img"); return image.getSrc(); } return null; } public String getBackgroundImageSrc() { return "background-image:url(" + this.getImageSrc() + ")"; } }
<div data-sly-use.img="${'package.name.ImageHelper'}" style="${img.backgroundImageSrc @ context='styleString'}"> Some stuff in here. </div>

View solution in original post

5 Replies

Avatar

Administrator

<sly data-sly-resource="${'mainImg' @resourceType='wcm/foundation/components/image'}" />
Question: I want to use drag-and-drop image (html5smartimage) component in Edit Mode only and to fetch the link to the image file (./fileReference ) and use it as a css/background-image for a div.

while I edited it I decided I can do it with "use" function...

In other words: how to get access to the html5smartimage's dialog from "use" function

P.s By the way, why there isn't exist such a tag "Sightly" on this forum?



Kautuk Sahni

Avatar

Correct answer by
Level 8
public class ImageHelper extends WCMUsePojo { public String getImageSrc() { Image image = new Image(this.getResource(), "image"); if (image != null && image.hasContent()) { image.setSelector("img"); return image.getSrc(); } return null; } public String getBackgroundImageSrc() { return "background-image:url(" + this.getImageSrc() + ")"; } }
<div data-sly-use.img="${'package.name.ImageHelper'}" style="${img.backgroundImageSrc @ context='styleString'}"> Some stuff in here. </div>

Avatar

Employee

Also the the core-component implementation here: https://github.com/Adobe-Marketing-Cloud/aem-core-wcm-components/tree/master/content/src/content/jcr...

I'd be careful using the fileReference-property directly, you might reference a large asset to the client.

Avatar

Level 10

We will have a HELPX artilce out soon that shows Core Components and image as well. 

Avatar

Level 2

Thank you for reply. This is a good news!
If it's possible could you write an article with an example how to get access to properties of nested components from USE-API please. It will be very helpful.

- parsys
     - customComponent
             - logic.js
         - html5smartimage
            - Dialog
        - text
           - Dialog