Add a class to images

support
19

@lebarde and whoever else is interested

It is possible to insert classes to markdown images in Hugo.

Here is the hack

Markdown Syntax

![{{% class %}}](1.jpg)

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.

2 Likes