Images without width and height from markdown

support
1 
+++
This page has **bold** and _italics_ formatting.

Lots more **markdown** here here.

![](/uploads/my-image.png)

Is there anyway to add a width and height to the image from the markdown.

It’s bad practice not to have an explicit width and height on an image.

Curious to know how other people handle this. Especially in a situation where a shortcode isn’t possible.

Any ideas would be great, thanks

2

i have a plan to implement something like this:

Use Markdown Render Hooks. Then you can put the size on query parameter

below is untested code, just an idea.

![](/uploads/my-image.png?width=100px&height=500px)

in your render-image.html

{{ $url := urls.Parse .Destination }}
 
<!-- need to parse this "width=100px&height=500px)" to get the width and height value--> 
{{ $url.RawQuery }}

<!-- Output clean image destination url without the ?query params -->
{{ $cleanURL := .Destination | strings.TrimSuffix (print "?" $url.RawQuery) }}
3

I use explicit height in my CSS (which I load blocking in the head). This prevents page jump. Not being able to load shortcodes AND not being able to set the height in the CSS is a rare situation. I like your idea @pamubay.

1 Like
4

@pamubay Nice approach.

I’m relatively new to Hugo and all my projects so far I have been using images retrieved using resources.Get so getting things like width & height wasn’t an issue and this is the first time I will be working with a lot of images directly from the markdown.

Some of the markdown will be in strings so I will use the principles in @pamubay approach and do some regex to set the width and height as render hooks and shortcodes aren’t applicable.

@jhvanderschee I agree page jumps can be awful so apart from bad practice of no explicit width & height it’s a problem in other ways. I may also see what I can do with CSS.

1 Like
5

To be 100% clear:

  • Explicit heights in HMTL prevent this page jump (with a little help of @pamubay).
  • Explicit heights in (blocking) CSS do the same.

I hope one of these solutions work for you. Good luck!

6

Fortunately I’m almost certain the images in my case will be below the fold.

7

That is no guarantee that you will not experience page jump, as users can scroll down before the page is fully loaded.

8

Yes you are correct but I don’t anticipate many images on each page and I’m fairly confident it should all load quite quickly so shouldn’t be a big issue. Thanks

9

Why not retrieve the real width and height from the image itself? That’s a breeze with resources.

1 Like
10

I think I will bake the resolution into the image filename rather than having it as a query string and do the same approach you describe. As I said this is a good idea but in my situation having it baked into the filename is better for me. I’ll make sure all images have this specific format but of course the render hook will have error handling if the pattern doesn’t match.

![](/uploads/myimagefilename--1200x900.png)

11

If possible I’d always use resourcse.Get or imageConfig but it can happen that there are circumstances where this is not option.

@pamubay idea is a good one.

12

Having discovered .RenderString as alternative to markdownify this is no longer an issue as I can use resources.Get

.RenderString supports render hooks.

13

I put a json string in place of the title attribute with a height and width key entry specified. It can also find the image and extract them.

14

100% this. Render hooks is where it is at. Untested /layouts/_default/_markup/render-image.html, something like:


{{- $img := .Page.Resources.GetMatch .Destination -}}
{{- if and (not $img) .Page.File -}}
{{ $path := path.Join .Page.File.Dir .Destination }}
{{- $img = resources.Get $path -}}
{{- end -}}
{{- with $img -}}

  <img
    alt="{{ $.Text }}"
    src="{{ .Destination | safeURL }}"
    width={{ $img.Width }}
    height={{ $img.Height }}
  />

{{- end -}}