Hugo Image Path Refactoring

Make the best of Hugo page resources


To set up a reasonable content structure for my blog.

Before Hugo

In my old Octopress blog, images and posts were placed under source/images/posts and source/_posts folders respectively. They were so far apart that I needed to use copy and paste the URL’s so as to get them right. As the size of the blog grew, I could hardly retrieve an image without first listing the files in the post image folder. This significantly reduced the efficiency of blog writing. In my hometown, people take efficiency seriously.

After Hugo

At first, I followed Jura’s advice and put all post images as the site’s static contents.

![Example image alt text](/static/path-to-image.png)

However, that didn’t address the above problem.

Thanks to Regis Philibert’s article on Hugo page resources, I’ve now adopted Hugo’s leaf bundle structure for holding the illustrations with each post. An image can be added by its relative path. This greatly simplifies the editing process.

To avoid going deep into Hugo’s image processing functionalities, I used ImageMagick to optimize the pictures for Web.

convert image.jpg -sampling-factor 4:2:0 -strip -quality 85 -interlace JPEG -colorspace RGB image_converted.jpg

I’ve used -quality 60 for largest photos in my post about fan cleaning. Despite the reduced quality, the display is still great.

The Beautiful Hugo has already done the config for popup images, so the built-in shortcode figure will automatically create a gallery for each page.


No comment