Archived topic
"ADDITIONAL CSS CLASS" to figures (not to images)
9 replies · Started by twarrior on March 15, 2023
To make all page figures (img + figcaption) leave a space at the bottom (like paragraphs do), we have the following code:
/* margin img */
.entry-content figure[class*="image"] {
margin-bottom: 40px;
}But also we want to make some images "inline" with parragraphs similar to https://www.screencast.com/t/DNMw3PP1
For these images, we have try to specify an "ADDITIONAL CSS CLASS" called "float-image-left".
and then in css we have:
/* imagen in-line con txt */
.float-image-left
{
float: left;
padding: 0 15px 0 0;
}The problem is that this additional class applies to the "img" (not the "figure"), and we need to be able to access the figure to indicate that in this case we want the margin-botton: 0px.
Hi there,
in the GenerateBlocks image block toolbar you can select Float Left.
So no need for the CSS, and it applies the styles to the figure element
Thanks David.
But in this case, with an “ADDITIONAL CSS CLASS” called “no-margin-bottom” and the next code, we should be able to set the margin, but we are not. We still need access to the "figure", but the "Additional CCS Class" is applied to the "image", not to the "figure".
.no-margin-bottom
{
margin-bottom: 0px !important;
}Allow me to make a observation from a user's point of view (I'm not a CSS expert, I don't even have advanced knowledge).
If the structure of "GB image" block is as follows:
<figure>
<img>
<figcaption></figcaption>
</figure>It seems strange that the "ADDITIONAL CSS CLASS" applies to the "image" and not the "figure".
I think the "ADDITIONAL CSS CLASS" of the "image block" should apply to the Figure, and then we could select with css either the whole Figure, or the child "Image", or the child "Figcaption", Isn't it?
You can always target the figure using a selector like figure:has(.no-margin-bottom).
Thanks ying, but not sure about the Browser Compatibility of this selector...
And if we want to select de Figcaption?
PD: What do think about that the “ADDITIONAL CSS CLASS” of the “image block” should apply to the Figure, instead of the Image?
but not sure about the Browser Compatibility of this selector…
Most mainstream browsers support :has() CSS, except Firefox.
And if we want to select de Figcaption?
It's not a problem, just use this selector: figure:has(.no-margin-bottom) figcaption.
What do think about that the “ADDITIONAL CSS CLASS” of the “image block” should apply to the Figure, instead of the Image?
When we create the GB image block, we actually spend a lot of time discussing this feature, and in the end we all agree that adding to the image itself is the better choice.
First of all, I am grateful for your explanation.
We prefer to avoid using the "has" selector if it is "too new" and not "fully" compatible.
We think that a more compatible solution would be to create a container block (which contains the figure and the parragraph) with the additional class "float-image" and the following code:
.float-image figure {
margin: 0 5px 0 0 !important;
}or
.float-image figcaption {
background-color: #000 !important;
}PS: if you consider it appropriate, a proposal for future versions could be that in the "image" block, an additional class could be added to the "image" and another one to the "figure" (or select if we want the class to the "image" or to the "figure")
Yeah it is something we looked at perviously ie. having 2 CSS classes.
But we intend to make the figure an editable ( Container ) block in the near future so you will be able to customize that directly if you want to.
That´s better! Great!
You're welcome
