# Add a class to images

**URL:** https://discourse.gohugo.io/t/add-a-class-to-images/6724
**Category:** support
**Created:** [May 25, 2017, 11:32pm UTC](https://discourse.gohugo.io/t/add-a-class-to-images/6724 "2017-05-25T23:32:18Z")
**Posts on this page:** 1
**Showing post:** 19

<div class="post-metadata">

### Author: ![alexandros](https://avatars.discourse-cdn.com/v4/letter/a/ecc23a/32.png) [@alexandros](https://discourse.gohugo.io/u/alexandros)
#### Post date: [November 27, 2017, 8:23pm UTC](https://discourse.gohugo.io/t/add-a-class-to-images/6724/19 "2017-11-27T20:23:29Z")

</div>

@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.

---

_[View the full topic](https://discourse.gohugo.io/t/add-a-class-to-images/6724)._