When embedding an image in CKEditor on Drupal 7 any styles or alignment are applied directly to the image itself e.g.

<img src="..." style="float: left; width: 90px; height: 150px" />

However this doesn't allow for a great deal of CSS control over the appearance for the image because the inline styles override CSS.

How can I do the following 2 things:

  1. Automatically wrap the image in a div and apply classes to this instead of the img element
  2. For alignment use classes (e.g. 'image-left', 'image-right' etc.) instead of inline styles

So the above example would instead be rendered as:

<div class="image-left">
    <img src="..." styles="width: 90px; height: 150px" />
  • That's how CKEditor works, nothing Drupal can do to help you there. If you want that sort of functionality you should probably open a feature request on CKEditor's issue queue. It's a pretty configurable library already, though, so you might be able to just get stuck in and produce that sort of functionality with their config. Not really a question for this site, Stack Overflow would probably be your best bet
    – Clive
    Sep 24, 2014 at 11:47
  • I came here from Stack overflow after reading a similar question and a comment saying the questioner should come here and ask instead. I think this is a 'Would like to have' rather than a 'Must have'
    – chrism
    Sep 24, 2014 at 11:57
  • CKEditor isn't made by Drupal though, it's a 3rd-party library. Questions on configuring it that don't relate to Drupal (e.g. a Drupal-specific plugin) aren't on-topic here because they're only related to the JS config inside CKEditor. Unless there's a Drupal-specific discipline involved (which it doesn't look like there is from the question), it's off-topic here I'm afraid
    – Clive
    Sep 24, 2014 at 12:09
  • Look at this post How to customize the CKEditor on your Drupal 7 Website and others similar. It allows you to create custom styles for the styles dopdown, which does not do exactly as per your requirements but is a close approximation. I've used it in the past to create floated divs. Sep 27, 2014 at 6:37

1 Answer 1


Instead of adding a wrapper div, you could use !important.

img {
    float: left !important;
    height: 150px !important;
    width: 90px !important;

This would override the style added in CKEDITOR. You could do the same for alignment using classes, adding them directly to the image through CKEDITOR.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.