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

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

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

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