hugo icon indicating copy to clipboard operation
hugo copied to clipboard

Add transparency option to images.Overlay

Open gytisrepecka opened this issue 3 years ago • 6 comments

Image watermarking was introduced with v0.80.0 and can be used calling Images.Overlay function. It is nice, however, to make watermark (logo that is overlayed on top of original image) less intrusive, it makes sense to set transparency (alpha channel) value like this (bottom-right logo has Alpha value 70 out of 100):

Watermarked image

I have implemented image watermarking using standard Go image library, so it would not be difficult to add Alpha setting to Images.Overlay. Default parameter could be 100 (overlayed image is not transparent at all), but when correct number specified, it could get transparent at specified rate.

Would this be something community would find useful to be added to image processing?

Related issues: #4595, #8057.

gytisrepecka avatar Dec 08 '21 08:12 gytisrepecka

I would welcome such a change.

A note to others looking at this issue: The Overlay function does support Alpha channel today, so if you overlay an image with transparency, that is preserved (which I guess is good enough for most watermarking situations -- it's not hard to edit 1 image by hand).

bep avatar Dec 08 '21 08:12 bep

I would welcome such a change.

A note to others looking at this issue: The Overlay function does support Alpha channel today, so if you overlay an image with transparency, that is preserved (which I guess is good enough for most watermarking situations -- it's not hard to edit 1 image by hand).

Would be cool to have an ability to set a level of transparency in shortcode parameter as bright images might look better with watermark having smaller visibility value while darker images might require 90-100% of watermark visibility.

I will make a Pull Request with this modificiation 🤓 Is it better to modify Overlay filter or create a separate one?

gytisrepecka avatar Jan 20 '22 14:01 gytisrepecka

Is it better to modify Overlay filter or create a separate one?

Add an option. Call it opacity (which is what PhotoShop uses), 0-100%.

bep avatar Jan 20 '22 14:01 bep

Because current Overlay filter is implemented specifically for usage with gift library, there is really no good way to implement opacity setting to overlayed image rather than modifying disintegration/gift library itself so that it would use DrawMask like I did and would support opacity as additional attribute to it's DrawAt options.

However, it doesn't seem like disintegration/gift is maintained anymore.

So my idea is to tidy up code.gyt.is/webimg so that it would support image objects (instead of file paths) and create it as stand-alone filter. Watermark perhaps? Or that looks redundant from Hugo filters point-of-view?

gytisrepecka avatar Jul 20 '22 13:07 gytisrepecka

However, it doesn't seem like disintegration/gift is maintained anymore.

Not sure what you mean by that; it has 2 open issues 0 open PRs.

A general comment to this is that for a transparency option to be considered in Hugo, it needs to be small/simple. Adding another third-party image library does most likely not fall into that category.

bep avatar Jul 20 '22 13:07 bep

Well, the library hasn't been updated in almost 2 years, but I'll see if contributing to it makes sense.

Thanks, I think considering current Overlay filter implementation, adding opacity should not be a part of Hugo and the issue can be closed.

gytisrepecka avatar Jul 20 '22 14:07 gytisrepecka

Superseded by https://github.com/gohugoio/hugo/issues/11471

jmooring avatar Sep 20 '23 15:09 jmooring

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

github-actions[bot] avatar Oct 12 '23 01:10 github-actions[bot]