Image Block: Add "circle" style

[melchoyce]

Is your feature request related to a problem? Please describe.
I keep running into cases where I'm combining image, heading, and paragraph blocks to make "teams" and "testimonials" and "endorsements" and whatnot, but I want the images to all be circles instead of squares or rectangles. It would be good to add a "circle" style to all image blocks.

Describe alternatives you've considered
Using CSS to mask the images, but this is a pain.

[sarahmonster]

This would be super groovy.

Note that we can apply this style with CSS, but we'll probably also want to do some cropping in the case of images that aren't square, because whilst a circle image is pretty, an oval image is deeply ugly.

[jasmussen]

I tried a circle crop variation in https://github.com/WordPress/gutenberg/tree/try/circle-crop-variation because I agree, that is super groovy. Given the age of the branch, I obviously came up short, but hopefully it can serve as inspiration to someone more skilled than me. I recall the primary problem being to create a perfect square of an arbitrarily sized image (necessary for a perfect circle), yet still allow it to be resized using the ResizableBox component.

[jasmussen]

Idea that might enable this: surface object fit in the sidebar as something you can configure on per-image basis. When an image has object-fit: cover; applied, you can set the width and height to be the same, regardless of source dimensions. Combine that with a variation that simply sets the border-radius to 50% and you're good to go.

[phpbits]

If in any case anyone is looking for a solution right now, I've added "Circular" Styles on Cover and Image Block to EditorsKit plugin. Here's the link where you can download the free plugin : https://wordpress.org/plugins/block-options/ and here's the link to the preview alongside other available styles : https://twitter.com/phpbits/status/1145668037598539777

I've also used object-fit but settled with border-radius:9999px; instead of 50% to make it look better for none squared images. Thanks!

[jasmussen]

Thanks for sharing, @phpbits!

I've also used object-fit but settled with border-radius:9999px; instead of 50% to make it look better for none squared images. Thanks!

This is how that works in action:

That's actually a kind of creative solution. You avoid that nasty oval shape that you'd get with border-radius: 50%;, and you sidestep the situation where the resize handles need special work in order to fit a perfect square made from a non-square source image.

Would you mind if I took inspiration from your trick to submit a circle crop PR to Gutenberg itself? I'll give you props in the commit, of course!

[phpbits]

@jasmussen Sure thing! No problem here :) Here's my code on the block styles : https://github.com/phpbits/block-options/tree/master/src/extensions/block-styles . Let me know if you need anything and will be very happy to help out. Cheers!

[jasmussen]

That's awesome, thank you. I'll CC you on the PR.

[jasmussen]

Thanks again. Created a PR here: #16475

[jasmussen]

From @sarahmonster

Note that we can apply this style with CSS, but we'll probably also want to do some cropping in the case of images that aren't square, because whilst a circle image is pretty, an oval image is deeply ugly.

I fiercely agree. This is what blocked me from the other approach. However as I worked on this, I realized you can choose the image source from the block inspector and for example choose thumbnail which by default is square. Or you could make larger thumbnail presets that were also square and choose the crop there. What do you think about using that as the solution to square-from-rectangles?

[sarahmonster]

❤️❤️❤️

I would definitely be a fan of that approach. I think* (assumption, might be wrong) that users would expect, when selecting "circle" from block styles, the image to show up as a circle, regardless of the proportions of the originally uploaded image. As a user, I don't necessarily want to spend a lot of time fussing with proportions and worrying whether my crop is perfect or not—I just want it to work.

[jasmussen]

I think* (assumption, might be wrong) that users would expect, when selecting "circle" from block styles, the image to show up as a circle, regardless of the proportions of the originally uploaded image.

Do you think there is a rephrasing that would allow us to more or less accomplish the same?

Edit: such as "Rounded". Technically it would let you accomplish the same as is asked for in the ticket, just in a generic way.

[sarahmonster]

Is there maybe a use case for two different variants/behaviours entirely here?

Circle = crop image + turn it into a perfect circle (especially good for profiles and avatars)
Rounded corners = don't crop, but round the corners to [whatever degree]

This could be particularly nice if we then allowed the border-radius to be fine-tuned by the user—although I think that might be best left as a theme option, because I'd hate to see a site with 8px corners on one page and 10px corners on another.

[jasmussen]

I do very much agree on both accounts. The primary benefit of the "rounded" variation is that it uses existing UI (block switcher style variations), very simple CSS, and by choosing the source file from the block settings sidebar, you can choose which crop you'd like based on what WordPress created for you when you uploaded the file.

If we actually have to hard-crop when selecting the image, it's a much bigger undertaking. In the past I tried my very best to "soft crop", i.e. make the image be square using only CSS — but I just couldn't get that to work.

[sarahmonster]

Ahh I see—I think I may have misunderstood here. I thought we could just programmatically grab the square-cropped image, and use that. 😢

It sounds like the best approach is to go with the rounded corners option then, and maybe just call the style variant "Rounded" or similar? It implies that the shape could be a circle, but still acts as a descriptor in the case where your shape winds up being a not-circle.

[kjellr]

Joining into this a little late, but an alternate option would be to try using a CSS mask. This keeps things square and circular, and would theoretically only require a tiny bit of CSS. The only real downside I see is that it doesn't work in IE. Here's a demo:

https://codepen.io/kjellr/pen/BgvdoX

[melchoyce]

^ This is exactly what I'd hope for!

[jasmussen]

That is pretty gosh darn killer, Kjell! I did not know that was possible.

It's worth noting that in the editor you will still see resize handles "floating in space", as they still align to the actual boundaries of the image. However your solution checks the boxes:

• It does what Sarah and Mel suggested, in a slick way
• It just works
• The image can still be responsive without having to ask theme authors to remove `height: auto;``

The fact that it doesn't work in IE11 is probably okay — can we do something like add the rounded border radius from my PR, and then use an @supports to remove that radius and instead apply your clipping path?

I feel like I owe you a milkshake or something.

Would you like to commandeer my PR in #16475? It has all the base ingredients to add a style variation to the image block called circle — "all" you'd need to do is add your clipping path instead.

Edit: Oh I guess if you float the image, there will also still be sort of an invisible margin from the boundaries of the image, which you can't actually do anything about. That may actually be kind of a bummer.

[kjellr]

The fact that it doesn't work in IE11 is probably okay — can we do something like add the rounded border radius from my PR, and then use an @supports to remove that radius and instead apply your clipping path?

I posted the code for this here. The inline SVG there fails our listing tests, so it needs a little bit of troubleshooting.

[kjellr]

Edit: Oh I guess if you float the image, there will also still be sort of an invisible margin from the boundaries of the image, which you can't actually do anything about. That may actually be kind of a bummer.

Yeah, this is the main downside to the mask approach. Like the previous solution proposed in this thread, the user can always manually switch to a square crop to remedy this. Not a great solution, but it's the best I've thought of so far. 😕

[melchoyce]

Could a focal point picker fix that?

[kjellr]

Not exactly — the issue is more about the dimensions of the image. We aren't really cropping here, we're just adding circular overlay. So the image is still rectangular, it's just that the area outside of the image is transparent and takes up space still.

[jasmussen]

Yeah, this is the main downside to the mask approach. Like the previous solution proposed in this thread, the user can always manually switch to a square crop to remedy this. Not a great solution, but it's the best I've thought of so far. 😕

Yes, well this is sort of the same issue my initial approach had, and you can fix it in the same way: pick a square source image from the sidebar. And also, this variation does not preclude us from running with having a "pill shape" variation too. I don't necessarily think it's a blocker, though I do wonder if those invisible margins will be harder for a user to understand, than the pill shape.

[sabernhardt]

While testing in Twenty Eleven, I noticed that Edge does not display the rectangular images properly. Edge apparently supports mask-image: none but not mask-image: contain.

The rectangles can have a pill shape instead by adding this Edge-specific condition:

@supports (-ms-ime-align: auto) {
	.is-style-circle-mask img {
		mask-size: cover;
	}
}

[youknowriad]

Should we close this issue now @jasmussen?

[jasmussen]

So, I actually regret what we ended up with here :| 

The fact that the resize handles float in the air and the actual width of the image is unchanged makes for a bad experience.

also with long captions that still go to the full width of the image:

You can't float the image left and have text wrap around it because there will be arbitrary margins left and right. You can't put several of them in sequence. So it is misleading and not that useful.

I think we should revert the circular CSS mask and go back to a "pill shape", the one with border-radius: 9999px. Then you can still have a perfect circle if you actually crop the image to a square, but the style will still be useful for images that are not square.

[separatelyunited]

I noticed that Edge does not display the rectangular images properly. Edge apparently supports

I had this come up with a user in chat today. They were using the theme Rockfield and had 4 images where 2 were displaying properly as circles and 2 were not. The 2 images that were styling differently were rectangular images. The user re-uploaded as squares and the issue was resolved.

Site is: https://laboratoirevisuel.ca/

[Oceanflynn]

[gallery ids="4415" type="circle" columns="1"]

This worked for me in 2020 but not in 2021.