How To Use Photo Dropper With Thesis

photo credit: tanakawho

Photographs can help turn an ordinary blog posting into something memorable.  And the easiest way to add a photo to one of your posts is to use a WordPress plugin called Photo Dropper.

The Photo Dropper plugin makes it easy to find and embed any image from Flickr that is available under a Creative Commons (CC) license. Even better, it creates a link that gives credit to the photo owner, meeting the attribution requirement of the CC license.  And it even lets you search for a photo, select the size that you want, and embed the appropriate HTML code, all from the comfort of the WordPress post editor.

Photo Dropper provides terrific functionality, but the results you get out-of-the-box don’t exactly blend in well with the Thesis Theme.  So the rest of this post will show you how to make the Flickr photos you get through Photo Dropper look like a natural extension of Thesis.

Customizing The Photo Dropper Plugin

The first thing we want to do is customize Photo Dropper so that it inserts a bit of HTML before and after the image. That HTML code will reference a custom class that we can then define in our custom CSS file. Our CSS file will define the visual qualities that will make our dropped-in photos look like a natural part of our Thesis site.

So after you’ve installed the Photo Dropper plugin, go to the Settings for Photo Dropper, scroll to the bottom of the options, and enter the DIV code to match what you see in the image below (type “<div class=photo_right>” into the Insert Before field, and “</div>” into the Insert After field):

Photo Dropper Customization

Customizing Your CSS Code

Now that we have customized Photo Dropper to wrap our photos inside a DIV element with a custom class, we can go about defining the attributes of that custom class within our CSS code.  What we want to do is modify the “custom.css” file contained within the “custom” folder of the “thesis” theme folder.  Add the following lines to custom.css, save the file and FTP it back to your server:

.custom .photo_left, .custom .photo_right {
	background: #eee;
	border: 0.071em solid #ccc;
	color: #888;
	margin-bottom: 1.571em;
	padding: 0.714em;
}

.custom .photo_center {
	clear: both;
	color: #888;
	float: none;
	margin-bottom: 1.571em;
	text-align: center;
}

.custom .photo_left {
	clear: left;
	float: left;
	margin-right: 1.571em;
	text-align: left;
}

.custom .photo_right {
	clear: right;
	float: right;
	margin-left: 1.571em;
	text-align: right;
}

.custom .photo_center img {
	background: #eee;
	border: 0.071em solid #ccc;
	margin-bottom: -2.714em;
	padding: 0.714em 0.714em 2.714em 0.714em;
}

.custom .photo_center small a img {
	background: transparent;
	border: none;
	margin: 0;
	padding: 0;
}

.custom .photo_center small a, .custom .photo_left small a, .custom .photo_right small a {
	color: inherit;
	text-decoration: none;
}

That’s it! Now you can simply use Photo Dropper. When you do, you’ll see it insert HTML code that looks similar to this:

<div class=photo_right><a title="Photo Title" href="http://www.flickr.com/photos/..." target="_blank"><img src="http://farm2.static.flickr.com/..." border="0" alt="Alternate" /></a> <small><a title="Attribution License" href="http://creativecommons.org/licenses/by/2.0/" target="_blank"><img src="http://www.thesistheme.org/wp-content/plugins/photo-dropper/images/cc.png" border="0" alt="Creative Commons License" width="16" height="16" align="absmiddle" /></a> <a href="http://www.photodropper.com/photos/" target="_blank">photo</a> credit: <a title="Owner" href="http://www.flickr.com/photos/..." target="_blank">Photographer</a></small></div>

We’ve got the default set up to use the “photo_right” class, which floats the photo to the right of the text, but you can easily change that on a case-by-case basis to use the “photo_left” class if you want to float the photo to the left.

Photo Dropper Before And After

The easiest way to understand everything that the custom CSS code is providing is to show a dropped-in photo without any formatting, and the same photo using our customizations. Here is a picture of a green leaf, dropped in using the defaults provided by Photo Dropper.

photo credit: Krassy Can Do It
Notice how the text doesn’t flow around the image, the anchor links are rather prominent, and there’s no frame around the image. It just doesn’t look like it fits in.

photo credit: Krassy Can Do It

And here is the same photograph with our custom styles applied. Notice how the entire thing, image, links and all, are placed within a nice, subtle frame. And our text is flowing around the image, which is floating to the right. Even the credit line floats to the right.

And the credit line, while still containing links back to the owner of the photograph, is a nice subtle shade of gray so that our readers can focus on our content and not be overly distracted by the photos. The photos are meant to support our content, not lead readers off to play with Flickr for the rest of the day.

So that’s it! Now all you Thesis bloggers can go forth and Flickr with Photo Dropper. And if you like these tips, please leave me a comment and/or subscribe to the RSS feed so you don’t miss out on any.