April 10, 2007
Adding a navigation menu to Lightroom Flash Gallery.
Currently in Lightroom it is possible to add a single Web or Mail link in the Flash Gallery. For a Mail link you put the Link name in the ‘Contact Info’ box and use ‘mailto:youremail@yourdomain.com’ in the ‘Web or Mail Link’ box. For a Web link, simply put the http link in this box instead, e.g. put http://lightroom-news.com into the ‘Web or Mail Link’ box.
This gives a very basic link to get back to the home page. Personally I’d prefer a way to allow visitors to get to other areas on my site from here. As it wasn’t immediately obvious how to do this, I had to dig around a little. Presented here for you is the fruit of my efforts:
The first thing I tried was entering a series of href items into the Link section, but this didn’t work for me. Next I tried hrefs in the Contact Info box instead and viola, I got a small menu working. The key here was to make sure the “Web or Mail Link’ box was empty. I discovered then that there was a 150 character limit in the code that prevented long menus. This prompted me to discover how to change the code to make a longer menu.
On Mac Right click on the Adobe Lightroom.app Icon (or Ctrl Click on a 1 button mouse) and select ‘Show Package Contents’. Open the Contents folder and then open Plugins. Inside Plugins Right Click on Web.agmodule and ‘Show Package Contents’. Navigate to Resources/galleries/bluefire_gallery from there.
(Editor’s Note: you’ll notice that if you edit the application “Package”, you are actually altering the application. You should do this only on a copy of the Lightroom application in the event you want to revert to Lightroom original state.)
Open the file galleryMaker.xml with a text (or HTML) editor and go to line 451 where you will see the following code:
<mx:TextInput ag:maximumLength=’150‘ ag:resizeToFitTextHeight=”true” id=”contactInfoName” ag:layout=”text_color=AgPanel.bright_text_color,”/>
Change the 150 to 250 or 300 and save.
PC users can open Web.agmodule with a free resource editor such as XN Resource Editor. Run this program and navigate to the bluefire_gallery to edit it.
Open Lightroom and select the Lightroom Flash Gallery. Go to the ‘Contact Info’ box and enter a series of html links. Make sure the ‘Web or Mail Link’ box is empty also.
You can see mine in the screen capture here. As the content page is down a folder level I’ve included a call to go up a level in each link e.g. <a href=”../index.html”>. If you have galleries down lower in the site (eg inside a galleries folder), then you need to call back up higher e.g. <a href=”../../index.html”> and so on depending how deep the gallery lies on the site.
To see an example of this in operation you can view the gallery I created when making this tutorial. Enjoy!
Update: As my Editor has pointed out, this is indeed altering the application. For those who are a little less adventurous, you can copy this gallery into the Lightroom Web Gallery folder. On Mac it’s located at USER/Library/Application Support/Adobe/Lightroom/Web Galleries, where USER is your login name. On PC it’s located at C:\Documents and Settings\USER\Application Data\Adobe\Lightroom\Web Galleries (again where USER is your login name). Please note, Application Data is a hidden folder, so make sure you set hidden files to visible. Also for both Mac and PC the folder Web Galleries must be created by the user initially.
Once you’ve copied the bluefire_gallery into this folder, you need to make other changes to galleryMaker.xml to allow Lightroom to see it.
On line 7 we see this code:
<galleryName>$$$/WPG/Templates/Flash/Bluefire1=Lightroom Flash Gallery</galleryName>
Change Lightroom Flash Gallery to a name of your choosing. This is the name that appears in the Gallery pane in Web.
Finally on Line 23 we see:
<identifier>com.adobe.wpg.flash.bluefire1</identifier>
Change com.adobe.wpg.flash.bluefire1 to something of your own choosing. This is the internal identifier to allow Lightroom to see it as a different Gallery to Lightroom Flash Gallery.
Restart Lightroom and your new gallery is now visible. Again enjoy!
Further Update: Thanks to Micah Bowers from Bluefire, who has looked into the PC problem listed in the comments. The issue seem to be in the way the PC escapes the < and > characters, causing them to appear as text rather than as actual links. The most likely reason is to prevent the gallery hanging when a tag is unfinished.
The solution to this is only on a gallery by gallery basis, unfortunately. In your exported gallery go to the resources\mediaGroupData folder and open the group.xml in a text editor. On line 15 there is a <contactName></contactName> tag. Between the tags is what gets put in the gallery as Contact Info, so copy and paste the text from the Contact Info in Lightroom. Save the file. Go back up to the main gallery folder and double click on the index.html to view the changes.
Great tip, thanks a lot. But to keep the galleries even closer to the way navigation works elsewhere on my website, I’d greatly prefer a flash gallery that could be put inside a standard (x)html page, like a YouTube movie. Just the gallery and the filmstrip. Does somebody know how to achieve this? That would be great!
On a PC I have tried it both as the adventurous and non adventurous modes. I can get the simple menu to appear inside LR, but on export it only shows up as a text string Home | Home2
Any help would be appreciated
Lets try this again. it shows up as a text string
rather “
same with me. i cannot get it to show anything other than a text string. i really would like to be able to use menu buttons as shown in your website.
HELP!!!!
I’ll need to look into this further as I’ve currently no PC access.
Does it show as text when you ‘Preview In Browser’?
Yes. It does. Have tried every variation I can think of, and still nothing but the text string shows up.
Can you post a screen capture of the code? Shift Command 4 will give you cross hairs to drag over an area.
Upload it to an image host like Flickr.com and post the link.
http://farm1.static.flickr.com/205/479946279_7b0d4c7e44_o.jpg
http://farm1.static.flickr.com/190/479946281_2be487ea87_o.jpg
Exact same problem on PC. Displays the text only. Also when you insert http://www.mellammers.net as a web link, the text is shown but not as a link. So it is probably a LR bug, not a XHTML code problem. I am submitting a bug report to Adobe
Mel
In case people think I’m ignoring this, I’m actually looking into this at the moment. It may actually be related to the Flash version on the computer, but I need to check this. I’m able to get iraklys menu to work on my machine, but my Boot Camp partition gives the same issue PC users here are seeing. I’m in touch with Adobe enginneering and they say it should parse the same on PC and Mac.
Sean,
thanks for the great site.
You said: … you can copy this gallery into the Lightroom Web Gallery folder.
My question is: what gallery?? where can I download the gallery??
Thanks
Randy
Randy, I referring to the bluefire_gallery you find inside Web.agmodule when you Show Package Contents or look with a resource editor such as the XN editor mentioned above.
I’m still trying to find out about the PC issues some are seeing.
Hi
I have tried this on a mac with the same result as the pc above - it shows up as text. I would be very interested in a solution. Also is there a way to have the slide show running by default?
-Stuart
stublock, update your Flash player and restart Lightroom. Irakly had it working on my last email contact with him.
Thanks
I just went to CS3 (includes flash) so I will try again.
-Stuart
any updates on this?, as I would like to get creative on my PC, and need to know how to get the links working
To be honest, I don’t understand Lightroom being released without such an obvious and necessary linking system built in. All websites need to be able to link to other pages, so not including it is just mad. Photoshop is just the same. I don’t understand the thinking behind such a decision.
None so far. I haven’t been able to get clarification on this.
Bear in mind that we are at version 1.0 here. There’s LOTS of stuff that could be added.
Have you tried the new templates that are being created by Matthew over at http://www.theturninggate.com
He has a Slimbox and a SimpleViewer gallery that you could modify and add links to.
Myself and Matt at http://www.theturninggate.com have been working on some new templates for everyone. Matt has some great one out already as Sean mentioned. We are also working on some cross browser/platform bugs we have found. Check out either http://www.lightroomgalleries.com or Matts site above. We will be posting more templates, tips, tricks, and info
any update on this, ie maybe an update to Lightroom to include this?
Truro,
Still looking into this. There’s a lot of people busy now and I’m awaiting answers. Re Updates of any kind: Even if I knew I’m not allowed talk about it.
I have been poking around looking for the bluefire_gallery using the XN Resource Editor in my PC, but can’t find it. Can someone point me to its location? Its probably obvious but I can’t locate it. thx
It’s not as easy as on the Mac, basically XN splits the resources in to file type, so you need to search each file type for a bluefire_gallery listing. You then need to copy these files out in the same directory listing as they appear inside the resource.
Here is the directory listing from the Mac:
bluefire_gallery/gallery.xml
bluefire_gallery/galleryMaker.xml
bluefire_gallery/index.html
bluefire_gallery/resources/gallery.swf
bluefire_gallery/resources/iconic_preview.swf
bluefire_gallery/resources/javascript/AC_RunActiveContent.js
bluefire_gallery/resources/localisation/localText.xml
bluefire_gallery/resources/playerProductInstall.swf
bluefire_gallery/resources/version_info.png
bluefire_gallery/styles/blueStyle.xml
bluefire_gallery/styles/greenStyle.xml
Even after this, you may encounter the issue others are seeing in the comments.
this is what I’ve found:
Open file under the XN Resource editor (select anyfile (*.*) under “files of type” to see all the files in the folder.
path: C:\Program Files\Adobe\Adobe Photoshop Lightroom
Pick the file called: WebModule
a bunch of folders show up (CSS, JS, XML, etc) opening any of these folders I see some of the files you listed. I don’t see a way of just coping and saving these to a new location. I’ve had to highlight the actual file content on the right pane and paste into notepad and save it under the corresponding file name. THere is got to be an easier way… sorry for the long post..I’ll follow this later when I get home.
I’m not on my PC partition currently, but if it’s not in the right click contextual menu, it’s in the menu bar. I’m afraid it isn’t any easier, unless they get posted on http://blogs.adobe.com/lightroomjournal
I’m hoping they will be.
‘bump’, any news?
Did you read the ‘further update’ in the post?
thanks for update. have tried everything i can think of, and still i get a blank space where i want the link to be
Do you know how I could do this in Lightroom 2 ? The file structure has changed re increasing the maximum field length. I also tried to change the ‘View’ menu but without success so far :o(
Genuinely, I’ve had no chance or time to look. I know it’s broken in V2.. It was a hack after all.