Floating a Photo Dropper Image

There’s an amazing new way for WordPress bloggers to easily add publicly available Flickr photos to their blog. The PhotoDropper Plugin is an amazing time saver.

photo credit: bingbingOne comment that you’ll see on that page though is that people are having trouble wrapping text around the images. It’s normally easy to do that in WordPress because you can just set the alignment on the image and the paragraph will wrap around it. The problem here is that the plugin adds a caption to the image that include the attribution link that is required for the image’s use.

Unfortunately there’s no simple way that I’ve found to achieve the alignment and flow that you want using the visual WordPress editor. But if you drop into the code editor temporarily you can quickly and relatively easily get the look you’re going for.

1. Write your post as normal (using the visual editor if that’s the way you work).
2. Put your cursor where you want the image to appear and using the PhotoDropper plugin to find and insert your image.
3. Now switch temporarily to the code editor and locate the code you just inserted. The trick is to wrap that code (the image and caption) with <span> </span> tags and apply the styling to the span.
4. At the very beginning of the inserted code add <span style=”float: right”> (or float left as you desire)
5. At the end of the inserted code (after the attribution link) add simply </span>

That’s it! Pretty simple after all. You can apply additional styling to the span if you want to alter the padding or whatever.

For the advanced reader. If you want to make things even easier (and you generally want to put your images in the same place) you can go ahead and make this wrapping with <span> tags and floating the default by doing a simple modification to the plugin.

Go to the plugin directory (wp-content/plugins/photo_dropper) and edit the file flickr-js.php. Around line 123 (in the version of the plugin that I’m using) you’ll see the code for adding the HTML for the image to your post. Edit that code to include the <span> tags and your desired floatiness.

imgHTML = ‘<span style=”float: right”><a href=”http://www.flickr.com/photos/’ + owner + “/” + id + ‘/” title=”‘ + imagealt + ‘”‘ + ‘ target=”_blank”>’;
imgHTML = imgHTML + ‘<img src=”‘ + imagesrc + ‘” alt=”‘ + imagealt + ‘” border=”0″ /></a>’;
imgHTML = imgHTML + licenceHTML + ‘</span>’;

Note however that if you do that modification it will be wiped out the next time the plugin is updated. If you want use both left and right floating you can still do this mod and make it a bit easier on yourself to edit in the code view.

Hope this helps and happy dropping photos into your blog.