I’ve wanted to start blogging for the longest time. Back in the day, I used WordPress, which was super easy to use, but I kept hearing about all the security issues. So, I switched to Ghost and instantly loved how simple it was—especially being able to write in Markdown instead of dealing with a clunky WYSIWYG editor.

Eventually, I made the jump to Hugo. It just made sense. The performance is amazing, backups are a breeze with Git, and I site hosting was made easy.

After setting up Hugo, I went with the PaperModX theme. It looked great right out of the box and had most of what I needed. The only thing that bugged me was how it handled images in posts. I’m not uploading huge, high-res images, but I do want them to maintain the quality and load fast. That’s when I started digging into how I could tweak the theme to handle images better.

One of the cool things about Hugo is that it has built-in image processing. PaperModX already uses this for things like compressing and generating image sets for article cover images. But I wanted to take it further and make sure all the images in my posts were optimized for the web.

To do this, I had to extend the theme. Turns out, it’s not as scary as it sounds. I just needed a modified copy of the render-image.html file and place it into the the layouts/_default/_markup/ folder.

Here’s what I did: on line 21 of the render-image.html file, I added the $img.Process function. This let me convert images to the WebP format, which is way better for the web because it’s smaller and faster to load.

Here’s the code I added:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

{{- $url := urls.Parse .Destination -}}
{{- if $url.Scheme -}}
  {{/* third party image */}}
  <img loading="lazy" src="{{ .Destination | safeURL }}" alt="{{ $.Text }}" {{ with $.Title}} title="{{ . }}" {{ end }} />
{{- else -}}
  {{/* internal image */}}
  {{- $img := .Page.Resources.GetMatch .Destination -}}
  {{- if not $img -}}
    {{- $img = resources.Get .Destination -}}
  {{- end -}}

  {{- if $img -}}
    {{- if eq $img.MediaType.MainType "video" -}}
      <figure>
      <video class="video-shortcode" preload="metadata" controls>
        <source src="{{ $img.RelPermalink }}">
        There should have been a video here but your browser does not seem to support it.
      </video>
      </figure>
    {{- else -}}
    {{ $img := $img.Process "webp" }}
      <img loading="lazy" src="{{ $img.RelPermalink }}" type="" alt="{{ $.Text }}" {{ with $.Title}} title="{{ . }}" {{ end }} />
    {{- end -}}
  {{- else -}}
    {{- warnf "No image found for %s from %s" .Destination .Page.File }}
  {{- end -}}
{{- end -}}

This was a simple way to start learning how to customize Hugo themes. I’m excited to keep exploring and learning more!