Customizing Adaptive Image component?




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? 





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.