Dither images with render hook?

support
1

I use the following image render hook to add height, width and captions to images:

{{- $src := .Page.Resources.GetMatch (printf "%s" (.Destination | safeURL)) -}}
{{- if $src -}}
    {{- if .Title -}}
        <figure>
            <img src="{{ .Destination | safeURL }}" alt="{{ .Text }}" width="{{ $src.Width }}" height="{{ $src.Height }}" />
            <figcaption>
                <p>{{ .Title }}</p>
            </figcaption>
        </figure>
    {{- else -}}
        <img src="{{ .Destination | safeURL }}" alt="{{ .Text }}" width="{{ $src.Width }}" height="{{ $src.Height }}" />
    {{- end -}}
{{- else -}}
    {{- if .Title -}}
        <figure>
            <img src="{{ .Destination | safeURL }}" alt="{{ .Text }}" />
            <figcaption>
                <p>{{ .Title }}</p>
            </figcaption>
        </figure>
    {{- else -}}
        <img src="{{ .Destination | safeURL }}" alt="{{ .Text }}" />
    {{- end -}}
{{- end -}}

I would like to integrate the new Dither filter to make all the images on my website dithered. I don’t quite know how to make filters and such work inside of a render hook, how would I go about that?

2
3

I had already read the documentation, but I’m still clueless as to how to implement this feature in a render hook.

4 
{{ with .Page.Resources.Get .Destination }}
        {{ with . | images.Filter images.Dither }}
            <img src="{{ .RelPermalink }}">
        {{ end }}
    {{ end }}

You need to get the image object and then apply Dither.

5 
{{ $opts := dict "colors" (slice "222" "808080" "ddd") }}
{{ $filters := slice
    (images.Process "resize 800x")
    (images.Grayscale)
    (images.Dither $opts)
    (images.Process "jpg")
}}
{{ with .Page.Resources.Get .Destination }}
    {{ with . | images.Filter $filters }}
        {{- if .Title -}}
            <figure>
                <img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}" />
                <figcaption>
                    <p>{{ .Title }}</p>
                </figcaption>
            </figure>
        {{- else -}}
            <img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}" />
        {{- end -}}
    {{ end }}
{{ end }}

The snippet above works for me, but instead of printing the caption given in the markdown file, it prints the relative image path. Also, if I try to add alt text with alt={{ .Text }} I get a “can’t evaluate field Text in type images.ImageResource” error.

6

You have a context problem. The dot (.) isn’t what you think it is when you call the Title or Text methods.

7

How should I go about referencing the two, then?

8

Search this forum for “The dot (.) and the dollar ($) in context”

9 
{{ $imgTitle := .Title }}

{{ with .Page.Resources.Get .Destination }}
    {{ with . | images.Filter images.Dither }}
        <img src="{{ .RelPermalink }}">
        {{ $imgTitle }}
    {{ end }}
{{ end }}

You can save the .Title or any other attributes provided by image render hook in a variable and then use it in the with loop. This way you can access render-hook variable inside the loop.

10

Or you can just use the $ to avoid initializing yet another variable.

11

That does it. Thank you very much for the help.

12