Can I find out the image size?

Can I somehow find the image width and height and include them in the < img > tag when using shortcodes?

I don’t think you can do that in Hugo right now. Hugo doesn’t provide any image template functions to do that nor does it provide a way to run an external command to could report that back to you.

What is your use case? What are you trying to fix the width and height for?

I don’t know about the original poster’s reasons for wanting to do this. But from a web design point of view, it’s considered “a good thing” to have image dimensions defined in the HTML so that the browser knows how to position elements on the page while [potentially] the images are still downloading.

I’m well aware of that, it’s why I asked the question of the op :slight_smile:

But how does that ‘best practice’ fit in an age of responsive layout, responsive images, img srcset and so on? Is it still relevant? Is simply setting a % size enough?

Maybe the op has a use case that really does need it.

Here are some related links for discussions:

GitHub gist by @sergiotapia that gets the dimension of a JPEG or PNG file

Feature request for image resizing and cropping in Hugo:

Sorry for late response.

My intention is to serve Retina-ready images. I have image file 2000px wide, but the img tag will specify 1000px width. I already solved this by setting the container width to 1000px and resizing the image with CSS.

Specifying image width and height explicitly in the HTML is necessary for some Retina image implementations. The most basic solution would be to query image dimensions and add width="x" height="y" to the HTML. If the image name ends in “_2x” (or “@2x”), divide the dimensions by 2. (And if the name ends in “_3x” or “@3x” divide by 3.)

(I’ll add a separate post to request this feature, which I believe will also be important for other Hugo users.)

What’s the status about the feature requested in the opening post? I see that there’s a link to github for image resizing, but like Normis I’m interested in getting the image dimensions into Hugo.

Currently, I have to type the width and height for each image manually in my .md file. This is boring and time consuming, and we can probably can do better. :slight_smile:

Besides defining width/height of my images, I also want to apply custom class(es) which at the moment I do by using theme (Cactus) which does support custom CSS-es.

However, when I use e.g. figure shortcode:

{{< figure src="image.jpg" title="Title" class="center" width="220" height="196" >}}

Hugo produces the following code:

<figure class="center">
<img src="image.jpg" width="220" />

but, as you can see, the height attribute is not included and the image is not resized.

What do I miss or do you use markdown syntax for including images in case I wonder how to add class/width/… attributes?

1 Like

I’ve created a shortcode based on this example from the documentation that inserts the width and height into the html. (But for that they still need to be looked up and typed in manually.)

I stumbled across this today.

@bep Looking at the source, only the width argument is parsed, not the height. Should I open a Github issue for this?

Yes, do that. That is old code, tough, strange noone has complained.

This is now fixed in the master branch. Thanks for merging the PR.

Reading this again it occurs to me if you named the files with the image dimensions included you could probably parse them in the shortcode. You’d still need to preprocess the images to add the dimensions but that could be automated.

My comment you reply on is from a while back. I now don’t specify the image width and heights anymore by hand in the shortcode. Instead now I use the imageConfig function for that. That way Hugo can compute the image width and height for me, which saves time I’d otherwise spend looking up the image’s dimensions and typing it in when calling the shortcode. (It also saves me from incorrectly specifying the image dimensions every now and then. :slight_smile:)