Thumbnail Images on your Hugo Blog Posts
Hugo now has the ability to do image resizing, cropping, quality-changing, etc (hooray!) - so how do we use it? In this post we take a look at how to resize images automatically using Hugo. There’s a few different ways to achieve this, depending on what you’re trying to do.
In a Theme - “I want to make thumbnails!”
You might run a blog, which on the home page has a list of your blog posts. And lets say you want to show a thumbnail image for each of your posts. This is the scenario we’ll be looking into here.
Important! Make sure your images are not stored in the /static/ folder
In our example, our theme displays the lists of posts in layouts/_default/summary.html
It looks a little like this (I’ve simplified it a bit):
In our example, each of our posts have
featured_image in the properties of the markdown file which was can use to know which is the “primary” image of the page. We can then add our images to this summary file by using
resources.Get to get the photos.
So, all together it becomes:
$image.Fill "200x200 q100 Center" can be changed, as we’re making an image with 200px width and 200px height, at 100 quality (crop to the center).
If we sprinkle on some final css style to tidy things up:
Site illustrations (of Hugo the rabbit) drawn by Carina Roberts.