The Turning Gate

Creating a Photoblog with LR, Flickr and MSS

FlickrMSS Setup Tutorial

For many, myself included, Adobe Lightroom has been a revolutionary step forward for the photographic workflow. My photo library is (finally) organized, interfaces directly with my photo processing routine, and can be used forthwith to generate web photo galleries. Despite all this fantasticness, however, a single niggle has persisted to annoy me, the singular niche in my armor, the one task Lightroom had failed to address: my photoblog.

So much for my perfectly cohesive, wholly encompassing photographic workflow ... Or so I'd thought.

Utilizing a handful of third party applications and services, a Lightroom empowered blog can be a reality after all. The setup is long-winded, but straight-forward. Do not be daunted; read on.

Take Aim

By the end of this tutorial, your photoblog should:

• Update from a Lightroom Export preset.
• Be maintained from within Flickr.
• Display on your website via MonoSlideshow.
• Allow users to click through to images on Flickr to post comments.

And it should function something like this.

Podcast

Download Podcast Demonstration | Adobe Forum Thread

What You'll Need

Setup has several requirements, some of which must be purchased. Below is a list of what you'll need and what it will cost you.

• A Flickr account (free / $24.95)
• Adobe Lightroom ($299)
• Jeffrey Friedl's LR Export Plugin for Flickr (free)
• FlickrMSS ($1.99)
• MonoSlideshow ($19.95)

Flickr offers free service with a limited feature set. I advise trying them out and, if you like how this works, buying into the enhanced feature set. Your blog will benefit, especially from the increased storage space provided by a Flickr Pro account.

For the sake of discussion and increased understanding, we can divide these components into three categories.

The Input: Lightroom

The Glue: Export Plugin, Flickr

The Output: FlickrMSS, MonoSlideshow

As the input, Lightroom is the source from which photos begin.

The export plugin and Flickr are the glue that binds this process and the involved applications and services together. As an alternative, users might want to use PictureSync instead of Jeffrey Friedl's export plugin (see below).

For output, the combination of MonoSlideshow/FlickrMSS can be exchanged for a SlideShowPro/FlickrSSP combo.

This article will assume the use of Lightroom as input and MonoSlideshow as output.

PictureSync, the Export Alternative

PictureSync is a convenient utility that simplifies annotating and batch uploading your photographs and video clips to online services—directly from your albums in image-management applications, or files, and whilst preserving metadata. - PictureSync

PictureSync offers an alternative for both The Input and The Glue. Used with Lightroom, PictureSync can be activated via an export plugin. With PictureSync as The Glue, however, users may substitute LR with any image-managing application supported by PictureSync, including Aperture, iPhoto, iView MediaPro, drag-and-drop methods, and more.

At the time of this writing, PictureSync 1.8 is available for the Mac, while the Windows version is an Alpha release.

For the purposes of this tutorial, Lightroom users are recommended to simply use Jeffrey Friedl's export plugin. For those wishing to use PictureSync, however, I include information on this below.

Setup

1. Setup your Flickr account

If you don't already have a Flickr account, you'll want to begin by setting one up. Register for an account at www.Flickr.com. With a Flickr account in place, you don't need to do anything else just yet, so let's move on.

2. Install Adobe Lightroom

If you're reading this article, odds are good this is already done. From this point on, we'll assume Lightroom to be installed with an existing photo library.

3a. Install Jeffrey Friedl's LR Export Plugin for Flickr

Download and install Jeffrey Friedl's LR Export Plugin for Flickr. Installation instructions can be found on the plugin download page.

Alternatively, install PictureSync if you'd rather use that. The installation process should alert you to the fact that it is automatically adding an Export preset to Lightroom. This is a good thing; smile and be happy.

3b. PictureSync meets Flickr

If you're not using PictureSync, skip to number 4.

Within PictureSync, access the Window menu and select Accounts, or just use the shortcut, Cmd-2. Add your Flickr account and let the application guide you through the authorization process that will allow it to communicate with your Flickr account.

Once your Flickr account has been added and authorized, access the Preferences menu. Under Behavior, set the default button to “Upload To”. Save changes. Access the Window menu and select Rules, or use the Cmd-3 shortcut. Activate the rule “Swap Title/Object (Save for Lightroom)”. If you're running the free version of PictureSync, you'll be limited to three active rules, in which case you should disable “Remove AppleMark” in order to enable this rule.

For the time being, you may now close PictureSync.

4. Create your MonoSlideshow gallery

Get MonoSlideshow (MSS). At this point, images are unimportant. What you'll want to focus on now is putting together your gallery preferences and appearance. You can go about this in one of three ways.

The most time-consuming and tedious method would be to open the MSS manual in a window, your text editor in the other and write your XML file by hand. Better ideas would be to generate a gallery using my TTG MonoSlideshow Gallery, or to generate a set of preferences using the MonoSlideshow online demo, which allows you to download your created settings as an XML file.

5. Implement FlickrMSS into your MSS gallery

Bust open your piggy bank and purchase a copy of FlickrMSS. The readme file contains installation instructions, but they're poorly written.

First, copy your monoslideshow.swf, index.html and swfobject.js files from your MSS gallery into the FlickrMSS directory. DO NOT copy the monoslideshow.xml file.

Next, open the monoslideshow.xml file that's in your MSS gallery. Copy the preferences settings and nothing else; that is, copy the preferences opening and closing tags, and the settings between them. Go to the FlickrMSS directory, open the file monoslideshow-preferences.txt and paste your preferences inside.

Open the flickrmss.php file and fill in your Flickr username on line 17. Get a Flickr API key and fill it into line 22.

Open your index.html file and set it up to load a custom .XML file, as described in the MSS manual. Basically, you'll need to add the line so.addVariable("dataFile", "flickrmss.php"); to the javascript call, directly above the so.write line.

Finally, upload the gallery along with the FlickrMSS files to your web server. Set the monoslideshow.xml file (the empty one that comes with FlickrMSS) and the cache directory to writeable (chmod 777).

Make it go

The pieces are now all in place and it's time to add photos to your new photoblog.

Podcast Demonstration

I've recorded a screencast demonstrating how the photoblog should work, but recorded the video in the days before Lightroom supported export plugins. For this reason, the podcast shows the blog using PictureSync instead of Jeffrey Friedl's export plugin, which is newer. Download Podcast Demonstration

Moving Right Along

Open Lightroom, select one or more photos. Access the File menu, and select Export. At the top of the Export window is the action being performed. By default, this is set to "Export Files to Disk". Click this and you'll be given a drop list from which to choose your export plugin. Select "Export To Your Flickr Account". Setup the plugin with your output preferences and Flickr account information; these settings will be saved for the next time you use the plugin.

Pay particular attention to the "Flickr: Add to Photoset" portion of the window. Select an album or create a new one by pressing the New button. DO NOT upload photos to your Photostream. Your MSS gallery will only display photos that are included in albums/sets in your Flickr account.

When you're ready to send your photos, click the Export button in the lower right of the Export window. Lightroom will display a progress indicator as it uploads your photos to Flickr. When finished, Flickr will launch in your browser, showing your new additions.

You may now access your MSS gallery using your web browser. You should find it displaying an album with the images you just uploaded. Welcome to your new photoblog.

To add additional photos, open Lightroom, select and export your images to Flickr.

Odds and Ends

Using the Cache Period to your advantage

The cache_period setting in the flickermss.php can lead to some confusion, especially while testing your new photoblog. By default, the cache period is set to 86,400 seconds, one day. To wit, your photoblog will only be updated once a day, regardless of how many changes you make between re-caching. During setup, you'll probably want to see your changes as you make them; to do that, open the flickermss.php file and set the cache period to 1.

I've found, however, that leaving the cache period set to 1 can cause problems later on. Once your photoblog reaches a certain number of images, FlickerMSS will begin to crash during cache, resulting in an error and a failure to load your slideshow. For this reason, when you've finished setting up your blog, be sure to reset the cache period to 86400.

If you ever want to force a re-cache of your slideshow before the usual time, you can easily do so using the cache period setting. Set the cache period to 1, save the change and then reload your slideshow. It might crash, but that's okay. Now, reset the cache period to 86400 and reload the slideshow again. The slideshow should run fine, and the cache will be updated, bringing your slideshow up-to-date with your most recent changes.

The Tao of Flickr

Notes on Flickr: For MSS to read images from your Flickr account, those images must be organized into Sets and must also be set as Public images. Images not assigned to a Set, or designated as Private will not appear in your MSS slideshow.

Newest image first

By default, new additions will be appended to the end of your set, and therefore to the end of your photo gallery. This is contrary to standard photoblogging practice, by which newest additions are usually displayed at the front.

Getting your most recent additions to the front of your gallery requires an extra step, but can most certainly be done. Login to your Flickr account and select Organize from the menu. Within the Organizr, select the Sets tab. Double-click the set you'd like to work with. Above the upper left corner of the photo thumbnails, you'll find the Arrange drop menu. Select your preferred organizational method, then click the Save button located lower left. You can also write an album description here that will be used in your MSS gallery.

Unfortunately, your Arrange preference is not applied to new photos on upload. Everytime you add new photos to an album, you will need to repeat any arrangement assignments.

Visitor Comments

Visitors to your blog can post comments to your photos by clicking on an image in your MSS gallery. They will be wisked away to the Flickr page for that image, where comments may be collected.

By default, the Flickr page will be loaded into the same window as your slideshow - goodbye slideshow! The code below, for enabling image descriptions, also allows links to be opened in a new window, so that visitors can continue browsing your slideshow after posting their comments.

Enable descriptions for individual photos

By default, FlickrMSS does not display image descriptions/captions. To enable both Title and Description for your images, open the flickr.class.php file located in the includes folder of FlickrMSS. Replace lines 140 and 141 with the following:

// Create XML tag for each image of the photoset
$photodesc = $f->photos_getInfo($photo['id']);
$xml .= "\t\t".'<img src="http://static.flickr.com/'.$photo['server'].'/'.$photo['id'].'_'.$photo['secret'].'.jpg" link="'.$this->config['photos_url'].$photo['id'].'" target="_blank" thumbnail="http://static.flickr.com/'.$photo['server'].'/'.$photo['id'].'_'.$photo['secret'].'_t.jpg" title="'.$photo['title'].'" description="'.$photodesc['description'].'" />'."
";

Eliminating Links

If you don't want your gallery to link back to Flickr (i.e. you don't want comments), open the flickr.class.php file located in the includes folder of FlickrMSS. Replace lines 140 and 141 with the following:

// Create XML tag for each image of the photoset
$xml .= "\t\t".'<img src="http://static.flickr.com/'.$photo['server'].'/'.$photo['id'].'_'.$photo['secret'].'.jpg" thumbnail="http://static.flickr.com/'.$photo['server'].'/'.$photo['id'].'_'.$photo['secret'].'_t.jpg" title="'.$photo['title'].'" description="'.$photodesc['description'].'" />'."
";

This code also includes the description modification above.

Show the big ones!

By default, FlickrMSS will display Flickr's medium sized renderings of your images, 500 pixels at the longest side. To show Flickr's large renditions (1024 pixels) instead, simply add _b to the image URL.

This code enabled descriptions, opens links in a new window, and displays Flickr's large-size rendering.

// Create XML tag for each image of the photoset
$photodesc = $f->photos_getInfo($photo['id']);
$xml .= "\t\t".'<img src="http://static.flickr.com/'.$photo['server'].'/'.$photo['id'].'_'.$photo['secret'].'_b.jpg" link="'.$this->config['photos_url'].$photo['id'].'" target="_blank" thumbnail="http://static.flickr.com/'.$photo['server'].'/'.$photo['id'].'_'.$photo['secret'].'_t.jpg" title="'.$photo['title'].'" description="'.$photodesc['description'].'" />'."
";

If you want your images to display larger than 500 pixels, but smaller than 1024 pixels, use the code for the large rendering and set MonoSlideshow's image scaling mode to Down Scale to Fit.

Show Flickr's Square Thumbnails

By default, FlickrMSS also grabs Flickr's ratio-faithful thumbnails. If you'd rather use Flickr's square thumbnails, locate the _t at the end of the thumbnail URL code, and replace the t with an s.

My Implementation

My own MSS photoblog is up an running in more-or-less final form. Have a look and click around to get a feel for this tutorial's end-product.

Coda

And there you have it, a Lightroom/PictureSync/Flickr/MonoSlideshow photoblog. Perhaps somewhat convoluted, but I hope useful. Please post any feedback, questions or related photoblog links in the comments.

And most of all, remember rule number five.

Send this article to a friend »

« Next Article | ... ... | Previous Article »