Add images.Overlay filter

[onedrawingperday]

A while back I opened this topic in the forum.

This is a missing feature that causes me grief again and again.
So I decided to post in the GitHub issues tracker hoping that perhaps someone someday might look into it.

Use case: Square product thumbnails need to be generated from portrait product photos.

Current situation: If one uses for example {{- $thumb := ($original.Resize "1080x1080").RelPermalink }} they will end up with a distorted image since .Resize does exactly as told without any concept of respecting the aspect ratio. Similarly if one were to use {{- $thumb := ($original.Fit "1080x1080").RelPermalink }} they would end up with an image that respects the original aspect ratio but is not square.

I have sort of forgotten As far as I can tell the library that Hugo uses for image processing is https://github.com/disintegration/imaging/ if you think that this issue does not belong here, let me know and I will open an issue upstream.

[bep]

{{- $thumb := ($original.Fit "1080x1080").RelPermalink }} they would end up with an image that respects the original aspect ratio but is not square.

What about .Fill?

[onedrawingperday]

What about .Fill?

Unfortunately it crops the image with Smartcrop.

I will post all of the things I've tried for your reference:

1. {{- $thumb := ($original.Fill "1080x1080").RelPermalink }}
   

2. {{- $thumb := ($original.Resize "1080x1080").RelPermalink }}
   

3. {{- $thumb := ($original.Fit "1080x1080").RelPermalink }}
   

[bep]

Unfortunately it crops the image with Smartcrop.

Sure, but that is an option -- you can put the anchor for the crop wherever you want.

[onedrawingperday]

Valid values are Smart, Center, TopLeft, Top, TopRight, Left, Right, BottomLeft, Bottom, BottomRight

I am afraid that I do not follow.

If I do {{- $thumb := ($original.Fill "1080x1080 center").RelPermalink }} I end up with:

With {{- $thumb := ($original.Fill "1080x1080 top").RelPermalink }} I end up with:

And so on for the other anchors.

My desired output would be:

As far as I can tell there is no way to add whitespace on the left and on the right of the original portrait image to make it square.

[bep]

OK, I understand. I thought your main point was to get it ... square.

If you don't want to crop it, why not use Fit and make it square in CSS (e.g. center it in a square div)?

[onedrawingperday]

I am trying to generate a CSV Output Format with Hugo, so that it can be used by Facebook/Instagram to auto-update a product catalog.

The square format product photo is a requirement.

Oh well never mind... 🙄

I’ll just carry on running imageMagick to add the whitespace after generating a thumb with Hugo’s .Fit method -even though it turned out being a nightmare to maintain-.

[bep]

Thinking about this, I think this fits better in the .Overlay method we discussed earlier. That has several use cases. of course (one being adding text to images?), but I imagine you could do something ala:

{{ $img := $someImage | $whiteSquare.Overlay }}

I'm not totally sure I got the order of the arguments right in the above, but the concept should be clear?

It was discussed here #4595

[bep]

I will add a PR with a new Overlay filter function that you can test out later today... I think it will work great and have lots of other use cases.

[onedrawingperday]

As I understand it the .Overlay method in the Disintegration Doc and the related OverlayCenter a user can define a background image in the desired dimensions and use another image to overlay it on top.

For example in my use case something like:

{{/* whiteSquare.jpg is a white background 1080x1080px fetched as a .Resource */}}
{{ $whiteSquare := resources.Get "/whiteSquare.jpg" }}
{{- $thumb := ($original.Fit "1080x1080").RelPermalink | $whiteSquare.Overlay }}

Would do the job nicely.

Looking forward to your Pull Request. I will test it as soon as possible.

[github-actions]

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.