Blue Note Stripes Pattern - Full Width Featured Image

[dweuste]

I am working on a site with the Blue Note theme as a base (with a child theme) because of the thin stripe pattern. But when I add a featured image block in the block editor, or often when adding an image block that is full width I can't get the Image Styling/mask to go the full width of the screen, it cuts off arbitrarily early (around 1350 px).

[liviopv]

Hi! @dweuste I wasn't able to reproduce what you described, but I'm likely missing something.

Here's what I did:

1. Modified the default Page Template to include the Featured Image Block
2. Applied a duotone filter to the Featured Image Block
3. Set the Featured Image Block alignment to Full Width
4. Opened a new page and added a large Featured Image

Here's the result:

As you can see, the image fits the whole screen and the duotone is applied to the whole image.

Can you share more information about the behavior you're seeing on your site and instructions on how to reproduce it? Thanks!

[dweuste]

Duotone isn't the issue. The issue is the Blue Note theme's Stripe clip-path. The clip path cuts off at 1350 pixels, which leaves a white space on the right of a full width image. And there isn't a way I can see to extend the path.

Screenshot:

[MaggieCabrera]

Duotone isn't the issue. The issue is the Blue Note theme's Stripe clip-path. The clip path cuts off at 1350 pixels, which leaves a white space on the right of a full width image. And there isn't a way I can see to extend the path.

It's been a while and I think the problem is that the design of the clip path has a specific size that wouldn't work on full width. You may want to adapt the CSS or even the SVG to your use case in your child theme and register the block pattern again with your changes. Or even better, implement a full width specific version because I think fixing the existing pattern for full width will break it for content/wide width

[dweuste]

There's no guide to how to adapt that clip path CSS anywhere is there? (No SVG is used for this mask that I can see)

[MaggieCabrera]

Excuse the uber late response. These svgs are in the CSS file:

https://github.com/WordPress/community-themes/blob/c015c9bf2120eb19a10567d3590cd23b3cd48b8f/blue-note/style.css#L57