Idea/wish for the image functions

feature
1

I have a small business card website that I built with hugo.

As part of that I built a twitter card where I try to replicate the layout I have using the overlay function. Now I have a question, is it in any way possible to make the image a circle before putting it on the other image as an overlay:

Image currently generated:

From these two images:

Basically I would like to have my face be in a round picture. I’m pretty sure you can’t do it as of today, not sure how easy it would be to implement.

2

Yeah… In regards to black boxes this one is as black as it gets :wink:

How do you create the Twitter Card Image? If via headless browser and screenshot then use border-radius: imagewidth px; and it’s going round. If not, then post how you create the image. And have a look at how to create article images via headless browsers and screenshots (in the headless browser).

(Check the link to Ryan Filler in that article.)

PS: It appears you might do the overlay image via Hugos overlay image processing function. That one is more or less for adding a timestamp or logo to your images. Prepare your headshot manually as circle and save it with transparency in the background. Then it’s round. Hugo does not round (yet. and it does not seem too important when you look at all the open tickets :wink: )

3

What you want currently not possible. It should not be hard to implement something like that (images.Round…?) …

An added note: The overlay function respects alpha channels, so if your headshot had been rounded before you put it in, that would work.

1 Like
4

Yes, I figured out as much. But I just think it‘s really cool that I can drop in a large image and it crops on my face using smartcrop… But I tend to agree with @davidsneighbour that I‘m asking a bit much of the overlay function

5

@olikami I can confirm this works perfectly if you use a png with transparency.

{{- $logoOverlay  := "" -}}
{{- with .overlay -}}
	{{- $imgOverlay := (resources.Get .) -}}
	{{- $imgOverlay = $imgOverlay.Resize "x90" -}}
	{{- $logoOverlay = (images.Overlay $imgOverlay 10 10 ) -}}
{{- end -}}

and use $logoOverlay as filter.

Result : https://www.cocoon-arolla.com/images/portfolio/cocoon/cocoon-2021-4_hu2cb312d18bec5ceef265bf6c66879cce_26001_27624797fe2627170ea43df4b3289468.jpg

6

I use the following code to create the twitter image:

{{ $logoFilter := (images.Overlay ($portrait.Fill "500x500") 750 250 ) }}
{{ $img := ($background.Fill "2000x1000") | images.Filter (images.Brightness -10) (images.GaussianBlur 10) $logoFilter }}