Hugo has the option of integrating images into posts, unfortunately only with the restriction that these are integrated 1:1 without adjusting the size.

![Image alt](image-name.png)

This is where shortcodes comes into play.

adding shortcode

Hugo’s shortcodes are usually located in the layouts/shortcodes/ subdirectory, whereby the name of the file is used as a handle for the shortcode.

If the name of the shortcode should be imageresize, the file layouts/shortcodes/imageresize.html must be created

{{ $original := .Page.Resources.GetMatch (.Get 0) }}
{{ $options := .Get 1 }}
{{ .Scratch.Set "image" ($original.Fit $options) }}
{{ $image := .Scratch.Get "image" }}
{{ $title := .Get 2 }}
<img src="{{ $image.RelPermalink }}" width="{{ $image.Width }}" height="{{ $image.Height }}" alt="{{ $title }}">

usage

The use of folders is recommended so that the images can be managed together with the posting.

If we now assume that we want to publish a “little image test” post in which the image picture.png is embedded in the size 50px x 50px…

First create the corresponding folder

mkdir content/posts/little-image-test/

The corresponding images (in our example picture.png) can now be stored in this folder. The actual posting is created as index.md.

---
title: 'little image test'
date: 2024-03-21T19:31:15+01:00
---
Let's start with the full sized image (288px x 288px)

![Image alt](picture.png)

And here comes the resized picture (50px x 50px)

{{ < imageresize picture.png "50x50" "Image alt" >}}

Now let’s test it here… first comes the original image (288pxx288px)

Image alt

and here is the resized version (50pxx50px)

Image alt