AVIF files are images available to be shown on the web, made using the AV1 codec. They offer superiour compression and quality when compared with jpeg files and can be a good choice for display ’nice-looking’ pictures on your site.
In this post we look at how you can start using them with Hugo. We originally made the avif files using Gimp, but there are online converters available.
To begin with, this is how we define the images we want to use for the blog post. We specify both a feature image, and a 2x image.
1
2
3
4
5
6
---title:"Blog Post Feature Images as AVIF (with JPEG Fallback)"url:/add-avif-feature-image/featured_image:/img/2020/hugos-parachute.jpgretina_image:/img/2020/hugos-parachute@2x.jpg---
single.html
Within your theme, you can then use the <picture> element to display avif images - if the browser supports it - or fallback to jpeg. Because we’re going to be rolling this feature out slowly, some posts might not have avif files for them so we check to make sure the file is available first.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
{{ if .Params.featured_image }}
<divclass="banner-image"><picture> {{ if fileExists (replace .Params.featured_image "jpg" "avif") }}
<sourcetype="image/avif"srcset="{{ replace .Params.featured_image "jpg""avif"}},{{replace.Params.retina_image"jpg""avif"}}2x"width="800"height="150"alt="{{ .Title }}"> {{ end }}
<imgsrc="{{ .Params.featured_image }}"srcset="{{ .Params.featured_image }} 1x, {{ .Params.retina_image }} 2x"width="800"height="150"alt="{{ .Title }}"></picture></div>{{ end }}
In our picture tag, we’re also assuming that the avif file has the same name as the jpeg fallback - as all we do is replace the file extension in the name.
Edd is a PHP and Go developer who enjoys blogging about his experiences, mostly about creating and coding new things he's working on and is a big beliver in open-source and Linux.
Using Parameters in Your Theme
–
In Hugo, you can access the parameters specified in the front matter of your content files (e.g., Markdown files) through your Hugo templates. These are called ‘Page-level Params’. This post explores how you can use these within your theme.
We’ll be using an example of featured_image added our post below.
1 2 3 4 5 --- title: "My Post" date: 2023-06-01 featured_image: "/img/2022/goldie1.jpg" --- You can then use this parameter when editing your theme using the template tag shown below:
Using Emoji In Posts & Themes
–
Emojis have been named word of the year and are seen every day in modern culture. We use them every day on our messaging apps, emails and … err blogs!
This post is about how you can enable and use them in both your Hugo themes and, in general, when writing posts.
Using Emojis in Themes To use them within your theme, there’s a built in function which turns text in emojis.
Shortcode: Add a Retina Image to Posts
–
In this shortcode post, we show you how to conveniently insert a retina screen ready image into your page - while still writing your posts in markdown. This means you won’t have to resort to putting raw html in your posts.
