Archived topic
How can I prevent a figure tag being auto-wrapped around a blocks image?
7 replies · Started by Steve on February 7, 2023
I have an image inside an absolutely positioned div and the image is set to object-fit: cover.
Unfortunately the figure tag is preventing this from working properly as the figure extends outside its container and the img is then object-fitting to that rather than the div as wanted.
I can fix this on an image by image basis as and when needed by absolutely positioning the figure using its unique class like this:
figure .gb-block-image-4d36acb7 {
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
}But that's a pain... I'd therefore like to either be able to tell GenerateBlocks to not wrap a particular image in a figure tag at all, or have some way of adding a class like .figure-absolute to an image's figure tag - but as the figure tag is auto-generated that doesn't seem possible either.
Is there some more efficient way of doing this than writing out unique figure class styles each time please?
I'm new to GeneratePress and Blocks (Pro on both) and I have to say I am absolutely loving it! I'm combining it with CubeWP (which is quite new and like a free ACF Pro) and the combination is working very well for dynamic data. I started off with Elementor and Jet engine but I couldn't stand all the bloat so very happy I found GP/GB as an alternative - the code is so much leaner. Great job!
Hi there,
first off - thank you for the great feedback. Its much appreciated.
At this time, its not possible to remove the figure - it will be possible in the future as that hidden HTML will be replaced by a variant container block.
We have already started replacing hidden HTML wrappers with Container blocks - but images are more complex and will come in a later date.
It may be possible to pass a Class to the figure, ill have a look. But is it possible to see issue you're having on the site ?
Thanks for getting back to me on this David.
Unfortunately the name servers/dns are not pointing to the site yet - I'm accessing it by adding the site's IP address to my my hosts file.
If you're happy to do that I can give you the IP and login details but I understand if you prefer not to do that.
I could send you some screen grabs showing the issue maybe?
I have an image inside an absolutely positioned div and the image is set to object-fit: cover.
So the div is absolutely positioned ? And is that css applied using a specific CSS Class ?
Yes exactly, this is the css for the div which contains the image - which is the right side column of a 2 column grid, which is inside a fixed width container, which is inside 2 full width containers, the outer one of which is position:relative and has a section tag name.
This gives me the effect of having the image take up the full-width right side 50% of the section, but the text in the left grid column gets constrained by the fixed width.
.cont-hero__image {
position: absolute;
right:0;
top:0;
width:50%;
overflow:hidden;
}
.cont-hero__image img {
object-position: center center;
}The grid container holding the image also has 100% width and a min-height applied to it in the block settings.
Ok, so considering the CSS 'fix' you mentioned in the OP - could just not use your div selector like so:
.cont-hero__image figure {
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
}Doh! Now why didn't I think of that... seems so obvious now haha :)
Thank you!
I expect my other question about tabs might be a little more challenging!
Glad to be of help