My earlier How To Use Photo Dropper With Thesis post covered this subject a while back. Specifically, I wrote about how to customize the output of Photo Dropper and combine it with some custom CSS to nicely integrate it into the Thesis Theme. That was a popular post and for the most part the technique still works today. But it needed some updating, and I got inspired when Simon Townley asked me the following question:
Hi Pat: If I understand correctly, this places the image within the post itself. I like to use the in-built Thesis image options (Post Image) because this makes delivering thumbnails with teasers nice and easy.
Is there any way to integrate PhotoDropper so it puts the image into the Thesis Post Image container?
After a bit of experimentation, I came up with the following solution, which I have used throughout this blog.
Thesis Post Image And Thumbnail
Since my earlier post about the Photo Dropper plugin, Thesis has added Post Image and Thumbnail options that provide some of the same functionality, at least for the main image for a post. At the same time, the Post Image option has some additional functionality that is quite useful. For instance, it makes it easy to change whether the image should be inside of a frame or not. It also lets you specify the Horizontal Position:
- flush left with no text wrap
- left with text wrap
- right with text wrap
- centered (no wrap)
As well as the Vertical Position:
- above headline
- below headline
- before post/page content
Even better, the Thesis Post Image option lets you change these values by simply selecting the option you want right below the blog post editor. No need to mess with custom CSS or any coding by hand. And you can alter these selections for each individual post. Even better, if the image is hosted on your own domain then Thesis will supply a thumbnail for use in teasers and any other place where the full-size image cannot be displayed.
What Does Photo Dropper Have To Offer?
With all the benefits of the Thesis Post Image, you might be wondering why someone might still be interested in Photo Dropper. And the answer is that Photo Dropper still gives you an easy way to find images on Flickr that you can use on WordPress. So now the question is how can we combine the best of Photo Dropper with the Post Image capability of Thesis?
In short, the best I was able to come up with is a bit of a hack. It takes a couple of steps to make it work, so it could be better. But it isn’t the worst thing in the world and the results are worth the little bit of extra effort. Here is what I do.
First I write my post, such as this one. Then, at the end of the post, I insert an image using Photo Dropper to query Flickr. (I tend to use the medium sized images which will eventually be aligned to the right with text wrapping turned on.) Then I switch to the HTML view of my post so I can change the code that Photo Dropper pastes in. For example, the original code for the image used in this post was the following:
<div class="photo_right"><a title="I captured the château de Tornac !" href="http://www.flickr.com/photos/45306251@N00/3313724853/" target="_blank"><img src="http://farm4.static.flickr.com/3164/3313724853_670f244743_m.jpg" border="0" alt="I captured the château de Tornac !" /></a> <small><a title="Attribution-NoDerivs License" href="http://creativecommons.org/licenses/by-nd/2.0/" target="_blank"><img src="http://www.thesistheme.org/blog/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="Anduze traveller" href="http://www.flickr.com/photos/45306251@N00/3313724853/" target="_blank">Anduze traveller</a></small></div>
From this I found the URL for the JPG file (http://farm4.static.flickr.com/3164/3313724853_670f244743_m.jpg), which I entered into my browser and then saved to a temporary directory on my computer. Then I uploaded the image file from my computer into WordPress. I then copied the link to the image in WordPress (http://www.thesistheme.org/blog/wp-content/uploads/2010/03/3313724853_670f244743_m.jpg) so I could paste it into the Thesis Post Image URL field. Then I remove the image from the code that Photo Dropper inserted so that it looks like the following:
<div class="photo_right"><small><a title="Attribution-NoDerivs License" href="http://creativecommons.org/licenses/by-nd/2.0/" target="_blank"><img src="http://www.thesistheme.org/blog/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="Anduze traveller" href="http://www.flickr.com/photos/45306251@N00/3313724853/" target="_blank">Anduze traveller</a></small></div>
The reason for all of these steps is this. If you want Thesis to generate thumbnails for use in teasers and elsewhere, then you have to have the image hosted on your website, not on Flickr. So we need to get the image off of Flickr, onto our own personal computer (temporarily), and then uploaded into WordPress. And since we are letting Thesis display the image, then the only thing we need left from Photo Dropper is the credit for the photographer who took the picture, which I have decided to display at the bottom of the post.
I hope that makes sense. It’s pretty easy to get the hang of once you do it a time or two. And it’s the easiest way I know of to leverage the terrific photos available on Flickr and combine them with the awesomeness of Thesis to add color and flair to your blog posts. Let me know what you think.
{ 7 comments… read them below or add one }
Thanks Pat, I knew you could do it. It’s a shame there’s no way to automate this, but at least it works. It would be so nice if there was a plugin that helped you find the picture and then simply added it your library, putting the photo credit information in the right place. But that’s asking a lot, I know.
Now, for your next assignment…..
I too put my photo credits at the end of the post, but only because I can’t work out how to put them next to or under the photo itself. WordPress has a caption entry box, but this never seems to appear.
Do you know how to put credits by the photos?
BTW, I’m always amazed that blog platforms pay so little heed to need for photo captions. It’s not just for the credits. Every great photo deserves a pithy caption to go with it, in my view.
You could add attribution to the Post Image using the custom coding identified in this support answer: http://diythemes.com/answers/add-post-image-attribution/. But that’s even more steps because now you have to create a custom field on each post. It’s probably the way to go if you absolutely needed to have this feature, but I’d be happier if Thesis had something built in that handled attribution and links to the original photo on Flickr.
How do you move the photo credit from the bottom of the image to the end of the post with photo dropper? I assume you do it somehow automatically..? Or do you do it manually every time you add an image?
@MP – I get the credit at the end of the post because that is where I am dropping in the photo in the first place. If you follow my instructions you will see what I mean. You can move the credit wherever you want. So if you drop the photo somewhere else, just cut and paste the credit to the end of your post.
Hope that helps.
I’ve installed photo dropper 1.08 on wordpress 3.01.
I love the idea and the time it saves, but have lost the ability to add captions under the images. I can click on the image and add a caption, but when ‘update’d, the caption is not added to the page.
Any ideas or thoughts on how to fix this?
Thanks, Chris
I’m not sure, Chris. I haven’t updated to Thesis 1.8 yet on my WordPress 3.01 sites so I haven’t run into this issue.
Hi Patrick,
I recently implemented your method on my new cell phone blog and it worked flawlessly! I left the photo credit code at the top of my posts so that the credit would appear directly below the photos hosted on my site.
I did have to apply a negative margin to the div I put around the photo credit code, but you would never know what was going on in the background based on the final visual result.
Thanks for the great information!