Add an Overlay to all images in leaf- and page-bundles

support
1

Hi, I have now set up my website with Hugo, and would like all images to be provided with a watermark overlay. The photos are all in image subdirectories in the respective page-bundles, and in the root directory of the leaf bundles. I have understood that I have to create a render-image.html in /layouts/_default/_markup/, to establish a render-image hook. But I have no idea how to proceed from there, although I have looked at:

I am (as always) thankful for any help… thanks

2

When you say “all images”, do you mean all images, or only those images that you include via markdown image elements, e.g.

![alt](src "title")
3

I want to process all the images in all the folders, for example:

/leaf-bundle/
/leaf-bundle/_index.md <- Lightbox-Shortcode here
/leaf-bundle/image1.jpg
/leaf-bundle/image2.jpg
/leaf-bundle/image3.jpg
/leaf-bundle/
/leaf-bundle/page-bundle/index.md <- Lightbox-Shortcode here
/leaf-bundle/page-bundle/images/image4.jpg
/leaf-bundle/page-bundle/images/image5.jpg
/leaf-bundle/page-bundle/images/image6.jpg

Of course, I have tons of Leaf and Page bundles with hundreds of images.

They are usually called with a selfmade lightbox Shortcode, like so:

{{- $folder := "" -}}
{{- $showImageNr := 0 -}}

{{- $counter := 0 -}}

{{- if .IsNamedParams -}}
  {{- $folder = .Get "folder" | default "images/*"  -}}
  {{- $showImageNr = .Get "showImageNr" | default 0  -}}
{{- else -}}
  {{ errorf "No Named Parameters provided!" }}
{{- end -}}

<div class="row d-flex justify-content-center pb-4" style="position: relative;">

    {{ $images := .Page.Resources.Match $folder }}

    {{ range $index, $image := $images }}
    <a data-fslightbox="gallery" href="{{ .Permalink }}" title="Image Gallery. Klick to open Lightbox.">
      <div {{ if ne $counter $showImageNr }} class="d-none" {{ end }} style="position:relative; box-sizing:border-box;">
        <img src="/images/stack.svg" class="opacity-50" style="width: 2rem; height: 2rem; position: absolute!important; top: 1rem; right: 1rem; filter: invert(1) grayscale(100);">
        <img src="{{ .RelPermalink }}" class="d-block w-100 img-fluid" alt="Slide {{ add $index 1}}">
      </div>
    </a>

    {{ $counter = add $counter 1 }}

    {{ end }}

</div>

Only one image is displayed, the others are hidden and are displayed in the FSLightbox. The Lightbox is used in Leaf- and Page-Bundles.

4

This article might be helpful.

Since you’re rendering the images via a shortcode, the render hook is irrelevant.

1 Like
5

Ive modified my code with the example, but I get an

execute of template failed at <$image.Filter>: error calling Filter: this method is only available for image resources

at this point

{{ with $bi.Filter (images.Overlay $oi 67 42) }}

the overlay is in the /assets/images/ folder. The original code runs without problems, i.e. all images are there. What could be the reason for this?

    {{ $images := .Page.Resources.Match $folder }}
    {{ range $index, $image := $images }}
    <a data-fslightbox="gallery{{$galleryID}}" href="{{ .Permalink }}" title="Image Gallery. Klick to open Lightbox.">
      <div {{ if ne $counter $showImageNr }} class="d-none" {{ end }} style="position:relative; box-sizing:border-box;">
        <img src="/images/stack.svg" class="opacity-50" style="width: 2rem; height: 2rem; position: absolute!important; top: 1rem; right: 1rem; filter: invert(1) grayscale(100);">

        {{ with $bi := $image }}
          {{ with $oi := resources.Get "/images/overlay.png" }} {{/* in assets */}}
            {{ with $bi.Filter (images.Overlay $oi 67 42) }}
              <img src="{{ .RelPermalink }}" class="d-block w-100 img-fluid" alt="Slide {{ add $index 1}}">
            {{ end }}
          {{ end }}
        {{ end }}
      </div>
    </a>

    {{ $counter = add $counter 1 }}

    {{ end }}
6

First off, I’d move this
with $oi := resources.Get "/images/overlay.png"
outside of the range – since you’re using always the same overlay.png, there’s little point in re-getting it in every iteration.
Second, are you sure that with $oi := … is valid syntax (and does it make sense to use with here? What I’d suggest is something like this:

{{ $oi := resources.Get "/images/overlay.png" }}
{{ $filter := images.Overlay $oi 67 42 }}
{{ range $image := .Page.Resources.Match $folder }}
{{ with $image | images.Filter $filter}}
    <img src="{{ .RelPermalink }}" class="…" alt="…">
{{ end }}
{{end }}

That’s what I understood from the documentation on filter, I’ve never used it.

Aside: Hard-coding styles in HTML elements is not a good idea, CSS is a better place for that. And the alt attribute should describe the image so that people who can’t see it can get an idea what it might be. “Slide something” is completely meaningless in this context.