Highlighted

Customizing Adaptive Image component?

Avatar

Avatar

carolynr5682886

Avatar

carolynr5682886

carolynr5682886

26-02-2018

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? 

Replies

Highlighted

Avatar

Avatar

carolynr5682886

Avatar

carolynr5682886

carolynr5682886

27-02-2018

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.