Sightly component with drag and drop image (get the file reference) | Community
Skip to main content
aleksandrsp9196
aleksandrsp9196
Level 2
April 27, 2017
Solved

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

  • April 27, 2017
  • 5 replies
  • 3110 views

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

    This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
    Best answer by leeasling
    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>

    5 replies

    kautuk_sahni
    Community Manager
    kautuk_sahniCommunity Manager
    Community Manager
    May 5, 2017

    <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
    L
    leeaslingAccepted solution
    Level 8
    May 5, 2017
    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
    Adobe Employee
    Feike_Visser1Adobe Employee
    Adobe Employee
    May 7, 2017

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

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

    smacdonald2008
    smacdonald2008
    Level 10
    May 7, 2017

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

      aleksandrsp9196
      aleksandrsp9196Author
      Level 2
      May 8, 2017

      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

      Terms & ConditionsAccessibility statement

      Loading footer...