CKEditor Image Centered with Caption

[vwatson]

When I insert an image into the editor, select Center for alignment and check the box for caption, the image does not appear in the editor (see attached image), however the code is inserted for the image (shown below). 

PW 3.0.45

Quote

<figure class="align_center"><img alt="" src="/development/brown/site/assets/files/1080/original-school.jpg" width="550" />
<figcaption>The original Brown Township school building built at the north east corner of &nbsp;Walker and Roberts Roads</figcaption>
</figure>

 

[MindFull]

Seems to be a CSS issue with the width attribute of the figure element. It's set to 1px while the img element has max-width set to 100%. When you go to add a centered image caption, CKE adds the <figure> tags and things get wonky. You could copy/paste the version of the content.css from the core into the site/modules/InputfieldCKEditor directory and use that path for the field's Custom Editor CSS option (under the Input tab). From there you could tweak the CSS but it would only affect the admin view. To mirror the changes in the front end you'll need to add some CSS there too. Or maybe you could just modify the source to maybe use the img and p tags with the align-center class.

[vwatson]

Yeah, I was coming to that conclusion - just removing the caption. Will be less confusing for the client that way. Thanks.

[elabx]

Has anyone found a fix for this?

[guenter55]

In addition to @MindFull: you will find the css for the ckeditor here: wire/modules/Inputfield/InputfieldCKEditor/contents.css.

Find the css for .figure and change to this:

figure {
	display: table;
	/*width: 1px;*/
	margin: 1em 0;
}

if css for .img is only to width: 100% change to:

img {
	max-width: 100%; 
}

change the css for the .figure.align-center as follows:

img.align_center,
img.align-center,
figure.align_center,
figure.align-center {
	/* RCD 
	display: block; */
	display: table !important;
	margin-left: auto;
	margin-right: auto;
}

Now you can see in ckEditor image and capturetext (checked title) in the middle.

For fontend you must add in your css:

img.align_center,
img.align-center,
figure.align_center,
figure.align-center {
    float: unset !important;
	display: table !important;
    margin-left: auto;
    margin-right: auto;
	margin-bottom: 10px;
}

In most cases, the definition of position left and right is wrong in the frontend, so copy the css for all the "alligns" from content.css to your style.

best regards

[JeevanisM]

On 2/7/2018 at 11:15 PM, guenter55 said:

In addition to @MindFull: you will find the css for the ckeditor here: wire/modules/Inputfield/InputfieldCKEditor/contents.css.

Find the css for .figure and change to this:

figure {
	display: table;
	/*width: 1px;*/
	margin: 1em 0;
}

if css for .img is only to width: 100% change to:

img {
	max-width: 100%; 
}

change the css for the .figure.align-center as follows:

img.align_center,
img.align-center,
figure.align_center,
figure.align-center {
	/* RCD 
	display: block; */
	display: table !important;
	margin-left: auto;
	margin-right: auto;
}

Now you can see in ckEditor image and capturetext (checked title) in the middle.

For fontend you must add in your css:

img.align_center,
img.align-center,
figure.align_center,
figure.align-center {
    float: unset !important;
	display: table !important;
    margin-left: auto;
    margin-right: auto;
	margin-bottom: 10px;
}

In most cases, the definition of position left and right is wrong in the frontend, so copy the css for all the "alligns" from content.css to your style.

best regards

thank you for the tip but these alone didi not work for me. I have added

text-align:center  property and it worked. For the CKEditor center image element, the css file is content.css to be edited