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.

 ```go,linenos,name=render-image.html
 {{- $image :=( .Destination | safeURL ) -}}
{{- $src := resources.Get ( printf "%s" $image ) -}}
{{- $ColorStyle := "" -}}
{{- $MediaType := "" -}}
{{- $File := strings.TrimLeft "images/" $src -}}
{{- $Permalink := "" -}}
{{- $Small := "" -}}
{{- $Medium := "" -}}
{{- $Large := "" -}}
{{- $Giant := "" -}}
{{ $Rotate := "" }}
{{ $Quality:= "q90" }}
{{- $Alt := .Text -}}
{{- $Title := .Title -}}
{{- with $src -}}
{{- if hugo.IsProduction -}}
 {{- $TheColors := .Colors -}}
 {{- $TheColors = delimit ($TheColors) ", " -}}
 {{- $ColorStyle = print "background: linear-gradient(" $TheColors "); background-size: cover; background-repeat: no-repeat;" -}}
{{- end -}}
{{ $Permalink = .Permalink }}
{{- $MediaType = .MediaType -}}

{{- with .Exif -}}
{{- if eq .tags.Orientation 6 -}}{{- $Rotate = "r270" -}} {{- end -}}
{{- if eq .tags.Orientation 3 -}}{{- $Rotate = "r180" -}} {{- end -}}
{{- if eq .tags.Orientation 8 -}}{{- $Rotate = "r90" -}} {{- end -}}
{{- if eq .tags.Orientation 0 -}}{{- $Rotate := "" -}}{{- end -}}
{{ end }}
<figure>
 <a href="{{- $Permalink -}} " title = "View Full sized Picture">
 <picture style="{{- safeCSS $ColorStyle -}}">
 <source
 type={{ $MediaType }}
 {{ if $src}}sizes="(min-width: 500px) 480px,
 (min-width: 500px) 500px,
 (min-width: 900px) 800px,
 (min-width: 1300px) 1200px,
 (min-width: 1500px) 1600px, 100vw"

 srcset="{{- if ge $src.Width "1500" -}}
 {{- $Name := printf "%s%s%s" "/images/" "Giant" $File -}}
 {{- $Giant := ($src.Resize (printf "%s %s %s" $Rotate $Quality "1500x") ) | resources.Copy $Name -}}
 {{ $Giant.Permalink}} 1500w,{{- end -}}
 {{ if ge $src.Width "1200" }}
 {{- $Name := printf "%s%s%s" "/images/" "Large" $File -}}
 {{ $Large = ($src.Resize (printf "%s %s %s" $Rotate $Quality "1200x") ) | resources.Copy $Name }}
 {{$Large.Permalink}} 1200w,{{- end -}}
 {{if ge $src.Width "800" }}
 {{- $Name := printf "%s%s%s" "/images/" "Medium" $File -}}
 {{ $Medium = ($src.Resize (printf "%s %s %s" $Rotate $Quality "800x")) | resources.Copy $Name }}
 {{ $Medium.Permalink }} 800w,{{- end -}}
 {{ if ge $src.Width "480" }}
 {{- $Name := printf "%s%s%s" "/images/" "Small" $File -}}
 {{ $Small = ($src.Resize (printf "%s %s %s" $Rotate $Quality "480x")) | resources.Copy $Name }}
 {{ $Small.Permalink}} 480w{{- end -}}">
 <img src={{- if ge $src.Width "800" -}}

 "{{- $Medium.Permalink -}}" width = "{{- $Medium.Width -}}" height = "{{- $Medium.Height -}}"
 {{- else }}"{{- $Permalink -}}" width = "{{- $src.Width -}}"
 height = "{{- $src.Height -}}"
 {{- end -}}
 {{- end -}}
 {{- if $Alt }}
 alt=" {{- $Alt -}}"
 {{- end -}}

 ><!-- Closing img tag -->
 </picture></a>
 <figcaption>
 {{ with $Title -}}
 <h4>{{ . }}</h4>
 {{- end -}}

 </figcaption>
 </figure>
{{ else }}
{{- warnf "%s%s%s%s" "No image file found at " ( $image ) " error in " page.File.Path -}}
{{- printf "%s%s%s%s" "Can't find " ( $image) " error in " page.File.Path -}}
{{- end -}}```