custom mask/clipping shapes

  • sydphotonics · Member ·

    Hi team,

    I’m wondering if it possible to adjust the shape of the mask used on feature photos? Is it using a clipping path?
    What I’m hoping to do is change the shape to a hexagon.

    thanks for any advice in advance.

    Chris

    The blog I need help with is: (visible only to logged in users)

  • lelandf · Theme Author ·

    Is it using a clipping path?

    No, that is accomplished with the border-radius property.

    When the border-radius of a square-shaped element is set to 50%, it shapes that element into a perfect circle.

    I’m wondering if it possible to adjust the shape of the mask used on feature photos?

    To be honest, I am not too familiar with clipping paths and don’t quite understand how the rules work.

    I did find this helpful Stack Overflow post which provided some CSS that can be used to turn (square) images into hexagons.

    Applying that to Custom CSS in the Bari theme, try this:

    /* Turn circle-shaped images back into original squares */
body .post-thumbnail-link img {
	border-radius: 0;
}

/* Turn squares into hexagons. Props: https://stackoverflow.com/a/41396720 */
.post-thumbnail-link img {
	clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}

/* Remove rounded corners on featured content area. Disregard if not using that feature */
body .featured .hentry:first-child::before,
body .featured .hentry:first-child:last-child::before,
body .featured .hentry:last-child::before,
body .featured .hentry:first-child:last-child .entry-header::before {
	border-radius: 0;
}

    It should look something like this: https://cloudup.com/ccd8NHMl-P3

    For further information on applying different shapes to images, I’d review the clip-path documentation.

    Another resource for your consideration is the CSS Customization forum on WordPress.com. There may be other online forums suitable for questions about general CSS as well.

    As a tip, the process of applying clipping paths to images would be the same for any image no matter what theme (or even CMS) is used. So I would consider phrasing the question in such a way that does not reference a specific theme or (if it’s a general CSS resource, and not a WP-specific resource) even WordPress itself.

    A reduced test case (such a very small CodePen with nothing but a square-shaped image) would be very helpful. Feel free to copy this one I just made for you: https://codepen.io/leland/pen/GRWBwEz

    And if you need assistance in applying what you learned about clipping paths to a specific element in the Bari theme, please feel free to check back with me.

    Although you should be able to apply whatever clip-path rules to that .post-thumbnail-link img selector mentioned above to affect the thumbnail images.

    I hope this points you in the right direction. Best of luck with your site!

    Best regards,
    Leland

  • sydphotonics · Member ·

    Hi Leland,

    That was extremely helpful, thanks you!

    Cheers
    Chris

  • The topic ‘custom mask/clipping shapes’ is closed to new replies.