7

This is how my configuration in the wysiwyg filter looks like (in Drupal7):

a[!href|target<_blank|title],
img[src|align<bottom?left?middle?right?top|alt|border|class|height|width|float],
div[align<center?justify?left?right],
p[align<center?justify?left?right],
br,span,em,strong,cite,code,blockquote,ul,ol,li,dl,dt,dd

However my configuration does not work for aligning images.

I have reviewed my code and the alignment is done using the "style" tag:

<img src="" alt="" style="float:right" />

I tried the following configuration for the image but that does not work either:

img[src|align<bottom?left?middle?right?top|alt|border|class|height|width|float|**style**],

Here is another attempt that did not work:

@[style]

And I also tried like so:

img[*],

Another attempt is what is detailed in this alternative: http://screencast.com/t/jUOwMxmpu

So what is the right configuration for the images to be aligned? What is my error?

1
  • 2
    Maybe you still have Drupal's default "Limit allowed HTML tags" filter enabled, besides wysiwyg_filter? This filters out any inline css styles on display.
    – arjan
    Oct 11, 2013 at 19:20

2 Answers 2

1

Some people forget to turn off the built-in HTML Filter when they enable the WYSIWYG Filter. If you double-filter, you will lose your img attributes.

For my part, though, I prefer to not put the float on the img; instead, I float the div that surrounds the image and caption, allowing them to float together. (Example image, with floated caption "A battle...": http://www.westkingdom.org/content/new-members). To give the content editors a good user experience, I allow them to set floats on images with ckeditor, but I move the markup to the div in a render hook when the content is displayed. In this scenario, I don't need to allow floats on the image at all.

I have a writeup of how I achieved responsive images with captions using media 2.0, wysiwyg filter, and a couple other modules, and a couple of custom hooks.

0

You need to whitelist the style attribute on your image tag img[!src|style] and then you need to also whitelist the style properties that can be used. You should see a "Layout Properties" group of checkboxes, check the one that says "float."

3
  • I tried to configurate with your suggests: screencast.com/t/WCupjASwmy44 and screencast.com/t/74iOevHtL9f and nothing. Thanks for your help and thanks for your answer.
    – cabita
    Aug 30, 2012 at 16:40
  • Did you clear your cache? I just tested the configuration on a clean install and it works. Aug 30, 2012 at 16:46
  • I cleared cache and nothing. The images on the editor are not alignment.
    – cabita
    Aug 30, 2012 at 16:53

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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