Image overlay with opacity and position centre

support
1

Hi there,

In my current Hugo page layout I am not able to work out how to make the overlay image opacity 40% and place it in the middle of the image.

# This get the watermark (an image used as overlay)
{{ $logo := resources.Get "/images/logo.jpeg"}} 

# This get the image over which the watermark is placed
{{ $imagesrc := resources.Get .Params.coverImage }} 

# These are some Hugo image processings to resize
{{ $img := $imagesrc.Resize "640x" }}
{{ $imgwebp := $imagesrc.Resize "640x webp" }} 

# This is where I got stuck (not able to understand how to place the image centre and resize automatically and add opacity)
{{ $logoFilter := (images.Overlay $logo 50 50 ) }} 
{{ $image := $img | images.Filter $logoFilter }}
{{ $imagewebp := $imgwebp | images.Filter $logoFilter }}

Thanks

Sidenote

If there is possibility that Hugo take an image and place multiple times smaller thumbnails with transparency that will also works great

2

I’d do this with CSS, where you have a lot more control over everything. And you’ll also easily find working examples with CSS.

1 Like
3

Hi @chrillek

the problem with css is that one can easily recover the image without the css (without the watermark) this is a strict requirement for me.

using Hugo image processing makes a hard image. and I have made it almost 90% work

Just wondering if instead of "50 50 " I can say “centre” and how to add opacity to the overlay image

Thanks

4

Hugo’s overlay filter does not support opacity (no apha channel).
https://github.com/gohugoio/hugo/issues/9257

1 Like
5

Hi @jmooring

I am confused now seems like @bep mention that

The Overlay function does support Alpha channel today

So does it support transparency or does it not?

Also can I use some other method which can sit in the current setup?

Thanks

6

It keeps, but does not alter. That’s why there’s an open issue/proposal.

1 Like
7

Hi @jmooring

If you know of an alternative that I can use to make It work until then?

Some sort of layout modification that you can suggest?

Thanks

8

Do you use the same overlay for everything, or does it vary? If it varies, how many overlay images would be in your collection?

9

Hi @jmooring

Yes same for all images in section “agents” list and single pages

I made the above almost working example using your directions from another post. Thanks

10

Add transparency to the overlay outside of Hugo (e.g., Photoshop, ImageMagick, etc.).

1 Like
11

Hi @jmooring

This make sense, even if I was hoping to do it with Hugo.

What about the image position does Hugo support positions such as “top right” instead of

thanks

12

You’ll need to do the math yourself.

13

Hi @jmooring

It is imposible to add a static value because images are different height so even if I resize all images to 720x the height will not always be same as images are in different orientations.

is it possible the x y value which start from top left start this calculation from bottom right?

so I can place a text overlay on the bottom right of each image?

Thanks

14

Bottom right x = imageWidth - overlayWidth
Bottom right y = imageHeight - overlayHeight

When you resize an image resource you get a resized image resource, which has .Height and .Width methods.

15

Hi @jmooring

your response is too high level please dumb it down a bit, I am not sure what you mean with this. I am familiar with the .height and .Width I use it to add the height=“” and width=“” to the image. But what you mean by the

and how can I implement what you describe in this code

thanks

16 
{{ $x : = sub $img.Width $logo.Width
{{ $y : = sub $img.Height $logo.Height
{{ $logoFilter := images.Overlay $logo $x $y }}

If I were you I would apply the overlay first, then resize and/or convert.

1 Like
17

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.