Floated images, margins and TinyMCE

Hi all,

there's a small problem with the way TinyMCE handles aligning elements that I haven't been able to work out a nice 'client friendly' solution to.

When you are editing a content block, you might want to add an image to the content, highlight and then right align it. Sort of like this:

TinyMCE just adds the inline style "float: right" to achieve this. However, by default, there are no margins on the image, so any text flowing around it is going to run right up to it. A quick and dirty solution is to just edit the html TinyMCE creates, adding margin-left: 10px; margin-bottom: 10px, or whatever.

Alternatively, if we add margins to the image via the styles, this will apply to all images in the content, regardless of whether they have been floated left or right. So you'd end up with images that are floated left, with unnecessary left margins.

I haven't been able to find a way to selectively target images that are floated. I've also investigated a way to make TinyMCE default to adding margins alongside the float style (or add a class), but that looked very messy to maintain.

Ultimately I'm looking for a way to be able to right align images and have margins on them automatically. Can anyone suggest a nice way to make it automatic?

View Replies:
wagdi replied on at Permalink Reply
The 'Content+' add-on by Glockops may be just the thing you're looking for.

You can float images to the left or right, have them show above or below the text or left/right alignment.

Puts nice spacing between text and image with an option to add a small neat border around the images.

mesuva replied on at Permalink Reply
Thanks wagdi, I'll check it out, cheers.

I sort of feel that this is something that should be able to be achieved by just using the core content block, since it has the feature enabled to add images to be added to content and floated...

A solution I can see is for TinyMCE to add an extra class to the image that is floated/aligned. It wouldn't cause any problems if it weren't used, but would make things a lot easier to style.

This page pretty much sums up what I'm talking about:http://www.gareth53.co.uk/blog/2009/12/tinymce-better-left-right-al...

In it it also suggests using advanced CSS selectors, but I haven't been able to get that to work.
wagdi replied on at Permalink Reply
I feel your pain. The only other option I can think of (and it's not exactly ideal) is to create white/blank borders for the images before uploading them. I know this creates an extra step in your work flow (which isn't exactly desireable) but could be a temporary solution.

Maybe you can chip in with your suggestions at the tinymce.com forum thread -http://www.tinymce.com/forum/viewtopic.php?pid=44121...
mesuva replied on at Permalink Reply
Well I'm actually almost there with a CSS selector:

img[style*="right"] {
     margin-left:  20px; 

This will work in decent browsers, plus IE9 and IE8.

It doesn't work in IE6 which is no surprise (and I don't care), but it is supposed to work in IE7, but that's where I can't get it to work.

(Used this as a selector guidehttp://coding.smashingmagazine.com/2009/08/17/taming-advanced-css-s...
wagdi replied on at Permalink Reply
I just did a google search and it seems everyone has the same problem but tinymce aren't really doing much about it.

Have you tried the css3 (not sure how IE will react) :nth-of-type() pseudo-class - http://www.w3.org/TR/css3-selectors/#nth-child-pseudo...

img:nth-of-type(2n+1) { float: right; }
img:nth-of-type(2n) { float: left; }
and add your margins or use
margin: auto

Not sure if it really helps but also see- http://stackoverflow.com/questions/2524767/tinymce-image-alignment...


http://code.google.com/p/imgmap/wiki/TinyMCE_setup... and the code- http://pastebin.com/ddUxAmPb

Also see the bottom of the page- http://forums.modx.com/?action=thread&thread=8878...

I'm sorry, I wish I had more experience with this type of thing but my knowledge is limited (as you probably guessed.)

I guess thats why Glockops went with his method. I find it works great and clients seem to love it because there is a clear title that says 'Image'. I find a lot of people "don't know what that little picture of a tree does".

I'm sorry I couldn't be of more help. Maybe someone with more experience with TinyMCE can shed some light on this??
wagdi replied on at Permalink Reply
Maybe you can get some insight from this block?- http://www.concrete5.org/marketplace/addons/content-around-image/...

or use JordanLev's Designer Content add-on- http://www.concrete5.org/marketplace/addons/designer-content/...