Jump to content

figure / img / figcaption width


bilioso
 Share

Recommended Posts

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?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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%;).

  • Like 1
Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

@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.

Link to comment
Share on other sites

@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.

Link to comment
Share on other sites

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:

grafik.png.31cc251dc2aafd84eb0727d468a00d10.png

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:

grafik.png.da80b2bf56075692290daced0c403a69.png

 

  • Like 1
Link to comment
Share on other sites

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.

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...