Image Alignment Classes plugin

[rjenkins1984]

Image Alignment Classes is a plugin which adds the classes `img-left` and `img-right` to left- and right-aligned images, respectively.

It allows theme developers to add custom styles to aligned images (such as margins) in light of the fact that CKEditor simply adds inline styles.

If you have any problems, please post them here!

[morvy]

Code:

var margin = "1em";

this is not needed I think, you're not using it in JS

nice plugin, but I use "Styles" feature of CK, so instead of aligning image, I click on Style - Left Img and it adds that class to it. in overall, it's the same as your solution, but not that user friendly

[rjenkins1984]

Good catch, thanks! Must've been a rogue copypasta...

So you write a custom style just for images? Does it wrap the `img` in a `div` with the class or something similar?

[morvy]

look at my custom gsconfig.js:

Code:

CKEDITOR.config.contentsCss = '/theme/demo/assets/styles.css' ;
CKEDITOR.config.bodyId = "main";
CKEDITOR.config.width = 670;
CKEDITOR.config.stylesSet =
[
{name : 'Obr. vpravo', element : 'img', attributes : {'class' : 'img-right'}},
{name : 'Obr. vlavo', element : 'img', attributes : {'class' : 'img-left'}},
{name : 'Obr. ramcek', element : 'img', attributes : {'class' : 'coverimg'}},
{name : 'Zvyraznene pozadie 1', element : 'span', attributes : {'class' : 'highlight-one'}},
{name : 'Zvyraznene pozadie 2', element : 'span', attributes : {'class' : 'highlight-two'}},
{name : 'Zvyraznene pozadie 3', element : 'span', attributes : {'class' : 'highlight-three'}},
{name : 'Cerveny text', element : 'strong', attributes : {'class' : 'text-red'}},
{name : 'Farebny text 1', element : 'strong', attributes : {'class' : 'text-one'}},
{name : 'Farebny text 2', element : 'strong', attributes : {'class' : 'text-two'}}
];

[rjenkins1984]

Nice, that's an interesting way of doing it. I think my solution may be easier for less technical users, but I never thought of using styles for this — if you wanted to do something like a media object with images and text a custom style might do it nicely!