[Resolved] Threshold to stop wrapping text around image?

[Jim]

It does, but it also applies to images where going 100% is inappropriate, like the small triangles near the top of this page, where you can see the effect: https://staging1.forestpathology.org/root-diseases/big-pocket/

Ideally, I’d have an attribute selector that will only select figures that contain an image with width > a certain value, but that seems impossible.

If I can determine that the triangles are the only problem images, then I might be able to select figures that contain images that do not have src attribute containing “triangle”. I got this to work to select the img element:

.wp-block-image figure.alignright img:not([src*="triangle"]) {
	width: 99%;
}

There doesn’t seem a way to select the parent figure element. I tried this, but found that :has() is not supported by any browser:

.wp-block-image figure.alignright:has(> img:not([src*="triangle"])) {
	margin: 0.5em;
}

I’ll ponder and search some more. Thanks.

[David]

You can give the Image Block a CSS class in the editor Advanced -> Additional CSS Class(es) field. And use that to exclude the width. The class gets applied to the .wp-block-image element so you could do CSS Class: noresize and target it like so: .wp-block-image:not(.no-resize)

[Jim]

Thanks. I’m working on that.

[David]

You’re welcome

[Author]

Posts