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.

Customizing Adaptive Image component?

Avatar

Level 2

Hi,

I need to customize the adaptive image component to have a height and width. I have it in the dialog already but I can't seem to get the property inside of the jsp to make it render the final image with the height and width on the page.

I've tried it like this:

$("div[data-picture]", context).each(function () {

            var currentPicture = this;

            var matches = [];

            var height = this.getProperty("height");

            var width= this.getProperty("width");

           

....

                   $picImg.attr("height", height);

                   $picImg.attr("width", width);

.....

but height is never populated. How do I get the height from the dialog? 

1 Reply

Avatar

Level 2

I'm answering my own question now that I have figured it. From my calling jsp I set the following:

        String height =  xssAPI.encodeForHTMLAttr( properties.get("height", ""));

        String width =  xssAPI.encodeForHTMLAttr( properties.get("width", ""));

.....

then further in the jsp I have:

<script>

cheight=<%= height %>;

cwidth=<%= width %>;

.....

so that when in my calling external js function I can then call:

.....

                $picImg.attr("height", cheight+"px");

                $picImg.attr("width", cwidth+"px");

.....

The user can then set the height and width via the touch ui generated in the jsp but then rendered by the js function.