How to use Image Processing using a short code?

bep · September 18, 2020, 6:46pm

@bwintx we should come up with some canonical/best practice examples of doing these things … When I get some time … However, my lastest shot at something similar is this:

github.com

bep/portable-hugo-links/blob/master/layouts/_default/_markup/render-image.html

{{- $img := .Page.Resources.GetMatch .Destination -}}
{{- if and (not $img) .Page.File -}}
{{ $path := path.Join .Page.File.Dir .Destination }}
{{- $img = resources.Get $path -}}
{{- end -}}
{{- with $img -}}
{{- $large := $img.Resize "1200x" -}}
{{ $medium := $large.Fill "726x402" -}}
{{ $small := $medium.Fill "458x254" -}}
<figure class="image-caption">
    <img alt="{{ $.Text }}" srcset="
        {{ $small.RelPermalink }} 458w,
        {{ $medium.RelPermalink }} 726w,
        {{ $large.RelPermalink }} 1200w" sizes="50vw" src="{{ $small.RelPermalink }}" />
    <figcaption>{{ with $.Title | safeHTML }}{{ . }}{{ end }}</figcaption>
</figure>
{{- else -}}
<img src="{{ .Destination | safeURL }}" alt="{{ $.Text }}" />{{- end -}}

Note that for image resources that can be processed, the need to live either in a content bundle or inside /assets. But also note that you can mount any folder into /assets.

Topic		Replies	Views
How to use Image Processing from Hugo's example support	10	1214	August 26, 2021
Code inside Content Posts not working support	16	1258	June 19, 2023
Imgproc shortcode not working inside of content.md files support	3	1336	February 4, 2020
[SOLVED] Hugo cannot find image for processing support	3	1609	March 31, 2018
What is the current status of image processing in Hugo? support images	6	356	May 3, 2024

How to use Image Processing using a short code?

Related topics