Add a class to images


#5

Maybe something like this?
![Your image](http://your-image-url?class=hero)


#6

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.


#7

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?


#8

You can include any class you need, in your img shortcode.


#9

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?


#10

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.


#11

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.


#12

Sounds to me like a typical shortcode case. Did you try that? See new Hugo Docs: Shortcode Templates


#13

More specifically, you can use the figure shortcode: http://gohugo.io/extras/shortcodes/#figure


#14

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.


#15

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:


#16

Thank you very muth @onedrawingperday!

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.


#17

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
![image alternative text](/path/to/image.png){: .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.


#18

Script shared here. This indeed solved my problem!


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


Keep images & content together
#20

It’s already possible using the inbuilt figure shortcode (use the class argument).


#21

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)


#22

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.


#23

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.


#24

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: