Image Formatting

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean tempus non elit in lobortis. Pellentesque mi lacus, fringilla vel sagittis a, gravida sed diam. Donec commodo molestie leo id scelerisque. Nullam id fermentum orci, ac efficitur elit. Maecenas sollicitudin sem nunc. Cras id cursus nibh. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus tellus lacus, accumsan efficitur leo vel, finibus eleifend velit. Quisque a nibh ante. Vivamus nisi nisl, finibus ultricies dui sed, porta sagittis est. Aenean nec lacus elit. Praesent justo tellus, tempor et ipsum id, dapibus aliquet neque. Vestibulum commodo est malesuada leo mattis consectetur. Morbi accumsan sollicitudin libero nec commodo. Quisque sed pretium sem, et facilisis ipsum.

The above is an example of a custom shortcode I was able to bash together from Hugo.

I like articles that can present small images attractively off to one side in the image. It’s a common design for magazines and similar. Hugo templates seem to prefer images between paragraphs, and the theme I liked adds a zoom effect that may be undesirable with smaller images.

My first attempt at my custom “thumbnail” was a modified hack from a helpfdul website I can’t remember. It worked, but had some issues: The Blowfish theme applied a zoom behavior to images that my effect couldn’t override while being a bit lacking in options.

The second effort was based on realizing that Hugo uses overrides for many things. if a theme implements a shortcode called “foobar” a specific website can implement a modified “foobar” by placing a file in the appropriate location with the appropriate name.

I don’t use this override behavior currently, but researching it provided a value: many tutorials on overrides suggest copying a theme’s supplied shortcode to maintain the original and provide a fallback option. I copied the shortcode that was close to my need (the theme’s default “figure” shortcode) and used it as a basis for my needs. I think this shortcode is a modification of the base Hugo shortcode as well.

My new shortcode can be used like this:

{{< thumbnail src=“featured.jpg” caption=“Noodle and me on the trail several years ago.” nozoom=“true” float=“left” width=“33%” >}}

• thumbnail is the shortcode name itself.
• the src value is the image. The original shortcode also has functionality for external image links.
• the caption is used for a title below. I should probably be using an alt value for those unable to see the image as well.
• nozoom is a boolean variable and disables the zoom behavior if set.
• My first major addition is the float value which activates a class to handle floating the image (actually the containing “figure” html object) to the left or right. Garbage values may cause some weird results, mainly looking for a class that doesn’t exist.
• My other addition is the width value which can take CSS-compliant options like ‘200px’ or (as here) ‘33%’ as values. My initial version used a fixed width, but this is more flexible and supports both pixel-sizes and percentages.

Some sample image formats with my shortcode. I’m still working on an issue in which the theme seems to insist on using low-quality images, but that’s a work in progress.