Embedding Lightroom galleries in WordPress posts and pages

Embedding Lightroom gallery

Those of you following this blog from the start will know that I had struggled initially to get multiple Lightroom albums and galleries to display correctly across multiple browsers.

If you go down the route of creating your own HTML page for your portfolio, and then linking to this from your WordPress blog, then you need to be incredibly careful about your HTML tags and your validation, as Firefox in particular will not display correctly if you have any errors there at all.

The good news is that there is an incredibly easy solution for users of WordPress, Adobe Lightroom and SlideShow Pro wishing to either create a post with a gallery/album in it, or a separate page. For example I created a page called Portfolio and then linked to this page from the menu, thereby embedding my portfolio in my blog’s look and feel. Simply install the free plug-in from Kimili, used to embed Flash objects.

1. Install the Plug-In
The first thing you need to do is to install the Kimili WordPress plug-in, which you can do simply by going to the “Add New” option in your Plugins panel within WordPress. Just search for Kimili Flash Embed plug-in. Don’t worry about the “might not work with WordPress2.8″ message. It seems to work just fine.

2. Create The Slideshow
In Lightroom, create the slideshow with which ever settings and dimensions you want, but if you are using the “wet floor”, when you write down the dimensions (you’ll need it later) then add a little bit. But don’t worry –  making a change later takes just a second, so you can tweak and adjust before you publish.

3. Upload the Slideshow
Upload the slideshow somewhere on your site. I prefer to keep all of my albums in a directory called /portfolio.

• Export your slideshow form Lightroom to a local folder on your MAC/PC. I called mine portfolio
• Upload with an FTP  or Dreamweaver this folder to your website. Its important that the loader.swf, js/ directory and all the files EXCEPT index.html get uploaded. So I now have a folder on my website called http://www.marcoryanphotography.com/portfolio.
• You can preview your gallery at this stage (although of course it is not embedded in the blog yet). Check mine out at http://www.marcoryanphotography.com/portfolio/loader.swf

4. Create The Post or the Page With The Slideshow

• Create the post or a new page as normal
• Switch to the Code editor (the HTML tab). Copy and Paste the following lines into your  page or post, remembering to modify the following lines with your website details and the folder where you uploaded your gallery AND being sure to take out the word REMOVE – I had to put that in otherwise WordPress would have tried to embed a gallery right into this post! Make sure that the text that begins kml_flashembed is right up against the square bracket, ie no spaces
• : [REMOVEkml_flashembed movie='/portfolio/loader.swf' height='500' width='500' base='.' allowfullscreen='true' wmode='transparent'/]
• You can use an absolute or a relative URL. On my website I chose an absolute URL, although above I have shown a relative URL.

That’s it. You can tweak the settings to fit a post (500 by 500 as above is good) or a full page wide (like my own portfolio). Now ensure you use Preview to check your post or page.

This entry was posted on Monday, October 26th, 2009 at 9:20 am. It is filed under Lightroom and tagged with Albums, galleries, Lightroom, Slideshow Pro, Wordpress. You can follow any responses to this entry through the RSS 2.0 feed.