How to specify a class for Image in Markdown?

support
1

Hello,

In Jekyll I was able to do this:

![office with a view of Thames river](/assets/post-img/office.jpg){:class="myClass"}

This gets translated into:

<img src="/assets/post-img/office.jpg" alt="office with a view of Thames river" class="myClass">

But in Hugo the class gets ignored. How do I achieve that? That would really amazing it if I didn’t have to turn all img markdowns to HTML tags just so to inject a custom class.

Thank you

2

You need to use Markdown Render Hooks Templates

3

Strange, I can’t spot any class there.

The examples are with title.
e.g.

![Text](https://test-logo-wide.svg "my title")

This adds title=“my title”.

Do I have to create an Output Format for this?

4

Please read the link I posted above carefully also search the forum for Markdown Render Hooks, there are examples around.

Markdown Render Hooks are templates that go under a specific path, therefore simply by entering a markdown syntax image in a content file you can output whatever HTML and class

5

if it’s something you need often (for exemple a full width image in a blog article) you can’t create a shortcode for that? What is the difference between the solutions?

6

You simply enter: ![Text](https://test-logo-wide.svg "my title")

And if you specify the relevant template:

layouts
└── _default
    └── _markup
        └── render-image.html

Then you can render whatever you need i.e. <img src="https://test-logo-wide.svg" alt="Text" class="whatever">.

Read the documentation link please.

7

I did but wonder if there is a difference with :

└── _default
└── shortcodes
    └── wide-logo.html

with

    {{< wide-logo >}} src="/media/test-logo-wide.jpg" title="Steve Francia" > {{< /wide-logo >}}

We can’t get the same result?

8

Yes. You get the same result.

But Markdown Render Hooks are more intuitive, as you do not need to use Hugo specific Shortcode syntax and therefore you can use pure Markdown that is portable in whatever content editor and coupled with Page Bundles one can get image previews directly in the editor.

I only rarely use Hugo Shortcodes these days, when I have a specific need.
Most of my projects have been converted to use Markdown Render Hooks as these make content authoring more pleasant and intuitive.

1 Like
9

I see, sounds like a good practice to keep in mind. Thanks for your explanations

10

Thank you for the explanation.
I’m really sorry. I have read the documentation multiple times and it doesn’t click in my head.

I have created the template as suggested.

layouts
└── _default
    └── _markup
        └── render-image.html

And in there I added this:

<p class="md__image">
  <img src="{{ .Destination | safeURL }}" alt="{{ .Text }}" {{ with .Class}} class="{{ . }}"{{ end }} />
</p>

But I get the error message:

execute of template failed: template: _default/_markup/render-image.html:2:68: executing "_default/_markup/render-image.html" at <.Class>: can't evaluate field Class in type goldmark.linkContext

It seems the linkContext only accepts specific predefined hooks, as shown here

I suppose I need to pass the Page context and set that variable in config?

11

I finally got it. :sweat_smile:

![Faster](/images/post-img/faster.jpg "noMargin")

<img src="{{ .Destination | safeURL }}" alt="{{ .Text }}" {{ with .Title }} class="{{ . }}"{{ end }} />
1 Like
12

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.