Image Processing Leaf Bundle

Tagged in:
• hugo
• image processing

So trying to get the image processing working. This usually means keeping images in the /assets/ directory or as a page resource in the same folder as a leaf bundle (which is what I’m trying here.)

Processed images

The processed images have ended up in /resources/_gen/images/ and there were 23 images in total. This is the default.

These images are not “Hugo fast” to generate, but once generated they can be reused.

Hugo docs

To get rid of the excess: hugo --gc. The gc stands for garbage collection. When I did this the number of images was reduced to 6.

Adding an image in Markdown

If your image is part of a page bundle then all you neeed is: ![webp image of a girl](girl.webp)

Using Photoshop

Since much of the time images will be first processed in Photoshop (to edit and convert from RAW/PSD to jpg) it’s possible to export multiple files in one go at different sizes and using a naming convention.

A shortcode could be created incorporating this naming convention into a <picture> element (see below).

The <picture> element

According to W3 Schools:

The element contains two tags: one or more tags and one tag.

The browser will look for the first element where the media query matches the current viewport width, and then it will display the proper image (specified in the srcset attribute). The element is required as the last child of the element, as a fallback option if none of the source tags matches.

The element works “similar” to

W3 Schools

The example code they use is:

1 <picture>
2  <source media="(min-width:650px)" srcset="img_pink_flowers.jpg">
3  <source media="(min-width:465px)" srcset="img_white_flower.jpg">
4  <img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
5</picture>

srcset Without the Picture Element

You don’t need <picture> to use the attribute srcset. Here it is used just using the <img> tag:

1<img src="img/cat-500.jpg"
2    srcset="img/cat-500.jpg,
3            img/cat-1000.jpg 2x,
4            img/cat-1500.jpg 3x"
5    alt="pet cat">

This says use the 500px image normally but on a 2x device use the 1000px one and on a 3x device use the 1500px one.

You can also choose instead of device type the width of the image. That is how many pixels it will be when rendered. This assumes the image width is assigned a percentage value.

1<img src="img/cat-500.jpg"
2    srcset="img/cat-500.jpg 500w,
3            img/cat-1000.jpg 1000w,
4            img/cat-1500.jpg 1500w"
5    alt="pet cat">

(NB. When testing in dev tools it might be handy to disable the cache in the Network tab. Otherwise it will keep the highest pixel version.)

Retina and other mobile screens

In the old days a pixel in css, eg. width: 320px;, meant exactly that. But with the extremely high density of pixel per inch on modern mobile screens that would have rendered something tiny. So with retina screens, aka 2x, this was multiplied by 2. If CSS said 1px that would be rendered as 2px x 2px square, ie. 4px. There are now 3x screens as well. These render a single pixel as 3 x 3 or 9 pixels altogether.

In Chrome dev tools when in responsive mode you can change the DPR (density pixel ratio). To do this you will probably first need to click the 3 vertical dots drop down.

Getting an image from the Assets folder

In Hugo images must be either in the assets folder or part of a leaf branch.

From the assets folder the following works… ?

Nils Code that works

This code is from Nils Norman Haukås

 1{{ $altText := .Get "alt"}}
 2{{ $caption := .Get "caption"}}
 3{{ with $.Page.Resources.GetMatch (.Get "name") }}
 4  <figure>
 5    <a href="{{.RelPermalink}}">
 6      <img
 7        srcset="
 8          {{ (.Resize "320x").RelPermalink }} 320w,
 9          {{ (.Resize "600x").RelPermalink }} 600w,
10          {{ (.Resize "1200x").RelPermalink }} 2x"
11        src="{{ (.Resize "600x").RelPermalink }}" alt="{{$altText}}"/>
12    </a>
13    <figcaption><p>{{ $caption }}</p></figcaption>
14  </figure>
15{{ else }}
16  could not find image
17{{ end }}

Bep’s shortcode example

Here is an example posted by Bep on the Hugo forum:

 1{{- $img := .Page.Resources.GetMatch .Destination -}}
 2
 3{{- if and (not $img) .Page.File -}}
 4    {{ $path := path.Join .Page.File.Dir .Destination }}
 5    {{- $img = resources.Get $path -}}
 6{{- end -}}
 7
 8
 9{{- with $img -}}
10    {{- $large := $img.Resize "1200x" -}}
11    {{ $medium := $large.Fill "726x402" -}}
12    {{ $small := $medium.Fill "458x254" -}}
13    <figure class="image-caption">
14        <img alt="{{ $.Text }}" srcset="
15            {{ $small.RelPermalink }} 458w,
16            {{ $medium.RelPermalink }} 726w,
17            {{ $large.RelPermalink }} 1200w" sizes="50vw" src="{{ $small.RelPermalink }}" />
18        <figcaption>{{ with $.Title | safeHTML }}{{ . }}{{ end }}</figcaption>
19    </figure>
20{{- else -}}
21    <img src="{{ .Destination | safeURL }}" alt="{{ $.Text }}" />
22
23{{- end -}}

Using files from /static/

Hugo cannot process files directly from the static folder since by definition that folder is not processed.

However you can mount that folder using 3 simple lines of code in the config file:

1[[module.mounts]]
2  source = "static/images"
3  target = "assets/images"

Check out the rules of module mounts in the docs.

• ◀ Previous
• Next ▶