Add custom CSS classes to images with Hugo’s Markdown attributes

Note: You need to run Hugo ⩾ 0.81, and Hugo 0.108.0 provides interesting improvements on this topic

In config.toml

[markup.goldmark.parser.attribute]
block = true
title = true

or in config.yml

markup:
  goldmark:
    parser:
      attribute:
        block: true
        title: true

![Image description](/images/portfolio/theme-screenshot.jpg)
{.custom-css-class}

![Image description](/images/portfolio/theme-screenshot.jpg)
{.myclass class="custom-css-class1 custom-class2"}

Example

Custom CSS is applied to the picture

This picture surrounded by a frame is the result of this image together with some CSS and the following markup:

![image description](/illustrations/cloud.jpg)
{.frame-browser}