There’s a cute little [TextMate][TextMate] bundle called [FlickrMate][FlickrMate]. It might just get me to post a few [more][p1] [pictures][p2] to this here blog. But it’s just short of perfect for my purposes. I want to integrate the handy [lightbox][lightbox] plugin to the FlickrMate output. That’s easy - assuming you’ve already incorporated lightbox into your blog. A WordPress blog, [for instance][wp-lightbox]. Oh, I’m also assuming you’ve already installed FlickrMate.

To add some lightbox-fu to the FlickrMate bundle, open the bundle editor (Bundles | Bundle Editor | Show Bundle Editor). You will probably wish to modify the HTML output for three FlickrMate commands: Flickr Text Search, Flickr Tag Search, and Browse Your Flickr Photos. To see the command code for these commands, simply pop open the FlickrMate bundle:

Flickrmate 1

Editing a command is as easy as selecting a command and modifying the command code presented. I’m sure I should tell you to back things up and all that. For each of the commands I mention above, you’ll want to scroll to the bottom of the command code and look for the following bit:

if linkurl
  print %Q{<a href="#{linkurl}" title="#{description}">
  	   <img src="#{url}" width="#{width}" height="#{height}" alt="#{title}" /></a>}
else
  print %Q{<img src="#{url}" width="#{width}" height="#{height}" alt="#{title}" />}
end

This is really simple. I shouldn’t even be typing this. To bring lightbox into the fold, just add the required rel="lightbox" to the anchor tag in the if linkurl portion of the code.

if linkurl
  print %Q{<a href="#{linkurl}" title="#{description}" rel="lightbox">
  	   <img src="#{url}" width="#{width}" height="#{height}" alt="#{title}" /></a>}
else
  print %Q{<img src="#{url}" width="#{width}" height="#{height}" alt="#{title}" />}
end

Jun 07, 2007 · Subscribe · Archive · Projects · Twitter · GitHub · Flickr