365 Days of Code - Day 058

Project Status

ProjectLanguageStatusDue DateLatest Update
Personal WebsiteHugoOngoingNoneThe site is live. Continuous improvements ongoing.
Laravel From ScratchLaravel (PHP)In-Progress2026-03-31Episode 8
PRMLaravel (PHP)In-Progress2026-03-31Working alongside other Laravel projects.
Client Website (J.L.)Laravel (PHP)In-Progress2026-03-31Working alongside other Laravel projects.
Project EulerCOngoingNoneWorking on P25. BigInt (AI gen) was a waste of time, need to rewrite
Practice JavaJavaPausedNoneInstalled, need to find a good project.
Practice PythonPythonPausedNoneInstalled, need to find a good project.
Learn GoGoPausedNoneInstalled, work on LDAP Injector from ippsec.
Learn RustRustHaven’t StartedNoneInstalled, will try network protocols after finishing in C and Zig.
Learn ElixirElixirHaven’t StartedNoneInstalled, need a good tutorial project.
Learn HaskellHaskellHaven’t StartedNoneInstalled, need a good tutorial project.
Learn ZigZigHaven’t StartedNoneInstalled, will try network protocols after finishing in C.
Linux+N/AIn-Progress2026-03-31Reading Chapter 4.
Cyber Quest 2026N/AIn-Progress2026-02-28Finished quiz 1 with 75%.
Operating SystemsN/AIn-Progress2026-03-31Reading Chapter 4: Abstraction
Grey-Hat HackingVariousIn-Progress2026-03-31Reading Chapter 8: Threat Hunting Lab
PHP Time TrackerPHPBeta FinishedNoneWorking on a basic level.
HTTP Status Code ReaderCComplete2026-02-18Complete.
ZSH Configurationbash/zshCompleteNoneSort of an ongoing process, but complete for now. Works good.
Network ProtocolsCIn-ProgressNoneWorking on V3, implementing IPv6.
Discinox WebsiteHTML, CSS, JSComplete2026-03-04The site is live.
DiroffTech WebsiteHTML, CSS, JSComplete2026-03-05The site is live. git-lfs needs to be initialized for images.
Automate BackupsbashComplete2026-03-08Backups done.

Hugo Image Processing

Back to working on image processing in Hugo today. I made some progress on getting unique images into the processing pipeline for every post. It requires setting up an image in the front matter, and referring to that image in the layout template. Unfortunately, Hugo doesn’t yet have full avif support, but webp is working well.

  • layouts/single.html
go 
{{/* Check if the front matter has a hero_image defined */}}
{{ if .Params.hero_image }}
  {{/* Grab the image from the page bundle using the front matter variable */}}
  {{ with .Resources.GetMatch .Params.hero_image }}

    {{/* Store the original image */}}
    {{ $original := . }}

    {{/* Process the image into modern formats and resize it (e.g., to 800px wide) */}}
    {{/* {{ $avif := $original.Resize "200x avif" }} */}}
    {{ $webp := $original.Resize "200x webp" }}
    {{ $resizedOriginal := $original.Resize "200x" }}

    {{/* Output the HTML picture element */}}
    <picture>
      {{/* <source srcset="{{ $avif.RelPermalink }}" type="image/avif" /> */}}
      <source srcset="{{ $webp.RelPermalink }}" type="image/webp" />

      <img
        src="{{ $resizedOriginal.RelPermalink }}"
        width="{{ $resizedOriginal.Width }}"
        height="{{ $resizedOriginal.Height }}"
        alt="{{ $.Params.hero_alt | default $.Title }}"
        loading="lazy"
      />
    </picture>
  {{ end }}
{{ end }}
 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
28

{{/* Check if the front matter has a hero_image defined */}}
{{ if .Params.hero_image }}
  {{/* Grab the image from the page bundle using the front matter variable */}}
  {{ with .Resources.GetMatch .Params.hero_image }}

    {{/* Store the original image */}}
    {{ $original := . }}

    {{/* Process the image into modern formats and resize it (e.g., to 800px wide) */}}
    {{/* {{ $avif := $original.Resize "200x avif" }} */}}
    {{ $webp := $original.Resize "200x webp" }}
    {{ $resizedOriginal := $original.Resize "200x" }}

    {{/* Output the HTML picture element */}}
    <picture>
      {{/* <source srcset="{{ $avif.RelPermalink }}" type="image/avif" /> */}}
      <source srcset="{{ $webp.RelPermalink }}" type="image/webp" />

      <img
        src="{{ $resizedOriginal.RelPermalink }}"
        width="{{ $resizedOriginal.Width }}"
        height="{{ $resizedOriginal.Height }}"
        alt="{{ $.Params.hero_alt | default $.Title }}"
        loading="lazy"
      />
    </picture>
  {{ end }}
{{ end }}
  • content/projects/project-2/index.md
toml 
+++
date = '2026-03-19T00:00:01-05:00'
draft = false
title = 'Project 2'
summary = 'Project 2 Description'
tags = ['project', 'new-project', 'c']
hero_image = "computer.jpg"
hero_alt = "A description of the hero image for accessibility"
+++
1
2
3
4
5
6
7
8
9

+++
date = '2026-03-19T00:00:01-05:00'
draft = false
title = 'Project 2'
summary = 'Project 2 Description'
tags = ['project', 'new-project', 'c']
hero_image = "computer.jpg"
hero_alt = "A description of the hero image for accessibility"
+++

If the post has a hero_image parameter, then Hugo will pick up that image as a page resource, process it into a webp, and any other additional options (resized to 200px here), and output new images.

Related content