vwatson

CKEditor Image Centered with Caption

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

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
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


  • Recently Browsing   0 members

    No registered users viewing this page.