Automagisk blog

I use Lightroom’s built-in web template for maintaining my portfolio on automagisk.no. The management of the portfolio can be one entirely from within Lightroom, which is very nice. Updating the website can be done with a button: Lightroom automatically transfers and updates both images, HTML pages and CSS.

There are lots of image gallery software available, but I want my portfolio to be very easy to maintain, and I do not want to re-type the captions, etc that I already have in Lightroom. Also: I want the portfolio to be in HTML so it can be searched and bookmarked, not in Flash, Silverlight or something similar.

The only thing I am missing from Lightroom’s Web module is the option to add Google Analytics code to the web pages. I use Google Analytics to logs all traffic data on my blog (the one you are reading now), and I want to log traffic from the portfolio in the same way.

Although Lightroom does not allow you to enter the Google Analytics code, you can edit the HTML templates that Lightroom uses for generating the web pages. It does require a little hacking, but it is not difficult.

One of Google Analytics’ many features: Visitor map.

To do this, you will need:

• A Google account (create one here)
• A Google Analytics account (sign up here)
• Some basic UNIX skills, or a little courage.

Warning

There is one small, but annoying side-effect of this: Every time you go to the Web module in Lightroom, it will open up the Google Analytics JavaScript file http://www.google-analytics.com/ga.js in a web browser. I do not know why, or how to avoid it. It doesn’t do any harm, so I think it is worth it.

Also: You are responsible for everything you do, so even though I have done this and it worked perfectly for me, do not blame me if it for some reason doesn’t work for you.

Editing the Lightroom web templates

Here are the step-by-step instructions on how to add Google Analytics JavaScript to the default HTML web template on Apple Mac OS X (if you know how to do this on Microsoft Windows, please use the comment form below):

1. Start the Terminal app. It opens up a UNIX command window.
2. Change to the directory of the default HTML template (this can be done in one step, but the line would be very long, so I split it into three commands): cd "/Applications/Adobe Lightroom 2.app/Contents/PlugIns/" cd Web.lrmodule/Contents/Resources/cd galleries/default_html.lrwebengineIt is not posible to change to this directory using Finder, because it hides all the contents of the “Lightroom 2. app” (it is a directory, not a file).
3. The Google Analytics JavaScript code will be placed in the file foot.html, which is being used when creating all the HTML files. Just to be sure: Make a backup of that file: cp foot.html foot.original
4. Now it’s time to edit “foot.html” and add the Google Analytics JavaScript code. You can use any text editor for this, but some will not allow you to open files “inside” the “Lightroom 2.app” directory, as it regards “Lightroom.app” as a file. I prefer the emacs editor (automatically installed with Mac OS X, emacs cheat sheet here), which is started with the command emacs foot.html
5. Scroll to the end of the file, and add your Google Analytics code right above the line with “</body>” (you must replace “UAXXXXXXX-X” with your Google Analytics id, of course):
   <script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-XXXXXXX-X");
pageTracker._trackPageview();
} catch(err) {}</script>
6. Save the file: Ctrl-x Ctrl-s
7. Exit emacs: Ctrl-x Ctrl-c
8. Start Lightroom
9. Select some images
10. Go to the Web module and create a web gallery using the “HTML Gallery (default)” template from the Template Browser on the left-hand side. This makes sure that we are using the HTML templates that have just been updated.
11. Change colors and other web template settings as you want to.
12. Click the “Export…” button to save the generated HTML pages somewhere on your drive.
13. Open the newly generated “index.html” file in your web browser and check that the page looks as it should.
14. View the source, and verify that the Google Analytics code is present near the end of the HTML source.
15. Upload all the generated files to your web server.
16. Pat yourself on the back!

You can log in to Google Analytics right away, but it will take a while (a day, maybe?) before any traffic data will be available.

Was this useful? Please let me know in the comments – thanks!

Possibly related posts

1. Backup of images, Lightroom catalog and other things using RAID, rsync, etc When image archives consisted of albums with negatives or cassettes with slides, having a good archiving system was crucial, otherwise it would be very difficult to find anything. With digital...
2. Adobe Photoshop Lightroom: Workflow and tips I use Adobe Photoshop Lightroom for almost everything I do with my images: Import files from CF cards File renaming and directory building Adding metadata and default settings to...
3. Lightroom develop preset for Nikon D300 Adobe provides some good camera calibration presets for Lightroom (included in Lightroom 2.3), but you may want to tweak them some more. I have spent a lot of time tuning...
4. Time-lapse with D300, Lightroom and Final Cut Express Time-lapse of about 1500 RAW images taken between 22:00 and 01:00 on E6 between Skedsmokorset and Kløfta on a freezing November night. Tommy Johansen in Veidekke contacted me last...