GetSimple Support Forum
Image Alignment Classes plugin - Printable Version

+- GetSimple Support Forum (http://get-simple.info/forums)
+-- Forum: GetSimple (http://get-simple.info/forums/forumdisplay.php?fid=3)
+--- Forum: Plugins (http://get-simple.info/forums/forumdisplay.php?fid=13)
+--- Thread: Image Alignment Classes plugin (/showthread.php?tid=5399)

Image Alignment Classes plugin - rjenkins1984 - 2013-11-26

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!

RE: Image Alignment Classes plugin - morvy - 2013-11-26

Code:
var margin = "1em";

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

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 Smile

RE: Image Alignment Classes plugin - rjenkins1984 - 2013-11-26

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?

RE: Image Alignment Classes plugin - morvy - 2013-11-26

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'}}
];


RE: Image Alignment Classes plugin - rjenkins1984 - 2013-11-27

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!