Watermark my images

support
1

Hello :grinning:

What I am trying to do:
Building my first blog using the ananke theme.
I want all my images to be watermarked( inlcuding featured images) either by text or logo.

My idea:
Using Image Processing. So I placed my images in a global resource: the assets directory. Now I want to apply a image filter.

My problem:
It is my understading that I now have to create a new shortcode as shown in this exampleand import it into all my markdown files? Or do I have to overwrite something else inside the _default folder?

Thank you for helping me!

explorer_hugo
explorer_hugo242×799 37.1 KB

1 Like
2

I would recommend that you look at:

1.) The different ways to organise your images: 1. Put content related images inside bundles in /content, 2. Other images that you want to process in /assets and 3. Static images with ho need for processing in /static
2.) You probably would want to to just use regular markdown to include your images, and then load them and watermark them in a render hook.

2 Likes
3

Thank you for your fast answer.

I have reorganized my content/post into page bundle.

I use this

<p class="md__image">   
                    <img src="{{ .Destination | safeURL }}" alt="{{ .Text }}" {{ with .Title}} title="{{ . }}"{{ end }} />   
  </p>

as render-image.html and use it so: ![Text](images/lab_pic.jpg "Hello what's up") in my post/first-post/index.md

It works so when I hover over the picture there is an title.

I still don’t know where to apply the code for my filter

{{ $logo := resources.Get "/images/watermark.png"}}
{{ $img := resources.Get "images/lab_pic.jpg"}}
{{ $logoFilter := (images.Overlay $logo 50 50 ) }}   
{{ $img := $img | images.Filter $logoFilter }}

I would guess in the render hook(render-image.html) somewhere.