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 
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.
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" />
<figcaption>
<h4>Title</h4>
</figcaption>
</figure>
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. 
)