I am totally at a loss trying to place images.
OK, first thing first. Drupal does not allow the inline 'style' attribute, even in 'full html' input format. So whilst the original script in fckstyles.xml would work in the editor area, it would not work when saved and viewed in drupal as the 'style' tag is *always* stripped out (ie. you can't add <style> to the input filter 'allow list'; it is drupal core which strips it out, not the input filter module).
The original script in fckstyles.xml uses the inline style attribute:
<Style name="Image on Left" element="img">
<Attribute name="style" value="padding: 5px; margin-right: 5px" />
<Attribute name="border" value="2" />
<Attribute name="align" value="left" />
For the reason described above, this doesn't work, so I replaced this with a css style, which drupal accepts:
<Style name="Image Left" element="img">
<Attribute name="class" value="rteimageleft" />
</Style>
And in fckeditor.css:
.rteimageleft {
margin: 4px;
float: left;
}
I don't particularly like floating images, but I don't know any other way.
CSS only has 'text-align:left', which doesn't work with images (or at least, it's not supposed to - see Q1 below).
Anyway, floating images left and right using this css is working.
However I have two problems for centred images (placed between paragraphs or at the end of the written content):
1)
The FCKeditor 'centre justify' button, when applied to an image, centres the image in the editor area using 'text-align: center'. However, when viewed in drupal, it doesn't work (and I don't think it is supposed to; it isn't valid css is it?). So, I'd like to know how I can stop images being 'falsely centred' in the editor area when using that button.
2)
I've tried the following, but it doesn't work. Can anyone explain why, and what I should be doing?
In fckstyles.xml:
<Style name="Image Centre" element="img">
<Attribute name="class" value="rteimagecentre" />
</Style>
And in fckeditor.css
.rteimagecentre {
margin: auto; padding: 10px; display: block;
}
Thanks.
Comments
Comment #1
-Anti- commentedDamn it. After hours trying to get it to work, it mysteriously starting working all by itself.
Both questions resolved themselves:
The justify button puts a div around the image, and it is this which is centred.
So that's ok I think, because div is a block level element.
It probably didn't work for the same reason that Q2 wasn't working.
However, whatever quirk sorted itself, also corrected both centring methods.