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
BedrockMission!

Learn More

View all

Sign in to view all badges

Customizing Adaptive Image component?

Avatar

Avatar
Validate 1
Level 2
carolynr5682886
Level 2

Likes

10 likes

Total Posts

23 posts

Correct Reply

0 solutions
Top badges earned
Validate 1
Boost 5
Boost 3
Boost 10
Boost 1
View profile

Avatar
Validate 1
Level 2
carolynr5682886
Level 2

Likes

10 likes

Total Posts

23 posts

Correct Reply

0 solutions
Top badges earned
Validate 1
Boost 5
Boost 3
Boost 10
Boost 1
View profile
carolynr5682886
Level 2

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

Avatar

Avatar
Validate 1
Level 2
carolynr5682886
Level 2

Likes

10 likes

Total Posts

23 posts

Correct Reply

0 solutions
Top badges earned
Validate 1
Boost 5
Boost 3
Boost 10
Boost 1
View profile

Avatar
Validate 1
Level 2
carolynr5682886
Level 2

Likes

10 likes

Total Posts

23 posts

Correct Reply

0 solutions
Top badges earned
Validate 1
Boost 5
Boost 3
Boost 10
Boost 1
View profile
carolynr5682886
Level 2

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.