How can I style images according to left/right alignment?

Is there a way to make the left/right alignment of images visible to CSS?

The case at hand is that I would like to apply a left margin to images which are aligned right and a right margin to images which are aligned left. Unfortunately CKFinder/CKEDITOR just use explicit align attributes like this:

<img height="150" width="200" align="left" src="/uploads/foo.jpg" alt=""/>

...so I have no way of knowing which way the user chose to align the image.

Even if there's a reason to prefer an explicit align attribute over aligning images in CSS, at least making the alignment accessible through CSS would be extremely helpful:

<img height="150" width="200" align="left" class="left" src="/uploads/foo.jpg" alt=""/>

Or is there a way to insert class hooks myself in the CKFinder/CKEDITOR configuration? (I've tried to RTFM but I confess that I find the API docs pretty daunting.)

Tue, 01/19/2010 - 21:26

alfonsoml

Joined: 31/12/2006

Posts: 3737

Re: How can I style images according to left/right alignment?

You can set classes as explained in viewtopic.php?f=11&t=17301

Wed, 01/20/2010 - 05:25

riddle

Joined: 09/12/2009

Posts: 8

Re: How can I style images according to left/right alignment?

Thanks, Alfonsomi, that looks like a start, but unless there's something I'm missing it doesn't quite address my issue.

I'm not trying to add options to the style pulldown, I'm trying to use the image behavior that's already defined in the CKFinder UI by making it visible to CSS.

The reason why I want the styles to be set in CKFinder rather than in the textbox controls is primarily usability. The users already go through a fairly complex dialog to upload and set the characteristics of images. I don't want to have to tell them to ignore the left/right control in the image upload interface and to go off to a separate part of the UI to override it.

Or did I misunderstand and there's a way in the API for me to alter the syntax of <img> tags created by CKFinder?

Wed, 01/20/2010 - 08:33

alfonsoml

Joined: 31/12/2006

Posts: 3737

Re: How can I style images according to left/right alignment?

CKFinder is only the window open to upload and select images. The inline dialog where you set the image properties is part of CKEditor, and you should continue in that forum as it's not related to CKFinder.

Wed, 01/20/2010 - 19:08

riddle

Joined: 09/12/2009

Posts: 8

Re: How can I style images according to left/right alignment?

Ah, so CKFinder assembles the parameters for and image but CKEditor turns them into HTML? No way to tell that from the outside. Thanks, I'll copy this over to the CKEditor forum.