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

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

Home Forums Support An alternative to creating shapes out of background images in containers?

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #2192691
    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

    #2192770
    Ying
    Staff
    Customer Support

    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/

    #2192810
    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!

    #2192884
    Fernando
    Customer Support

    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! 🙂

    #2194076
    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!

    #2194184
    Fernando
    Customer Support

    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. 🙂

    #2197396
    Jessica

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

    #2198893
    Fernando
    Customer Support

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

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.