Image CSS class in TinyMCE (and what to do about the margins).

[d13t]

On customizing a new theme I now think I have detected a limitation
with TinyMCE. Or perhaps there's a (fool proof) workaround.

When placing an image in a paragraph with TinyMCE you can select an
alignment type. What I expected was, ideally, that TinyMCE will add a
'class' to the img-tag, so you can style that in the CSS theme. (e.g.:
selecting alignment left, will create a class with CSS properties
float: left;).
But this is not what TinyMCE does (or CKEditor in 1.04a). Instead
TinyMCE adds a 'style' property to the img-tag (inline styling).

Now, the floating is not the problem for me. The margin of an image
is. I'd like to style an image with css like this so the image align
perfectly with one of the edges of the paragraph:

.right {
float: right;
margin-right: 0px;
margin-left: 16px;
}

.left {
float: left;
margin-right: 16px;
margin-left: 0px;
}

My problem is that I can only style the img-tag in the CSS files:

img { margin-right: 16px; margin-left: 16px;}
or
img { margin-right: 0px; margin-left: 16px;}
or
img { margin-right: 16px; margin-left: 0px;}

So, I thinks I have to choose from the 3 above which limits the layout
possibilities for me.

I hope someone can offer me a solution. I know I can edit the html
source in TinyMCE, but my client can not and will only use TinyMCE.

Thanks in advance!

Dieter

[Tony]

Hi Dieter,
This is a perfect excuse to use jQuery : http://jquery.com/
It's got quite an easy learning curve and you'll be able to manipulate
anything in the DOM pretty much however you want.
You can just append the style inline using jQuery, selecting the image
or images by traversing the DOM tree.
So that means you can point a jQuery function only at images inside a
certain DOM element.
The css function may do what you want and you'll probably be able to
do it in a single line of jQuery.
Turn jQuery on in the settings.php for your template, add your code to
public.js.php and you should solve it. :)

Thanks,
Tony

[d13t]

While playing with the new editor, CKEditor, I had the same problem.
Well, it's not a problem, but I want my client to place an image and
select align left/right in the editor. That's much easier in CKE. I
know you can manually add an id or class in the CKE image loader, but
that's too techie.

So here's my jQuery excuse:

<script type="text/javascript">
$(document).ready(function() {

//filter images with float:right inline style, remove the style and
add class .right
$('#content img').filter(function() {
var match = 'right';
return ( $(this).css('float') == match );
}).css('float', '').addClass('right');

//filter images with float:left inline style, remove the style and
add class .right
$('#content img').filter(function() {
var match = 'left';
return ( $(this).css('float') == match );
}).css('float', '').addClass('left');

});
</script>

And now all my images in the #content have proper margins depending on
their float state.

There's probably a shorter code for this, but I couldn't figure out
the if-else statement today. So filtering it is.

Dieter

[Tony]

Hi d13t,
That's a really cool solution. Really simple. You can compress your
code using closure :
http://closure-compiler.appspot.com/home
Add the url : http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js
to the "Add a URL:" Input box, paste your code over "// ADD YOUR CODE
HERE" And everything below it.
Click compile, click default.js on the right hand side of the page and
then copy & paste the code from the output to use as your compiled
script code.
It will run a little faster after doing that and make sure you backup
the source before you replace it with the compiled version. It also
helps you find erors in big chunks of javascript. I use to minify
javascripts but I use closeure now. Seems to work well.

I was going to fork out the CKEditor image plugin and make it more
simple because it's not great but didn't for lack of time. It may be
done in the future (No promises) And if I had done that, you could
have tweaked the image plugin directly for your client, thus avoiding
the need to tweak the output using some jQuery.
But I guess maybe you client wants (Or you want to provide your client
with) Some other clever things and jQuery is perfect for those little
kind of tweaks. :)

Glad you found a solution to the problem.

Thanks,
Tony