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

Customizing Adaptive Image component?

Level 2
Level 2


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
Level 2
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:


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.