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:
<img src="http://your-image-url" alt="Your image title" title="Your img desc" class="img">
Note that this also works for any html attribute. Could you tell me if you used that or if it works for you?
Damn! It does not work because the quote is filtered 
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
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 <img> tag since it’s within the Commonmark spec to do so…
Maybe something like this?
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 <img /> 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.
Sounds to me like a typical shortcode case. Did you try that? See new Hugo Docs: Shortcode Templates
More specifically, you can use the figure shortcode: http://gohugo.io/extras/shortcodes/#figure
Thank you for your answers!
Actually, I did know about shortcodes. My approach is, everything that is specific to this website can embed every html / shortcode, and this is not an issue for me.
But my main content should be portable. This is why I chose to write in Markdown.
The very best workflow with my posts, essays and math writings is to write in Markdown or a common md dialect, and then export to other formats. This is what I currently do with pandoc and Hugo.
This is the reason why I need to write portable, sustainable content. But if I include pictures in them, I would like to take advantage of bootstrap classes to have fluid images in the content without having to modify my Markdown. This is one example amongst others.
Another one could be to add font awesome classesto blockquotes, and so on.
I more or less managed to do what you need by modifying the Pen markdown WYSIYG editor.
You can add Pen to your site and modify it further according to your needs.
The idea is to wrap an img or whatever other element you write in hugo shortcodes on markdown export.
In Pen’s case you have to manually copy the generated markdown and save it as a file.
It’s not the most advanced solution but it will get you what you need.
See this thread for more:
Thank you very muth @alexandros!
Actually, there seems to be a lot of solutions out there.
I assume that the ideal mechanism to do what we want would be to have a filter mechanism to modify the HTML produced by Blackfriday (part of Hugo or Blackfriday??). But as it is not possible for the moment, your solution seems to be nice enough.
Is there a way to automate it in a script?
Your solution made me think of another one: actually the Pandoc’s Markdown processor enables to add classes to images, and Pandoc also has filters. So we could do a script. All markdown content could be processed with pandoc into html (or into Markdown-with-html-elements), and then it would call Hugo.
This indeed would be a workaround, as we would lose server livereload and as this would be a great performance loss.
The Pandoc solution seems very elegant. If you make a script please do share.
Right now I’m checking out another amazing markdown editor with live preview https://hackmd.io/
Much more robust than Pen it has YAML frontmatter support.
Anyway. I guess that it would be ideal if Hugo had an inbuilt shortcode that detects images in the markdown syntax. If we could also have the ability to add classes to these markdown images that would be even better.
The syntax could have a pattern of something like this
{: .shadow }
(BTW this is how Gitlab has extended the img markdown syntax for classes):
This would be a very cool feature for Hugo and it would greatly reduce the need for shortcodes.
But I don’t know if it can be done. It probably involves extending Blackfriday.
Maybe we should make a separate topic asking for this feature and if @bep or someone else thinks that this is doable then file an issue on Github.
EDIT
I just saw that you already filed a Github issue about img classes at Blackfriday’s repo.
@lebarde and whoever else is interested
It is possible to insert classes to markdown images in Hugo.
Here is the hack
Markdown Syntax
As you can see within the brackets that Markdown reserves for the alt attribute of an image I have included a shortcode called class.
Here are the contents of class.html
{{ with $.Page.Params.title}}{{.}}{{end}}" class="thumb b-lazy
What’s going on here? It’s very simple.
As we know the brackets output begins with alt=" by inserting the shortcode right after the left bracket this is output as:
alt="Some Title" class="thumb b-lazy"
Also note that within the shortcode I have not typed closing quotes (after b-lazy).
And that’s it! Markdown syntax images with preview in WYSIWYG editors and finally classes to control them.