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

[aleksandrsp9196]

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

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

[leeasling · Accepted solution]

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>

[Feike_Visser1]

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.

[smacdonald2008]

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

[aleksandrsp9196]

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