OK, some of you may be wondering how and / or why some of my last few posts have had images posted with them. No no, not the one with me looking totally douche on Towel Day. I meant the (Creative Commons licensed) images in my Lunar Orbiter and irresistible telephone directories posts.
It’s this – a WordPress plugin called Photodropper. Nifty little thing, that, sitting as a field in your WordPress create / edit post page, and allowing you to search for images through keywords on Flickr. Enter some keywords related to your post, and see a preview of Creative Commons-licensed (which means you don’t have to pay royalty to the author for using it) images related to your keywords on Flickr. Then, choose to insert any of the images – in different sizes.
All pretty nice, and really helpful, except that it simply dumps the image into your posting area. No float alignment. Mildly irritating, I’d say, but then it was probably done because the creators of the plugin wanted to give the freedom of final placement to the WordPress users. Now the WordPress visual editor – TinyMCE – does allow you to align stuff at the click of a button, but doesn’t allow you to set it’s float properties. Lemme explain. Say you have a picture, and some text after that. Normally, if you use the align feature, and say, choose to align the image to the right and text to the left, what would happen is that the image would be aligned to the right, and the text would come AFTER the image. In most cases however, the intention of the user would have been to make the image ‘float’ to the right side of the text.
Except that if you’re using Photodropper, then each time you make a post, then you’d have to switch to the HTML view, and add the necessary span tags. Which would be, this:
<span class="alignedright" style="float: right;">Blah</span>
Obviously, you could make it float left or center too, by replacing right, according to your needs. Tedious thing though, if you needed to do it every time you used Photodropper. Thankfully, there’s a way of automating this.
The Photodropper developers have quite thoughtfully added a feature for this (but it’s kinda broke, which is why I’m writing this post).
- Login to your WordPress blog’s Dasboard.
- Go to Settings > Photodropper. Here, it would be a nice idea to uncheck the box next to the option related to commercial usage, and check the box next to ‘Sort by most interesting’. Just general advice.
Now comes the fields we need to be interested in – the ‘Insert before’ and ‘Insert after’ fields. Naturally, I thought that simply pasting the code I mentioned earlier would do the trick. It didn’t. I opened up the HTML view of my post editor and found the problem. It’s quite a well-known fact that the TinyMCE editor is over-zealous when it comes to cleaning up HTML code – much to the irritation of people who *know* what they heck they’re doing when mucking about with markup in the first place. The problem was this: TinyMCE was ‘escaping’ the quotes in my original code. So the result, in the editor, looked something like this:
<span class="\quot;alignedright\quot;" style="\">
This piece of garbage wouldn’t work, simply because instead of taking my quotation marks as part of the markup, TinyMCE decided to ‘escape’ them and turn it into a translated HTML character – that’s the ‘\quot;’ bit. For the uninitiated, escaping is done in places where special characters have special meanings. In xHTML for example, things like angled brackets are used to enclose tags used for markup. So if wanted to *actually* print the angled bracket characters on screen, you’d have to use the translated equivalents, namely, < and >. It’s a similar case with quotation marks, they’re used to enclose values.
What the TinyMCE editor was doing was it was taking things a bit too far and trying to think for me when it couldn’t. To use such entities in a tag itself, it needs to be ‘escaped’ by adding a character – generally the backslash – to tell the editor that this needs to be
interpreted literally.
So I thought of using escape sequences myself while entering in the Photodropper customisation fields (oh, and you’ll need to reload your post page for trying out the new
customizations). Still, no show. Because TinyMCE escaped the escape characters themselves.
I finally hit upon an idea. If TinyMCE was going to be SO bothered with ensuring correct markup, then maybe entering the WRONG markup in the Photodropper field would mean it would rectify them.
And it worked! Enter this in the ‘Insert before’ field:
<span class=alignedright style=float:right;>
…and this in the ‘Insert after’ field (same as you’d normally do):
</span>
Sure enough, TinyMCE inserted the quotation marks (non-escaped ones) in their proper place, and the results came out as expected. Of course, you can add other stuff too – even any text you want to be displayed. Some notes about the ‘Insert before’ field code though:
- You can choose a property for the float field other than right too. Like left or center. Even if you don’t want it to be right-floated in each post (and want to vary it each time), still, go ahead and make a customization in the Photodropper settings which you think you will use the most. Then, after inserting an image using Photodropper, open up the HTML view, and replace right with your new choice. It’s still way faster than inserting the necessary code from scratch each time.
- I’ve specified the CSS class too – alignedright in this case. The class field is NOT
NECESSARY, but you may want to keep it because your theme might have specified formatting rules for right-aligned objects. Or, YOU might want to add a CSS style rule in the future for all right-aligned objects. It never hurts, harnessing the full power of CSS by classifying elements clearly. - alignedright is simply the class which I decided to use. Your CSS styles might have a differently named class, maybe even douglasadams for all you will. So do take care about which class you’re specifying. Again, if you’ve no clue about this, forget the class value. It won’t hurt the formatting at all.
- If you choose a different float alignment, then the corresponding class for that too
would be different. alignedleft and alignedcenter are good names to think off.
Frankly, I won’t blame the Photodropper authors at all. It’s a brilliant plugin. ‘Code Is Poetry’, as the WP folks say. However, I must say, I’m quite irritated with TinyMCE and it’s
HTML-cleanup functions. Removing it is a bad idea, because it IS useful in some cases; but it does get in your way quite a lot of the time. Like someone on WP forums said:
When I want a div, I want a *div*. Not a span, or a p. There’s a reason why I’m editing the code in the first place.
…Or something along those lines. And I fully agree. Moxiecode, the developers of TinyMCE have said that ‘it’s the browser messing up our code’ – but it’s a lame excuse. That might be the case, but other people have done a good job of making WYSIWYG editors – the Blogger / Blogspot folks for example – and it *works*. It cleans up code when needed, and let’s you play around with edits too.
So if you hate TinyMCE that much, why not replace it with something else?
Ah. Of course, I could do that (there ARE alternate options available), but it would come with its own problem. Other plugins, for example, might run into trouble. Photodropper, say, might have trouble integrated itself with other editors. That, and others. Until Moxiecode make something which *just works*, WordPressers are stuck.