After having searched, it seems that you can add a class to a picture in blackfriday’s Markdown: ![Your image title](http://your-image-url "Your img desc" class="img") And it is rendered as: Note that this also works for any html attribute. Could you tell me if you used that or if it works for you?

For posterity I want to point out that since Hugo v.0.62.0 users can have full control over the rendering of Markdown syntax images without shortcodes. See: https://github.com/gohugoio/hugo/releases/tag/v0.62.0

Damn! It does not work because the quote is filtered :rage:

It’s next to impossible to add a class to an md image, unless one resorts to something along the lines of JS string split. I’ve seen this used with syntax in the form of ![Your image class=someclass](http://your-image-url) On the frontend the class is split from the alt. But in the source it’s all still part of the alt attribute. But I’m not a fan of this approach. EDIT I was unsuccessful using Hugo’s native replaceRE and replace functions for this, but you can try yourself, maybe you succeed where I failed. The function needs to be called in your template. It will probably be a performance hit when you generate the site, but at least your source will be clean.

I usually try and take care of this with pseudoselectors and nth-child whenever possible. I am not saying it’s the best approach, but I’ve been known to just take care of this in JavaScript as well, which I think is generally a bad idea because it pollutes your content. Those who say it’s bad for accessibility don’t realize that JS is a-okay with screen readers and AT. But SEO is something different (arguably)… That said, I’ve also seen hacks where you treat the title quote as the means of styling, but that’s an accessibility no-no as well… Ultimately, if you need classes that badly, it’s not too much work to just add a full tag since it’s within the Commonmark spec to do so…

Maybe something like this? ![Your image](http://your-image-url?class=hero)

That doesn’t work either. The markdown syntax gives an optional title attribute so what you posted will be translated into a messy img title.

And is that also possible to automatically add classes to images that are in the content? I mean, as I use Bootstrap, I would like to add class="img-responsive" to my img fields. Is that possible?

You can include any class you need, in your img shortcode.

Indeed, but I would like to add classes to the tags generated by Hugo from markdown. This would be a trigger on blackfriday, I assume. Is that possible?

It’s very difficult to do this. There are no blackfriday hooks, that I know of. Just use an html img tag in your markdown files.

I see, thank you for your explanation. I think that this would be enabled with a hook API, like this one with filters and actions. Thank you then, I will look how I can manage this.

Add a class to images

support

lebarde May 26, 2017, 8:39am 2

Damn! It does not work because the quote is filtered

Topic		Replies	Views
How to specify a class for Image in Markdown? support	10	5268	January 13, 2021
[SCRIPT] Use advanced Markdown features (Images, etc.) tips & tricks	1	3011	June 2, 2017
How would you pass a class to markdown? support	26	5657	January 4, 2026
Is there a way to control markdown images in Hugo? feature	4	7653	December 23, 2019
Images and links in markdown support	12	12137	April 20, 2020

Add a class to images

Related topics