Parts to “The Yawning Abyss”

• Hugo - the power behind this site
• Mainroad theme - to look of this site
• go-avif - to encode images in AVIF

Code and Code Changes

AVIF image support

AVIF is the latest open standard image format with wide acceptance that offers small image size.

Not all browsers support it yet. There is a way in HTML to have multiple images specified and then let the browser select the first one it can display. In order to automate this I’ve added the following new shortcode.

figure_avif.html

{{ $image := .Get "image"}}
{{ $type_arr := split $image "." }}
{{ $srcbase := index $type_arr 0 }}

<figure{{ with .Get "class" }} class="{{ . }}"{{ end }}>
    <picture>
      <source srcset="{{$srcbase}}.avif" type="image/avif">
    <img src="{{.Get `image`}}" alt="{{.Get `alt` }}"
    {{- with .Get "width" }} width="{{ . }}"{{ end -}}
    {{- with .Get "height" }} height="{{ . }}"{{ end -}} defer>
    </picture>
    <figcaption>
    <p class="caption">{{.Get "caption" }}</p>
    </figcaption>
</figure>

Usage

To show an AVIF or a jpg automatically - both image files need to be in the same location. The AVIF file must have the extension avif.

The syntax for the shortcode is:

{{<
  figure_avif
  image="image_file.jpg"
  alt="Alternate text if the image is not displayed" 
  caption="Optional caption under the picture" 
  class="imagealigncenter" 
  width=100
>}}

• class [optional] can be:
  • imagealignleft
  • imagealigncenter
  • imagealignright
• width and height [optional] can be
  • A number of pixels width=100
  • A percentage - width=75%

If the width is 100% then the class aligns the caption and the image takes up the full width of the page.

Changes to the Mainroad theme

Additional CSS

I’ve added a few new styles to the theme default style.css. These help the new figure_avi shortcode work.

.content .imagealigncenter {
	text-align: center;
}

.content .imagealignleft {
	text-align: left;
}

.content .imagealignright {
	text-align: right;
}

Changes to summary.html Layout

I changed h3 tags around post headings into h1. Before the post titles were too small compared to the summary heading. Now they look more like posts.