Floated images, margins and TinyMCE
Permalink
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:
http://www.findanaturopath.com.au/natural-therapies/acupuncture/...
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?
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:
http://www.findanaturopath.com.au/natural-therapies/acupuncture/...
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?
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.
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.
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...
Maybe you can chip in with your suggestions at the tinymce.com forum thread -http://www.tinymce.com/forum/viewtopic.php?pid=44121...
Well I'm actually almost there with a CSS selector:
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...
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...
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...
Example: and add your margins or use
Not sure if it really helps but also see- http://stackoverflow.com/questions/2524767/tinymce-image-alignment...
http://www.tinymce.com/wiki.php/Configuration:formats...
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??
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...
Example:
img:nth-of-type(2n+1) { float: right; } img:nth-of-type(2n) { float: left; }
margin: autoNot sure if it really helps but also see- http://stackoverflow.com/questions/2524767/tinymce-image-alignment...
http://www.tinymce.com/wiki.php/Configuration:formats...
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??
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/...
or use JordanLev's Designer Content add-on- http://www.concrete5.org/marketplace/addons/designer-content/...
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.
http://www.concrete5.org/marketplace/addons/content/...