CKEditor & Responsive Images

Ah yes… WYSIWYG editors (or as I prefer to more accurately call them, “rich text editors”). As you can see, I’m not their biggest fan. There are lots of reasons why they’re troublesome, but I’ll save that for another post. I wanted to quickly share a problem we came up against yesterday with a site we’re about to launch, and its solution.

When we build new sites now, they’re almost all responsive. And responsive images have lots of challenges. But one of the *easiest* things about responsive images is that they can be made responsive with one simple line of CSS:

img { max-width: 100%; }

That will ensure that any image in a standard HTML image tag, with a width and height attribute, will never exceed the width of the viewport. Simple. Lovely.

In one of our about-to-launch projects, our client needs the ability to add inline images to their content (we tried to talk them out of it, but they have good reasons). CKEditor is a heavily-used and widely tested rich text editor, and it’s the one that’s being built into Drupal 8. So for all these reasons, we tend to use it. But in this site, images placed in content with CKEditor weren’t “responding” properly. Why? CKEditor was generating images with inline CSS widths and heights, instead of putting those values in the standard HTML width and height attributes. And that’s exactly what CKEditor was doing when we added an image via its toolbar image button and want to change its size. It was generating tags that look like this:

<img alt=”kittenz!” src=”/images/kittenz.jpg” style=”height:374px; width:500px” />

Image

I was kind of surprised. Though WYSIWYGs are notorious for generating poor code, I thought CKEditor might have this sorted out by now. So I tweeted. I googled. Before even getting that tweet back from CKEditor, I found a lot of complaining about this, and I found this issue in CKEditor’s queue… with a “posted two weeks ago” fix at the bottom! The fix is a plugin called Enhanced Image. And you know what? It totally works! Thanks, CKEditor team, for getting this done. Now CKEditor outputs image tags that look like this instead:

<img alt=”kittenz!” src=”/images/kittenz.jpg” height=”374” width=”500” />

Ahhhh… much better! Now the images scale down when the browser window gets smaller than the original width of the image. Phew!

If you’re having this problem with CKEditor, here are the steps to fix it:

1. Upgrade your CKEditor library to 4.3 if it’s not there yet.
2. Download and add the Enhanced Image plugin. 
3. Profit!