New Image Shortcode

Tagged in:
• hugo
• shortcode

So rather than use the regular markdown code for images (![alt for image](url-of-image.png)) I made a simple shortcode called img.html.

In particular I wanted to be able to style images, float them left or right, round corners, etc..

You don’t have to type the full path, just the file name and as long as it’s in the static/img/ folder it will work.

I was going to use positional setting for the src value but it seems shortcode have to be set to positional or named, but not both.

It’s interesting that the variables can be used inside the with statements, which reduce the context.

1{{ $src := .Get "src" }}
2{{ $alt := .Get "alt" }}
3{{ $title := .Get "title" }}
4{{ $style := .Get "style" }}
5
6<img src="/img/{{ $src }}"
7{{ with "style" }} style="{{ $style | safeCSS }}" {{ end }}
8{{ with "alt" }} alt="{{ $alt }}" {{ end }} 
9{{ with "title" }} title="{{ $title }}" {{ end }}>

Future idea?

Create a similar shortcode but that uses Hugo’s image processing to resize images and create a srcset for responsive.

• ◀ Previous
• Next ▶