How to use image width in markdown?

support
1

I have recently upgraded Hugo to 0.82.1, hoping I could get it to support Markdown links like these:

![](https://s3-us-east-2.amazonaws.com/sourceapprentice-blog-media/orig-bg.png =350x)

Is there a way to get Hugo to render =350x as it exists today? ( Maybe with render hook templates / attribute maps? )

I use forestry.io for a CMS for my blogs, and it supports the above. (But if I change the link in other ways, it no longer renders correctly.)

I think if it were to take the number ‘350’ and use that as the width attribute for the image, it would work. Alternatively, is there a way for it just drop the piece =.*x and render what remains as usual?

2

Are you open to either of these alternate syntaxes?

![alt](a.img "=350x")
![alt](a.img "{width='350'}")
3

Presently, that results in the image being displayed full-size in forestry.io with the contents visible when you mouse over it. This might still be acceptable, though. Does that work out of the box right now?

4

No. Both of the options above will require an image render hook. The second option is more flexible, allowing you to do things like:

![alt](a.img "This is the title attribute {width='100' height='75' style='border: 1px solid red;`}")

Which would render as:

<img src="a.jpg" alt="alt" title="This is the title attribute" width="100" height="75" style="border: 1px solid red;'">
5

If I can create that image render hook myself, then I actually consider that “out of the box” … But I had trouble understanding the documentation for image rendering hooks …

6

This is a good example:
https://gohugo.io/getting-started/configuration-markup#image-markdown-example

Maybe you can test a bit, and post here again if you have specific questions?

7 
<img src="{{ .Destination | safeURL }}" alt="{{ .Text }}" {{ with .Title}} title="{{ . }}"{{ end }} />

That is, unfortunately, exactly the example I had trouble understanding. It might be because it’s been a while since I’ve worked with Hugo. (Somewhere around 500 days…)

When I first saw this example, I didn’t understand where .Text and .Title were coming from, but when I just looked at the page again, I noticed this: The render-link and render-image templates will receive this context:, followed a list of what was supported, with size, style, etc, not in the list.

I’m guessing there’s a way to access those through .Attributes ? But attributes will be a map, so maybe accessing it will be something like .Attributes[size] … no idea what that would look like

… but I also don’t understand why .alt doesn’t seem to require with, but .Title does, but then why is title assigned "{{ . }}", and what does {{ end }} do?

So, I’d say I’m missing a few things …

8 
![alternate text](/path-to-image.img "This is the title")
  --------------  ------------------  -----------------
      .Text          .Destination          .Title

So you need to parse the title.

9

i came across this thread while searching for how to set image width… the figure shortcode can sometimes be a good method:

1 Like