I use Shutter Reloaded as my Lightbox-esque WordPress plugin of choice for enlarging images. To work though, it requires a link to an image. The very useful Twivatar application for pulling live Twitter avatars however, uses a non-image link. Here's how I got them to work together.

The Background

I recently added in a landing page for Twitter and decided to include all of my Twitter accounts on there. A targeted landing page means you can provide the right information to the expected audience - if they've found that page via my Twitter profile, then they might also be interested in the other accounts I run.

To make it a little more interesting, I decided to add in the Twitter avatars too. Now, Twitter itself doesn't make it easy to pull out the live image for an account - there's no standard URL, as it keeps the filename as whatever it was when the user uploaded it. While I could have cheated and just made copies of each avatar and hosted them here, then whenever an avatar changed, my version here would be out of date.

Up step Twivatar, a single script application whose sole existence (thanks to @rem) is to provide that crucial standard URL for the current avatar of a Twitter account. For the GaryJ Twitter account, we simply use:

<img src="http://twivatar.org/gary" alt="GaryJ Twitter Avatar" />

Easy.

Displaying The Original

On the rest of the this site, I use Shutter Reloaded, so that when users click on a thumbnail image, the larger ones pops up. For this to work though, we need to make the image into an anchor, with the link pointing at the original large image, add a title to the link (that acts as a caption on the enlarged image), and, depending on your Shutter Reloaded settings, also add a class="shutterset" so that each of the Twitter avatars could be cycled through without having to close the enlargement each time. For Twivatar, we can just append the word original to our image:

<a href="http://twivatar.org/garyj/original" title="GaryJ" class="shutterset"><img src="http://twivatar.com/garyj" alt="GaryJ Twitter Avatar" /></a>

Now, the problem is that Shutter Reloaded needs a link to the actual image, and digging into the plugin code, I saw that it specifically needed a link with either .jpg, .gif, .png or jpeg as the last 4 characters of the link. I first tried:

<a href="http://twivatar.org/garyj/original<strong>?.jpg</strong>" title="GaryJ" class="shutterset"><img src="http://twivatar.com/garyj" alt="GaryJ Twitter Avatar" /></a>

but the plugin code specifically looks for a question mark, and checks the last 4 characters before the querystring starts.

The Solution

<a href="http://twivatar.org/garyj/original<strong>#.jpg</strong>" title="GaryJ" class="shutterset"><img src="http://twivatar.com/garyj" alt="GaryJ Twitter Avatar" /></a>

Twivatar, just strips this URL fragment, pulls the image from Twitter, and appends it back on the end, which in this case, does nothing to affect the display of the image itself.

Conclusion

Appending #.jpg (or #.gif, #.png or #jpeg) to the end of the the Twivatar link persuades Shutter Reloaded to work as expected. This technique, although very simple, would also be likely to work in similar situations. You can see a live demo on my landing page for Twitter.