figure / img / figcaption width

[RuiVP]

Hi,

I'm having a problem, but
I'm not sure if I am missing some configuration items or if this is a internal feature to the images modules. Here goes my problem (sorry if I'm not able to explain it in a synthetic way):

When I insert a img with figcaption in the body text (through the images field), the caption doesn't fit the image width. Meaning:
Suppose the image is centred and 50% wide relative to the #content container, but the caption being very long, it spreads to 100% of the available space. The same thing happens if the image is left/right aligned to text.
This is graphically wrong (according to the usual typographic rules) and visually confusing, because you cannot distinguish immediately the caption from the following normal body text.
Apparently, this means the figure element (defined as a display=table in the default css) expands to the entire available space, exceeding the image width.
Shouldn't the width, in the images module, be assigned to the figure element (table or otherwise), instead of the img element?

Or... am I missing something in the configuration/use of the images field?

[Jan Romero]

Hi, just checking, is this solely about the appearance of images in a WYSIWYG editor (CKEdit), or do you have a question about styling actual the frontend of your site? If it’s the latter, please post the relevant markup and CSS, or ideally even link to a live example, if possible.

[RuiVP]

40 minutes ago, Jan Romero said:

Hi, just checking, is this solely about the appearance of images in a WYSIWYG editor (CKEdit), or do you have a question about styling actual the frontend of your site? If it’s the latter, please post the relevant markup and CSS, or ideally even link to a live example, if possible.

My question is about the appearance of images and captions (inside a figure element) in the frontend. As far as I know, CKEdit has a different mechanism/styling and I'm not worried about it. Of course, if I take the trouble to manually insert an image and a caption inside a table, and configure the table, etc., the problem goes away, but... isn't it the automatic procedures and machine help what we are all hopping for, for the sake/save of time and work?

My relevant CSS:

.align_left {
	/* for images placed in rich text editor */ 
	float: left;
	margin: 0 1em 1em auto; 
	position: relative;
	top: 0.5em;
	max-width: 50%; 
}

.align_right {
	/* for images placed in rich text editor */ 
	float: right;
	margin: 0 auto 1em 1em;
	max-width: 50%; 
}

.align_center, .align_center img {
	/* for images placed in rich text editor */ 
	display: table;
	margin-left: auto; 
	margin-right: auto;
	/*position: relative;*/
	/*top: 0.5em;*/
}

figure {
	display: table;
	/* width: 1px; */
	margin: 1em auto;
}
figure.featured_image {
	margin: 0;
	width: 100%;
}

figure img {
	display: table-row;
	/*margin-bottom: 0.5em;*/
}

figure figcaption {
	display: table-row;
	font-size: smaller;
	color: #777;
	line-height: 1.4em;
}
.align_center figcaption { 
	text-align: center;
	margin: auto;
}

The base site is https://cadpp.org/ . It is meant to be a very simple (simplistic?) site, without bells and whistles.
An example of the problem I'm trying to report would be https://cadpp.org/artigos/a-mundializacao/#this-is-bad-graphics

Please note that I will undo this image caption example as soon as possible, because it is breaking my page. Before preparing this example for you, and in order to turn around the problem, I manually broke the caption into 3 lines, using <br/>. Also notice that the only thing preventing the caption from occupying all the container width is the fact that I added a limit to the right|left-aligned images in the CSS file (max-width: 50%;).

[Jan Romero]

Cool site! There are obviously all kinds of ways to achieve the desired result with CSS. I’m not the best person to ask because I have no experience with CKEdit. The easiest CSS-only way would be to give .align-left the desired width, like maybe 30%, and set the img to width: 100%. No need for display: table, imho (indeed, if you do this, you should remove display: table and table-row). This would however prevent you from having different widths for left-aligned images, which may or may not be what you want.

[RuiVP]

@Jan RomeroIn fact I would like to keep the freedom to choose the image size in each case, not to «normalize» the images.

Using the inspector in Mozilla, I confirm that the right way to do it would be to style the figure element (not the img element) on a each case basis.

But I don't know how to do it through the images field or how to change the module to get there.

Hopping someone has an idea to help me.

[Jan Romero]

Try:

.align_left {
    display: block;
    width: min-content;
}
.align_left > a {
    display: block;
    width: max-content;
}

This will only work if the <img> is wrapped inside an <a>.

[RuiVP]

@Jan Romeromany thanks for your effort! Unfortunately it doesn't work as expected. It is equivalent (I think) to Ryan's CSS trick "figure {width:1px;}".

I tend to believe there is no CSS solution for this problem, because, as far as I know, CSS doesn't have ascendant selectors (something like "parent < child {some: rule}").

Although I'm not sure, I think I would be able to build some HannaCode to 1) accept an img, 2) accept a width attribute, 3) insert the img it inside a figure, 4) add a figcaption and 5) retro-style the figure element accordingly to the img width - and finally render the whole thing. However, that would force the editor to make a tricky choice of images based on image:n. That's not comfortable and, in a non-profit, pro bono, voluntary site like this, that would make editors run away, according to my experience.

Maybe the only practical solution is the good(?) old table with 2 rows: one for img, another for caption, specifying a table width. That's fairly practical to do in CKEditor.

[Jan Romero]

2 hours ago, bilioso said:

Unfortunately it doesn't work as expected.

Hmm, what is the expectation? It looks fine to me if I inject my snippet into the CSS:

This is in Firefox, but I also tested in Edge. Edge doesn’t show whitespace above the link’s underline, but that’s a line-height issue. When done this way, the image’s size can be controlled using only the width attribute set in CKEditor. If you set width=100 it looks like this:

 

[RuiVP]

My mistake! You are right, it works as perfectly. It also works for align_center, of course. Simple and brilliant. Problem solved.

Thank you, you applied a lot of effort and time to crack my problem.

(my silly mistake: I was injecting in Firefox ".align-left" instead of ".align_left")

Thank you again! Community is a wonderful thing.

[Jan Romero]

 

21 minutes ago, bilioso said:

I was injecting in Firefox ".align-left" instead of ".align_left")

Haha, I did the exact same thing at first ? Glad it’s working for you