Skip to content
Grav 2.0 is officially stable. Read the announcement →
Support

How to specify width and height for images in the editor (markdown)

Solved by pamtbaau View solution

Started by Jordi Clotet de Frutos 5 years ago · 4 replies · 1437 views
5 years ago

Hi,
through lighthouse reports, google encourage developers and webmasters to specifically add width and height of images. The problem comes when adding an image through the admin text editor.

The image is added this way:
![my-image-alt](image-name.svg "my-image-title")

I can add the width through an attribute:
![my-image-alt](image-name.svg?attribute=width,27 "my-image-title")
This works fine

But the "height"... how can I add the height?

I tried using "&" but it is not working:
![my-image-alt](image-name.svg?attribute=width,27&attribute=height,27 "my-image-title")

Any ideas?
Thanks

5 years ago Solution

@joordiii, You might want to take a look at the docs about Configuration. Especially the Images setting 'cls' or 'Cumulative Layout Shift'.

In Markdown, you can use something like ![](image.jpg?autoSizes=true). Height and width will now be added automatically.

See https://web.dev/optimize-cls/ for more background info on cls.

👍 1
last edited 08/02/21 by pamtbaau
5 years ago

@pamtbaau , thank you very much for your reply and for giving a solution. It worked fine thanks.
Activating CLS (Enable Auto Sizes) through the Configuration automatically adds width and height to all images, if it is disabled then width and height can be added individually using ?autoSizes=true in the desired image. Perfect!

The only thing I noticed is that this works fine for .jpg and .png images, it doesn't gives sizes to .svg images. Replacing .svg images will do the job.

Very grateful for your help

5 years ago

@joordiii, The size of an image is determined using the GD library function getImagesize(). However, svg is not an image but an xml file...

Suggested topics

Topic Participants Replies Views Activity
Support · by Thomas, 1 week ago
3 101 8 hours ago
Support · by Anna, 3 days ago
2 98 1 day ago
Support · by Justin Young, 1 day ago
1 66 1 day ago
Support · by Duc , 1 week ago
2 101 6 days ago
Support · by Colin Hume, 1 week ago
2 94 6 days ago