Timothy Armes' blog

Life as I experience it…

 

“Elegance” – a new Web Engine for Lightroom 2

Following the redesign of my web site I became increasingly frustrated by the mediocre presentation of my image collections.  The final straw came a couple of weeks ago when I noticed that my site’s photos looked super-saturated on my wide-gamut monitor.  “That shouldn’t happen” I thought – both safari and firefox are colour managed.   It turns out that the Flash based gallery I was using was the cause of the problem, and although the latest version of Flash does support colour management, Lightroom can’t yet use this version.  My images weren’t be displayed correctly and there was nothing to be done about it.

So, I started to look around.  There is now an impressive array of web engines available for Lightroom, offering more and more advanced features, however it seemed that my particular – simplistic – needs weren’t to be met.

This is what I was looking for:

  • A simple and elegant design that would fit well with my site’s clean look.  I didn’t want navigation bars or indeed anything else that would make the galleries feel out of place.
  • A showcase for small collections of images, certainly no more than 30 at a time and probably less than 15.  No need for multiple pages – just an elegant presentation of each collection.
  • No Flash.
  • No Flash.

The last point is so important that I’ve repeated it twice.  I can’t abide Flash and I refused to have to use it again.  I have two big issues with it (aside from the colour management problem):

  1. The visitor has to have an appropriately up-to-date version installed to be able to visit a Flash-based site site.  I want my visitors to have an easy viewing experience, not an aggravating one.
  2. You can’t see Flash galleries on most mobile devices, including the iPhone.

I’d previously been obliged to use Flash due to the lack of a visually appealing HTML based web engine for Lightroom, but this time I was determined to find a better option.

Sadly, my search was in vain.

There was only one course of action left open to me – to write my own HTML gallery using Javascript for the “fancy” effects, and then struggle through the learning curve of creating a Web Engine for Lightroom that would generate the gallery.

In fact, I decided to go quite a few steps further.  I created my new web engine and then extended it far beyond my own needs, making  it highly configurable so that other people could benefit from it too.  This gallery is called Elegance and I’m making it donationware like I’ve done for all my Lightroom plugins.  You may download Elegance from the Photographer’s Toolbox.

You can see many examples by browsing my portfolio.   I’ve also created another look for The Bicycle as a sample.

If you use Elegance I’d love to see some results.

(Oh, and the cherry on the cake – not only are Elegance galleries viewable on the iPhone, they even support finger swiping gestures :) )

39 Responses to ““Elegance” – a new Web Engine for Lightroom 2”

  1. Donald says:

    Hello Timothy,

    big thanks, I’m really impressed. This looks a lot like what I have been looking for. What is missing* for me, is a simple, clean fullscreen option. Ideally it would have roughly the same look and functionality from the NY Times Lens** blog. Is there a way to accomplish this? Would you be willing to add this to a next version?

    Kind regards,

    Donald

    *) as far as I can see from here in the office with no access to Lightroom
    **) e.g. http://lens.blogs.nytimes.com/2009/09/02/pictures-57/

  2. Florent says:

    Great job as always

  3. Florent says:

    Une question dont la solution est peut-être complexe mais je la pose on ne sait jamais : serait possible de faire en sorte que la galerie générée fonctionne avec les photos hébergées sur Flickr ? Par ex si les photos ont déjà été exportées avec le plugin de J. Friedl, l’URL de l’image est connue partant de là y aurait-il un moyen ? On peut imaginer dans ce cas que ça fonctionne aussi avec tous les autres types d’hébergeurs d’images supportés par Jeffrey.

    J’avoue que pour ma part je serai plus qu’intéressé.

    Cordialement

  4. Steven says:

    It’s so weird. Believe it or not, I had the idea to write you today and ask if you would ever consider creating a web gallery for lightroom. Just today. No shit. Because of all the plugins I use in PS and Lightroom, Mogrify is absolutely the best for getting my pictures onto the web.

    Same exact reason too. My images looked like death warmed over after coming from lightroom thru SlideshowPro and they blamed it all on flash. Supersaturated, extra contrasty, way too red.

    So I too searched the entire internet (from top to bottom, short end to deep) for a decent, minimalist gallery, no flash, that let my photos shine.

    So yeah, to say I’m excited about trying the new gallery is an understatement. I haven’t even seen it yet and I’m excited. I know it’s just software, but goddammit it’s important!!!

    Thanks for being that discerning eye in a storm of medicrity.

    You, my friend, are…well, my friend.

  5. Steven says:

    awesome. love it. thank you~

  6. Mark Wilson says:

    Great job Timothy – I have just downed tools on my own web engine because yours does exactly what I want…donation on its way :)

  7. Ran across your flash-free gallery tool today and had to try it right away. Very nice! Here are two suggestions for a later version:

    I’d like to see an option to put the thumbnails in square boxes in the color of the thumbnail background, kind of like mounted slides. This could probably be realized by having separate sliders for horizontal and vertical spacing of tumbnails.

    It would also be nice, if larger galleries could be split into several pages. This would require forward and backward buttons for navigation, perhaps within the thumbnail area, and possibly a page counter as part of the page title. Alternatively, maybe the thumbnail area could be made scrollable?

    Thanks again, and keep up the good work!

  8. ChE says:

    Hello Tim,

    Here some pics running under Elegance

    Cheers and thanks,

    ChE

  9. Arnar M says:

    Great work!

    This is very good and very close to what I have been looking for.
    I really like the thumbs options, like the option to have them at all sides of any distance, rows, sizes…
    And I really like your choice to have non cropped square thumbs, I want to see the whole pictures in the thumbs.

    What is missing for me:
    #1 the option to page through the photos back and front using the arrow keys (is it possible? if not – an easy fix?) :-D
    #2 the option to have arrows in adjustable sizes and colors on screen to click for people that want that (and do not use arrows on keyboard).
    #3 option to have non faded thumbs.

    The full screen option that Donald mentioned here above would be very cool also but maybe not as important for me as I do not upload high res photos, but a great idea.

    But anyhow, this is already very good as it is, but we always want more… :-)
    Thanks!
    Arnar

    • Hi,

      Arrow keys work on some browsers but not others. I don’t know why…

      2 and 3 should be feasible.

      Tim

      • Arnar M says:

        Thanks Tim.
        Good that the arrow keys work on some browsers, bad and strange it does not on all. I use Safari on mac most often and the arrow keys do not work in Safari with Elegance, but I tried the gallery in Firefox after your reply and it works fine there. I am using Safari 4.0.3

        • Yes. If I find out why i’ll fix it.

          Note that version 1.10 includes the option to change the thumbnail opacity. By choosing 100% none of the thumbnails will be faded.

          • Arnar M says:

            Thanks, I did a little Googling about this problem myself but no luck.

            The arrow keys work fine on both Safari and Firefox on a Flash gallery that comes with Lightroom but the keys do not work on either browsers on a html gallery that I tried.

            Great you can choose no or less fading on the thumbnails. I am going to use Elegance on my website soon and I will send you a link when it is done.

  10. [...] abonnieren   Timothy Armes hat nach seinen Export Plugins seine erste Web Galerie Elegance [...]

  11. Thomas H says:

    Hello, I am on Firefox 2/Mac OS X 10.4
    I can see only thumbnails in your Elegance galleries, just to let you know.

  12. Nathan says:

    Hello,

    First, I’m using Elegance with TTG Auto Index, and I find it’s a great work, thanks!

    One wish for a later version: the same as Juergen Koslowski second wish!

    Nevertheless, I need an explanation about the way to display thumbs on the TTG AutoIndex first page working with Elegance:
    I wanted to display random thumbs from each album, but it doesn’t work for me… So I have tried to choose one thumb in the thumb file from the album on internet; my thumbnail path for each album is: http://site address/index.php/Album photos/Name of the album/content/bin/images/thumb/Name of the thumbnail
    Is it right? It still doesn’t work…

    You can see my Elegance webgalleries here:
    http://calonne.nathan.perso.neuf.fr/Album%20photos/index.php

    Nathan

    • Nathan says:

      Hello again,

      I have solved my problem by manually adding the “thumb” files (automatically created by the Elegance template for each album when exported at this place:Album name>content>bin>images)at the root of each album on the web, and renaming them into “thumbnails” (see the explanations here:http://lightroom.theturninggate.net/special-purpose-templates/ttg-xml-maker/). By this way, my index page displays random thumbs for each album.
      But is there a way to do it automatically? Because the updating of all the webgalleries is now very long…
      If not, it would be a great thing if a later version could do it automatically!
      (And sorry for my bad english: I’m a poor french guy!

      Nathan

  13. Simon M. says:

    I’ve had similar clean designs in the past; but the lightroom implementation of this is superb and makes it significantly easier to work with. Previously I had exported the images then used dreamweaver to bring it all together, needless to say it was a bit of a chore.

    Only request would be to have the percentage that is shown during loading (the actual numbers) such that it is disabled (i.e. only the progress bar is shown). I may just spend some time working this out it dreamwever, but it would be nice if it was an option.

    Site recently updated to use Elegance: http://www.simonmccurdy.com

    Thanks a ton.

    Simon

  14. Mike says:

    Hi Timothy,
    I have been using the slideshow pro package to build my website but its major drawback is that search engines cannot peak into swf files (yet). Will your package allow search engines to see the captions?

  15. [...] The beauty of these “Flash-like” slideshows done in HTML is that it allows incompatible portable devices with Flash (such as a minor tool like an iPhone) to view elegant slideshows. For a more detailed explanation on the reason behind the Lightroom Plugin “Elegance” check out Timothy’s blog. [...]

  16. JPReding says:

    I was happy to donate to such a great tool. Finally I found the tool to help me include stylish slideshows either as a stand-alone page or a integrated in a seamless WordPress post.

    It took me some time to figure out how to include the HTML in my WordPress post so I wrote a blog post explaining how I did it and including links. It is pretty simple once you have the right plugins for both Lightroom and WordPress.

    here’s the post link for those interested: http://www.jpreding.com/?p=798

    Thanks again Timothy!

  17. Michael says:

    first of all, thank you for sharing this plugin with the rest of the world. I’ve donated multiple times for your plugins, including this one. Your plugins are amazing.

    Couple of requests though…
    1. Thumbnail scroll, If I wanted to have one row OR one column with 20 images, it can get a bit messy, if you made this scrollable like how they do it in the “airtight simple viewer” it would be perfect. I know your script is done with html/java but I am sure this effect is achievable? Also if we can control how many rows and columns that would be nice as well.

    2. Using mouse scroll to browse through the photos

    3. Add the option to disable right click

    4. Add Next/Back Buttons.

    I hope some of these features will be added into the next versions.

  18. Eric says:

    Very nice Web engine, I’m testing it and I love it. Thank you Tim!

    Just one thing: I have to register Elegance on each Lightroom catalog I have. Couldn’t it be done just one time for all the catalogs?

    And thank’s also to JP Reding for his wordpress integration post.

    Eric

    • Mike says:

      Hi Eric,

      I believe that if you have Lightroom preferences set to “save settings with catalogue” you will need to register for each new catalogue, but if you choose another location to save your settings it can be read by al catalogues.

      I have my settings for templates, web galleries, export settings etc… located in Users>(My User Folder)>Library>Application Support>Adobe>Lightroom>Web Galleries

      Sorry I’ve not tested this before replying to your question, but it’s very late and time for bed! I hope it works for you. I’m on a mac by the way; a PC would be somewhere different, but look for application support.

  19. Mike says:

    Hey Tim,

    Thanks for the great work you’ve done. I like how your galleries index is configured on your webpage. I’m using TTG Pages,Auto Index,and Stage along with elegance to create my own site. Your gallery thumbnails appear to work very similar to the auto index feature from TTG, but your text and box color appear OVER the thumbnail rather than behind it. Is this something you coded yourself, or is it something someone like myself with limited programming abilities could do? Perhaps it’s a question for Mat at TTG.

    Thanks a million for your designs!

  20. Mike says:

    Thanks Timothy for a super plugin. Hopefully you have received the donation by now.

    Just to add my vote for Michael’s requests for some form of thumbnail scroll and the next/previous buttons.

    For number 3) I added a bit of Javascript to header.html in the elegance.lrwebengine directory and this adds a pop up when a user right clicks. I know a determined user can get the image from the cache but it may deter the casual downloader….

    updated site: http://www.mike-watson.co.uk

    Thanks again Timothy…. keep up the good (plugin) work

  21. Elliott Doland says:

    I have had the same problem: Flash. Works well on a full size computer, but on a mobile device, no way!

  22. Andy says:

    Thank you! If you or anyone else knows anything about a WordPress plugin that would make it easy to create “elegance galleries” there I’d love to know about it. For now, I’m going to work on changing to this presentation for my static galleries.

  23. Ben says:

    Tested, liked, bought. Great job with this one. Beats the pants out of the galleries included with Lightroom 2.

  24. Al says:

    Hi to all!

    Is there some way to put carriage returns/line breaks in the image info/labels tab? If you want to put a lot of information there it would be nice to have the caption on the first line and everything else on the next line.

    Great web engine!

  25. Eric says:

    I’ve just installed the 1.20 version and played with . The plugin installation is great, much easier!

    One question : on my PC, the display time of the first picture of the galery is not the time I set in the panel. it is always the same, around 1000 ms or something like that, anyway less time than the time the slideshow control design take to disappear (and it’s not possible to see the first picture without the slideshow control).

    Is it something wrong with what I set or is it due to elegance?

    Anyway, nice job, I’m going to use it on my website with TTPAGES.

    Eric

  26. Hi,

    found this a few days ago, been on the search for a useful non-flash gallery for my website. tried it today and instantly decided to donate.

    thanks alot, payment sent and now i can work through removing the flash galleries from my website.

    regards

    kevin

  27. Fotografi says:

    Last year I noticed from my Log Files that the 17% of my web contacts came from mobile devices and that the 90% of that were coming from Iphones. I also noticed that the 95% of my clients own an Iphone. I have two web sites ( http://www.wedding-photographer.it/ and http://www.fotografo-matrimonio.biz/ ) that drive me a lot of clients and so I decide to develop a non flash based section of the sites. While Apple and Adobe are arguing I have to find an alternative.

  28. Mike Watson says:

    Timothy,

    Is it possible to request a feature to add to this package which I have been using for a while.

    Is it possible to have the first image come up immediately (maybe as a background image) while the progress bar is winding up to 100% . It is just to keep the viewer there while the progress bar is working!

    Many thanks for considering this Mike

  29. Nico says:

    Hi,
    Great work, but I still miss one thing (or maybe I don’t see it…): is it also possible to have a maximum of thumbnails? For example 9. And to show these 9 thumbnails a square of three rows by three columns?
    I now have the ‘normal’ lightroom gallery, which supports my question, but i don’t want flash anymore.
    Kind regards,
    Nico

Leave a Reply