Jump to content

CKEditor Image Centered with Caption


vwatson
 Share

Recommended Posts

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>

 

missing-img.jpg

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • 9 months later...
  • 2 months later...

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

  • Like 1
Link to comment
Share on other sites

  • 1 year later...
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

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