Deth

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
34
type={{ $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

41
srcset="{{- 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 -}}"
61
height = "{{- $src.Height -}}"
62
{{- end -}}
63
{{- end -}}
64
{{- if $Alt }}
65
alt=" {{- $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 -}}