Message Boards
Freemarker webcontent template img element without height width attributes
Nikita Laitinen, modified 3 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
I use Liferay 7.0
Christoph Rabel, modified 3 Years ago.
RE: Freemarker webcontent template img element without height width attribu
Liferay Legend Posts: 1554 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?
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 3 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
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
Olaf Kock, modified 3 Years ago.
RE: Freemarker webcontent template img element without height width attribu
Liferay Legend Posts: 6403 Join Date: 9/23/08 Recent PostsNikita Laitinen:
What do you write in your template?
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
Nikita Laitinen, modified 3 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() != "">
<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
Christoph Rabel, modified 3 Years ago.
RE: Freemarker webcontent template img element without height width attribu
Liferay Legend Posts: 1554 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.:
And then you set a width/height in the css class (here card__image--small).
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 3 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!
Thank you!