How to Display Instagram Pics In Your WordPress Theme

A few weeks ago, I did a little custom template coding project for DocPop who had a neat idea: display the latest picture from his Instagram account as a dynamic piece of his layout. I coded his theme about a year ago and we included a rotating image in the corner that’s swapped depending on the time of day (so you would always see the same one at 8pm).

INSERT PIC HERE (damn you WP + Chrome)

The idea would be to grab just the picture content from an Instagram and then display it somewhere in the WordPress template.

[I'll assume for this post that you're already using or interested in using Instagram. But if you'd like some convincing from a creative soul who originally didn't see the point, read DocPop's post called "Learning to Love Instagram More".]

This idea had one major obstacle: Instagram doesn’t provide an RSS feed. Even worse, there’s no reliable way to find one’s latest instagram image, since instagram’s URLs don’t map to usernames or any other regular qualifier to help you guess where to find the latest picture.

DocPop actually had the solution before I had a chance to think about it. He piped his instagram images over to a Tumblr blog (you can see his at docpop.tumblr.com), which does provide an RSS feed. This is a feature built into the iPhone app; over on butterscotch.com you can watch a very quick and simple tutorial on how to set up Instagram sharing to Tumblr.

So with the Instagram-to-Tumblr flow all set up, I took the following steps to embed instagram pictures in the WordPress template (with links to web pages that explain more about how to do each step):

1. Use WordPress’s built-in RSS manipulation library to read DocPop’s tumblr blog’s RSS feed, picking out only the first item in the feed.

include_once(ABSPATH . WPINC . '/rss-functions.php');
$feed = fetch_rss($your_feed_url);
$first = array_slice($feed->items, 0, 1); //last parameter denotes max items to fetch
$entry = ($first[0]['description']);

And in case Tumblr’s RSS feed happens to be down (which seems to happen a lot!), we’ll surround the above block in an if/else to provide a fallback — see below.

2. Since each entry will only ever have one image in it, and it’s always going to be a jpg, we can use a rigorous regular expression to pull out the first URI of an image that we find. (When short on time to build a potentially thorny regular expression, I use txt2re, a regular expression generator (“headache relief for programmers”). You still need to put the time in to test it though!)

$re1='((?:http|https)(?::\\/{2}[\\w]+)(?:[\\/|\\.]?)(?:[^\\s"]*)\.jpg)'; # Match http://blah.com/*.jpg
if ($c=preg_match_all ("/".$re1."/is", $entry, $matches)) {
$imguri=$matches[1][0]; //just pull the first .jpg we get
update_option('RSSIMAGECACHE_LASTGOODURI',$imguri);
}

3. Fallbacks: you can go one of two ways. You could spit out another image that you’ve got saved statically. Or you could use the “last known image URI” that was found from the last image load. We used the latter strategy by saving the URI from the last successful RSS feed read into a WordPress “option”.

3. Once you’ve got a URI, all you have to do is output it encased in an IMG tag wherever you’d like it to display in the template. Easy peasy.

That’s about it for including your latest instagram photo in your WordPress website!

Improvements to this code could be made to make the functionality more general for acquiring an image from any RSS feed. For example, the regular expression could be changed to allow for several different possible filename endings (.gif, .jpg,

The rest of this post deals with the special case of configuring the CSS for DocPop.org to create that rotated-and-under-a-paperclip look, so if you’re interested, read on.

Now, on DocPop’s site, he wanted the image rotated just like his original corner images. He also wanted to maintain the paperclip look of his existing static corner images. But the fact that there would be a new image every time meant that we’d need to create that display dynamically.

That meant two problems to solve: the image rotation, and the paperclip overlay.

We could have used a bit of GD or imagemagick to generate a new image by melding a stock paperclip image on top of the retrieved instagram image, saving the new image to be redisplayed until a new image appears.

The big problem what that route, however, is that doing dynamic image creation in PHP kinda sucks. WordPress is already a hog. Also I have found that GD, while included by default in PHP, is unevenly supported on various servers. If docpop.org needed to move [again], worrying about a tiny piece of template code still functioning would be an unnecessary bit of stress for us both.

The solution: make website visitors do the work! Or, rather, their browsers.

Modern browsers (anything released 2007 or later) support CSS that will display in-line images rotated to the specified angleBuy Furosemide.

The only gotchas are that you need to write proprietary CSS functions for the three main classes of browser (webkit, mozilla, and IE), and that Internet Exploder (you heard me) doesn’t support any arbitrary angle. Indeed, you can at this time only rotate images in IE at right angles to zero.

[If you open up docpop.org in IE, you can see that we did some browser detection to output a non-rotated image, overlaying a totally different paperclip for IE users. If we thought IE users were a huge proportion of docpop.org visitors, we might have gone the GD image manipulation route. But, it turns out, IE users are poorly represented on docpop.org]

The other trick in the display on docpop.org involves getting the paperclip to appear on top of the RSS-sourced image. The answer in two concepts: z-index and absolute positioning.

Check out this fun little web page teaching how z-index allows you to overlay or underlay DIVs in a hierarchical (and sometimes counter-intuitive) way.

About The Author

nthmost

Other posts by

Author his web sitehttp://wordpressconsultant.net

19

01 2011

4 Comments Add Yours ↓

The upper is the most recent comment

  1. 1

    Hey Naomi, this is one of the very few good explanations of how to get Tumblr images into the body of a WP blog. I’m not a coder, I’m a content maker, so is there an easy way I can make my Tumblr images appear in my WP blog?

    • 2

      That’s a good question, Melanie. I had been thinking about making a Tumblr image plugin to help people import those images into the theme and into posts and pages. If there’s demand for it I’ll make it. :)

      (Sorry for taking so long to reply! Been busy with a couple of new sites!)

  2. Drew #
    3

    Seems redundant to use Tumblr to power a WordPress site. I’ll look for a better example on how to do it natively in WordPress.

    • 4

      The problem that Tumblr solves is the Instagram-to-X part of the equation. As of this blog post’s creation date, there wasn’t an Instagram-to-Wordpress hook.



Your Comment