Switched My Image Processing Shortcode To A Render Hook

Yesterday was browsing through the Hugo release notes and saw render hooks mentioned. I have seen it before, but never really looked into it. I looked it up in the documentation, which isn’t all that great for Hugo. The one knock I have against the program. It just works, though.

It turns out that I can and did modify my short code a bit to turn it into a render hook. I lost the ability to do some things that could have been done with the figure short code, but I didn’t use them at all, so it’s a moot point. It wasn’t too difficult to get it up and working. The more time-consuming part was to convert the short code calls back to normal markdown.

 ![Alt](/images/image.jpg "Title")

I really did this thinking that it would make things more future-proof. If a different tool comes along that I want to try to build my site with, it is closer to plain markdown now. That leaves me one less step to take just to get it up and running. I really like Hugo, but Zola has intrigued me for a while, and the short code thing is one reason I never really tried it. I think the template languages for Zola might be a bit better for me to work with. Maybe someday I’ll try it.

I’ve been using Hugo for over four years now I think and haven’t really come across anything that I wish it could do. It’s still a good idea to have an open mind and try new things.

Here is what I have for the template. It’s based off some snippets I’ve seen and changed over time.

 1{{- $image :=( .Destination | safeURL ) -}}
 2{{- $src := resources.Get ( printf "%s" $image ) -}}
 3{{- $ColorStyle := "" -}}
 4{{- $MediaType := "" -}}
 5{{- $File := strings.TrimLeft "images/" $src -}}
 6{{- $Permalink := "" -}}
 7{{- $Small := "" -}}
 8{{- $Medium := "" -}}
 9{{- $Large := "" -}}
10{{- $Giant := "" -}}
11{{ $Rotate := "" }}
12{{ $Quality:= "q90" }}
13{{- $Alt := .Text -}}
14{{- $Title := .Title -}}
15{{- with $src -}}
16{{- if hugo.IsProduction -}}
17{{- $TheColors := .Colors -}}
18{{- $TheColors = delimit ($TheColors) ", " -}}
19{{- $ColorStyle = print "background: linear-gradient(" $TheColors "); background-size: cover; background-repeat: no-repeat;" -}}
20{{- end -}}
21{{ $Permalink = .Permalink }}
22{{- $MediaType = .MediaType -}}
23
24{{- with .Exif -}}
25{{- if eq .tags.Orientation 6 -}}{{- $Rotate = "r270" -}} {{- end -}}
26{{- if eq .tags.Orientation 3 -}}{{- $Rotate = "r180" -}} {{- end -}}
27{{- if eq .tags.Orientation 8 -}}{{- $Rotate = "r90" -}} {{- end -}}
28{{- if eq .tags.Orientation 0 -}}{{- $Rotate := "" -}}{{- end -}}
29{{ end }}
30<figure>
31<a href="{{- $Permalink -}} " title = "View Full sized Picture">
32<picture style="{{- safeCSS $ColorStyle -}}">
33<source
34type={{ $MediaType }}
35{{ if $src}}sizes="(min-width: 500px) 480px,
36(min-width: 500px) 500px,
37(min-width: 900px) 800px,
38(min-width: 1300px) 1200px,
39(min-width: 1500px) 1600px, 100vw"
40
41srcset="{{- if ge $src.Width "1500" -}}
42{{- $Name := printf "%s%s%s" "/images/" "Giant" $File -}}
43{{- $Giant := ($src.Resize (printf "%s %s %s" $Rotate $Quality "1500x") ) | resources.Copy $Name -}}
44{{ $Giant.Permalink}} 1500w,{{- end -}}
45{{ if ge $src.Width "1200" }}
46{{- $Name := printf "%s%s%s" "/images/" "Large" $File -}}
47{{ $Large = ($src.Resize (printf "%s %s %s" $Rotate $Quality "1200x") ) | resources.Copy $Name }}
48{{$Large.Permalink}} 1200w,{{- end -}}
49{{if ge $src.Width "800" }}
50{{- $Name := printf "%s%s%s" "/images/" "Medium" $File -}}
51{{ $Medium = ($src.Resize (printf "%s %s %s" $Rotate $Quality "800x")) | resources.Copy $Name }}
52{{ $Medium.Permalink }} 800w,{{- end -}}
53{{ if ge $src.Width "480" }}
54{{- $Name := printf "%s%s%s" "/images/" "Small" $File -}}
55{{ $Small = ($src.Resize (printf "%s %s %s" $Rotate $Quality "480x")) | resources.Copy $Name }}
56{{ $Small.Permalink}} 480w{{- end -}}">
57<img src={{- if ge $src.Width "800" -}}
58
59"{{- $Medium.Permalink -}}" width = "{{- $Medium.Width -}}" height = "{{- $Medium.Height -}}"
60{{- else }}"{{- $Permalink -}}" width = "{{- $src.Width -}}"
61height = "{{- $src.Height -}}"
62{{- end -}}
63{{- end -}}
64{{- if $Alt }}
65alt=" {{- $Alt -}}"
66{{- end -}}
67
68><!-- Closing img tag -->
69</picture></a>
70<figcaption>
71{{ with $Title -}}
72<h4>{{ . }}</h4>
73{{- end -}}
74
75</figcaption>
76</figure>
77{{ else }}
78{{- warnf "%s%s%s%s" "No image file found at " ( $image ) " error in " page.File.Path -}}
79{{- printf "%s%s%s%s" "Can't find " ( $image) " error in " page.File.Path -}}
80{{- end -}}