Add a class to images

This is not about using Hugo shortcodes. This is about adding a class to an image in (almost) pure markdown syntax, that can be previewed in any WYSIWYG editor.

eg. ![alt](img.jpg)

I mentioned the figure shortcode (inbuilt) because your hack uses a custom shortcode class. So may be your editor simply reads ![{{% class %}}](1.jpg) as ![](1.jpg) and thus it doesn’t matter.

Precisely. A slight hack to control markdown images.

But nevertheless there is an open Github issue about the ability of controlling markdown syntax images with CSS classes at Blackfriday’s repo, for quite some time now. People ask for this because with Markdown the content is portable i.e. SSG agnostic and viewable across a variety of editors.

And the custom {{% class %}} shortcode is pretty easy to remove in the future if such a need arises with a simple RegEx.

Hello,
Thanks for sharing.

I did not want to use Hugo-specific language in my writings, as they may be shared in other processors (like Pandoc).

This is why I wrote this script (discussion and source on Github) :

#!/bin/sh

# This script converts a .md Markdown file into a HTML file.
# It takes advantage of Pandoc for that, but keeps the front
# matter verbatim in order to process it into Hugo.

# tmp file:
TMP=`mktemp`


BASE=`basename $1 .md`
DIR=`dirname $1`
HTML="${DIR}/${BASE}.html"

# 1) Get the frontmatter into the final html file
sed -n '1 { /^---/ { :a N; /\n---/! ba; p} }' $1 > ${HTML}

# 2) Get the rest of the Markdown content in a temp file
sed '1 { /^---/ { :a N; /\n---/! ba; d} }' $1 >> ${TMP}

# 3) Convert Markdown into HTML using pandoc and append it to html file
pandoc -f markdown-yaml_metadata_block -t html --parse-raw ${TMP} >> ${HTML}

# 4) Remove the draft line
grep -v "draft:\s*true" ${HTML} > ${TMP}
mv ${TMP} ${HTML}

# LAST: The temporary file has been moved into $HTML,
# there is no need to delete it.
#rm ${TMP}

exit 0

Feel free to use it for you. You only have to reserve the draft:true for post that you want to convert to HTML using that rich and wide Markdown processor.

I put that in my deploy script:

#!/bin/sh

# This script ensures the site is ok to build against Hugo.
DIR=`pwd`

# Uses md2htmlyaml (https://gist.github.com/lebarde/3b49a8ff8ea9940829559c3e439bee9c)
# to convert complex Markdown files to HTML.

# Grep searches for all the drafts
# ...But there was many temporary files ending with ~.
DRAFTS=`grep -lr "draft:\s*true" content | grep -v "~"`

# Convert all the drafts
for i in $DRAFTS; do
  md2htmlyaml $i
done

# Publish
rm -rf public
hugo && rsync -avz --delete public/ my-user@my-host.com:~/sites/my-site.com/

exit 0

Enjoy :slight_smile:

My 2 cents solution to get images centered and responsive:

![Title](/your-image-url/image.png#center)

In the css:

img[src$='#center'] {
  display: block;
  margin: 1.0rem auto;
  max-width: 100%;
  height: auto;
}
3 Likes

Welcome @DocMarty84 to the forum, and thank you for this elegant solution.

I recently came across this post. wasn’t sure if i should start a new one since this is related. I wanted to make a template for AMP pages and the <img tag is unsupported. I did not want to change all my posts to shortcode. I found out that the package used by hugo builds the tags using archaic methods of assembling the strings instead of using a template. Here is the lines of code in black friday that is to “blame” https://github.com/russross/blackfriday/blob/a925a152c144ea7de0f451eaf2f7db9e52fa005a/html.go#L504

With this said i think im givnig up home on markdown img tags and switching to shortcode for images. Unless anyone can help out generating amp-img from markdown img code

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

1 Like