I was asked by a reader (Andrew M.) how I display the most recent photos from my SmugMug galleries on my home page. He was aware that I use the SimplePie plugin for WordPress, but wasn’t sure how to get the same look when starting from scratch.

Before you read any further, keep in mind this is a very specific tutorial about WordPress, SimplePie and SmugMug. It has other applications, like for other image feeds and with some code tweaking, for other blogging platforms, but if you want to do those things, then Google is your friend.

The thing that makes things a little complicated in my situation (as opposed to other image feeds) is the somewhat non-standard structure of the SmugMug feeds. For one thing, they don’t provide a URL for the image thumbnail where you’d expect it to be, and for another, they provide the image description instead of the image title. (To check this, mouse over a SmugMug thumbnail, and you’ll see the description pop up over the image.) But as long as you’re willing to dig into the feed code and find the names for the fields you need, then you can plug that info into SimplePie and go from there. Thankfully, I’ll do it for for you below. Lucky you.

Just a quick general disclaimer before I start though: I don’t do handholding. I’ll provide the instructions for how I did it. But in the unlikely event that things still don’t make sense to you, do me a big favor and read the SimplePie Manual, before you ask me questions. I did it and it helped me work things out. It should do the same for you if you use a little elbow grease. Thanks.

Okay, onto step 1: find the SmugMug feed URI. SmugMug provides several feeds for each user account. Go to the bottom of your gallery page and click on the Available Feeds link to see all of them. We’re going to use the Recent Photos Atom feed. In my case, it is:

http://www.raoulpopphotography.com/hack/feed.mg?Type=nicknameRecentPhotos&Data=raoulpop&format=atom10

Step 2 is creating an Images Only template for SimplePie. If you’re not sure what this is, you need to read through the SimplePie documentation. The location where you need to place the new template is:

[WP Install]/wp-content/plugins/simplepie-plugin-for-wordpress/templates/

This is not arcane info, btw. It’s provided in right on the SimplePie general settings page, which is what I’ll talk about in Step 3 below. Now let’s talk about what you’ll put in the template file. This is where the digging through the feed code part comes in. I kept things simple, and this is what my images_only.tmpl file looks like.

As you can see, the code is minimal, which is the way I like things. I am specifying a simplepie class in the code, but as you can see from my CSS file, I’m not styling the div in any way. I’m letting the rest of the CSS code and the other divs handle the way the images flow within this particular section.

Step 3 is adjusting the general settings for SimplePie. Now that we’ve created an Images Only template, we need to let SimplePie know that it should use it. Go to the WP Admin Panel and locate the SimplePie settings. Match my settings as you see them below.

I’m telling it to pull the latest 18 photos. You may find you need to pull less or more. It’s really up to you. Use the caching option, it’s faster, but know that you’ll need to create a cache directory where SimplePie can store the images. It’ll walk you through it when you say Yes, and you may need to adjust privileges on the server side. Check out this chmod tutorial from WordPress if you’re not sure how to do that.

Step 4 is placing a code snippet on the home page. Now that you’ve gone through all that fun, you’ve got to wrap things up. Go to your home page template in WordPress, and where you want the images to appear, place the following code snippet — it’s what triggers SimplePie to pull your SmugMug photos feed and display the feed items how you want them, in accordance with the code in your Images Only template.

See the highlighted text, but you only need to worry about the php code line. The rest is my own code that specifies the div and section styles. Use your judgment about how to style the thumbnails, and how you want them to display. It may take a bit of trial and error until you get it right, but if you persist, it’ll look good in the end.

Hope this helps!