Is it possible to add images inline and resize using markdown?

[matt-sharp]

When I add an image using markdown it gets auto-resized and is too large, here's the syntax I'm using

![image](https://www.url.com/img/image.jpg)

I've tried using a combination of markdown and Html as mentioned here but this doesn't work.

[regisphilibert]

Hi @matt-sharp.

I don't think the syntax mentioned in the provided link is supported yet by Hugo and Goldmark (its default markdown renderer) but since Hugo 0.81.0, Goldmark supports markdown attribute which allow to add classes to blocks in your md. This will not work on image (which are not blocks), but on its parent paragraph though.

![image](https://www.url.com/img/image.jpg)
{.something}

👇

<p class="something">
  <img src="https://www.url.com/img/image.jpg" alt="image">
</p>

This should allow you to constrain images using CSS.

You will need to allow block attributes through the markup setting:

# config.yaml
markup:
  goldmark:
    parser:
      attribute:
        block: true

Adding custom attributes to blocks is supported but to a point (prefixed with data-)

Magnis dis parturient montes, nascetur ridiculus mus.
{data-something="test"}

[nedjo]

You could also look at using an image markdown render hook.