[Resolved] An alternative to creating shapes out of background images in containers?

[Jessica]

Hi there,

I’ve started using adding shapes to images by creating containers and using an image as the background. See what I mean here: https://jenniferbarker.net/about/ When just using an image block, I can only do the standard round shape that WordPress has built in (it seems). I like using this setup design-wise, but now I’m wondering if it’s possible or how I would add alt text to these images. It seems like using images this way isn’t very accessible, and won’t have the alt text that can benefit SEO too.

Is there any workaround I’m missing/some way to create shapes like this in another way that allows me to add image alt text?

Thanks!
Jessica

[Ying]

Hi Jessica,

ALT tag is a HTML attribute while the background-image is a CSS property which is complete different property.

CSS background image should not need ALT text, if you think a specific image needs to have ALT text, then you should be using image block instead of a background image. Hope that make sense 🙂

More info: https://accessibleweb.com/question-answer/add-alt-text-background-images/

[Jessica]

Thanks so much Ying! That link was helpful too. My only other question is if there’s a better way to do this than having these images be background images — is there a way to style an image block (through GP or GB) to have curved edges, border, etc., or is this way I’m doing it the best way? Thanks!

[Fernando]

Hi Jessica,

If you would like to style an Image Block, you can do it through custom CSS. An effective way to style it is through clip-path: https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path

For instance, you can set a custom class my-image-shape for the Image Block as such: https://share.getcloudapp.com/jkuv6dR7

Then, add a code like this in Appearance > Customize > Additional CSS:

figure.wp-block-image.my-image-shape img {
    clip-path: polygon(100% 0%, 0% 0% , 0% 65%, 1% 64.95%, 2% 64.8%, 3% 64.6%, 4% 64.3%, 5% 63.9%, 6% 63.45%, 7% 62.9%, 8% 62.25%, 9% 61.55%, 10% 60.8%, 11% 59.95%, 12% 59.05%, 13% 58.1%, 14% 57.1%, 15% 56.05%, 16% 55%, 17% 53.9%, 18% 52.8%, 19% 51.65%, 20% 50.5%, 21% 49.35%, 22% 48.2%, 23% 47.05%, 24% 45.9%, 25% 44.8%, 26% 43.75%, 27% 42.75%, 28% 41.75%, 29% 40.8%, 30% 39.9%, 31% 39.1%, 32% 38.35%, 33% 37.65%, 34% 37.05%, 35% 36.5%, 36% 36.05%, 37% 35.65%, 38% 35.35%, 39% 35.15%, 40% 35.05%, 41% 35%, 42% 35.05%, 43% 35.2%, 44% 35.45%, 45% 35.75%, 46% 36.15%, 47% 36.65%, 48% 37.2%, 49% 37.85%, 50% 38.55%, 51% 39.35%, 52% 40.2%, 53% 41.1%, 54% 42.05%, 55% 43.05%, 56% 44.1%, 57% 45.15%, 58% 46.3%, 59% 47.4%, 60% 48.55%, 61% 49.7%, 62% 50.85%, 63% 52%, 64% 53.15%, 65% 54.25%, 66% 55.35%, 67% 56.4%, 68% 57.45%, 69% 58.4%, 70% 59.35%, 71% 60.2%, 72% 61.05%, 73% 61.8%, 74% 62.45%, 75% 63.05%, 76% 63.6%, 77% 64.05%, 78% 64.4%, 79% 64.7%, 80% 64.85%, 81% 65%, 82% 65%, 83% 64.9%, 84% 64.75%, 85% 64.5%, 86% 64.2%, 87% 63.75%, 88% 63.25%, 89% 62.7%, 90% 62.05%, 91% 61.3%, 92% 60.5%, 93% 59.65%, 94% 58.75%, 95% 57.8%, 96% 56.8%, 97% 55.75%, 98% 54.65%, 99% 53.55%, 100% 52.4%);
}

Here is what it would look like: https://share.getcloudapp.com/9ZumLlKm

Source: https://stackoverflow.com/questions/61157568/create-clip-path-wave-css-edges

Other clipping tools: https://bennettfeely.com/clippy/

Hope this helps! 🙂

[Jessica]

Awesome, thanks Fernando! Good to know there’s a solution but that I’m not missing a super simple one built-in. Thanks all!

[Fernando]

You’re welcome Jessica! The way I provided alters the image itself, however, if you want an in-built workaround(though it doesn’t alter the image itself), you can place an Image Block inside a Container Block, and add a shape through the Block settings.

See: https://share.getcloudapp.com/d5u9J55x

Also see: https://share.getcloudapp.com/mXuYvX4O

In essence, there is shape on top of the image from the Container making it look like the image is clipped. Through this way, there would still be an Image Block as opposed to a Background image.

For example: https://share.getcloudapp.com/DOu4PYZW

Hope this clarifies. 🙂

[Jessica]

Oh yes, that’s perfect! Thanks for that solution, Fernando!

[Fernando]

You’re welcome Jessica! Glad to be of assistance! Feel free to reach out anytime you’ll need assistance with anything else. 🙂

[Author]

Posts