1. Home
  2. Development
  3. RE: Freemarker webcontent template img element without height width attribu

RE: Freemarker webcontent template img element without height width attribu

Nikita Laitinen, modified 5 Years ago.
Freemarker webcontent template img element without height width attributes
Junior Member Posts: 44 Join Date: 12/18/19 Recent Posts
When I add IMG element inside freemarker template (web content template)  it appears without attributes width and height. Are there any possible ways to automatically get them there?
I use Liferay 7.0
thumbnail
Christoph Rabel, modified 5 Years ago.
RE: Freemarker webcontent template img element without height width attribu
Liferay Legend Posts: 1555 Join Date: 9/24/09 Recent Posts
I don't understand what you want to accomplish?
Why don't you just write the width/height directly into the image tag? Or do you want to insert the width/height of the image? If so, WHY?
Nikita Laitinen, modified 5 Years ago.
RE: Freemarker webcontent template img element without height width attribu
Junior Member Posts: 44 Join Date: 12/18/19 Recent Posts
I can't define exactly width and height (hardcode) in the template because when people add web content and select image they can choose different images with different sizes.
Yes, I want to insert width height into img attributes width height kinda dynamically. It is necessary to prevent page jumping while images loading.  Communicative Layout Shift metric
thumbnail
Olaf Kock, modified 5 Years ago.
RE: Freemarker webcontent template img element without height width attribu
Liferay Legend Posts: 6441 Join Date: 9/23/08 Recent Posts
Nikita Laitinen:

When I add IMG element inside freemarker template (web content template)  it appears without attributes width and height. Are there any possible ways to automatically get them there?
I use Liferay 7.0
What do you write in your template?
Nikita Laitinen, modified 5 Years ago.
RE: Freemarker webcontent template img element without height width attribu
Junior Member Posts: 44 Join Date: 12/18/19 Recent Posts 
<#if image.getData()?? && image.getData() != "">
&nbsp;&nbsp; &nbsp;<img data-fileentryid="${image.getAttribute(" fileEntryId")}" alt="${image.getAttribute(" alt")}" src="${image.getData()}">
<!--#if-->
This code automaticcly is added when I click on the image variable in fields section of template editing mode
thumbnail
Christoph Rabel, modified 5 Years ago.
RE: Freemarker webcontent template img element without height width attribu
Liferay Legend Posts: 1555 Join Date: 9/24/09 Recent Posts
That code is just an example, you can freely edit it.
We often insert the image as a background image into a fixed width/height container. That way the image is automatically truncated. But please note:
There is no absolute, always correct way to do this. If an image with the wrong aspect ration is used, something of the image will be truncated. Often that's acceptable, sometimes it simply isn't. The best way to fix this is to force the editors to upload images with the right aspect ratio. e.g.:
                <div data-cmh="small-card-img" class="card__image card__image--small" style="background-image: url('${image.getData()}')"></div>

And then you set a width/height in the css class (here card__image--small).
Nikita Laitinen, modified 5 Years ago.
RE: Freemarker webcontent template img element without height width attribu
Junior Member Posts: 44 Join Date: 12/18/19 Recent Posts
Yes, it is one of the approaches
​​​​​​​Thank you!