Scalable Lightroom Web Galleries

16 November 2016

This past decade – though I still tend to work Night And Day along a related but different career path, still with a sense of urgency because who knows, I may get run over in a shopping center’s parking lot by some shit-for-brains driver more-focused on a hot bit of drivel popping in their fb “news” feed than on the reality that they are driving a killing-machine; THEY’RE MOVING ‘in traffic’ while “engaging” with their “friends” – I have pretty much lived a stress-free life by comparison with my ‘gravy’ days in Film and Photo Production.

I always had a sneaking suspicion that many of my colleagues participating on a Big Production felt as if the work we were all engaged in was certainly as important as Finding The Cure For Cancer. NOTHING Else mattered.

Because a considerable segment of what I would be doing overall on The Project I had been called upon to provide a bid on was to initially spend a whole bunch of days “Location Scouting” I KNEW I would need to quickly process images I had made looking for worthwhile prospects on the clients’ wish-list – THEN they needed to see those pictures immediately.

 

Now I FIRST got interested in Lightroom towards the end of my three decades helping others make their pictures as television commercials and print ad campaigns. Lightroom quickly, intuitively allowed me to tweak even the most problematic photos I shot while out “running like a chicken with its head cut off” in order to get as much done in as little time possible.

Lightroom ALSO produces beautiful, clean web-galleries from however-many photos I care to upload as a package to my host’s servers so I can almost-INSTANTLY get possibilities in front of The Decision Makers in an interval that (sort of) fits-in to their concept of Space And Time.

With Lightroom you can quickly, easily size your images to fit “just perfect” on your client’s desktop – and NOW I FOUND, just experimenting with Lightroom’s latest (CC-version) ’Web’ module gallery template ADDITIONS – are effortlessly able to present a showcase that is easily scalable, that will exquisitely fit-to-mobile viewports!!! (For your ‘Gotta-Have-It-NOW’, ‘I-CAN’T-WAIT-Till-I-Get-Back-To-The-Office’ clients always on their phones THIS IS HUGE!)

I haven’t HAD TO build a ‘web gallery’ for some time now; and as I’ve been spending TONS OF TIME lately trying to get my head around learning the magic behind HTML5 and CSS3 in order to build a new website for my work – as I continue to evolve the online presentation I have in mind to build, NOT as a template-generated one-size-fits-all-looking portfolio “website”; knowing that Adobe is heavily invested in building applications and feature-sets within to best help graphic-designers-as-web-developers make their website dreams come true, I thought “Gee, I wonder IF Lightroom now has “responsive” galleries on board too?”

They DO!

Take a look at this quickie ‘location scouting’ prototype I built with one of their new “Grid” galleries > > >

Now, real fast and then I’ll let you go. CHECK THIS OUT:

1) IF you’re on a laptop or working on a desktop screen open your web browser so that its viewport spans entirely from top to bottom, left edge of your screen to the right.

DO NOT use a browser’s or an Operating System’s ’Full Screen’ feature or ‘Presentation Mode’ View option. You want to manage your browser’s sizing yourself. Take the lower right corner of the window, Click-and-drag down to the bottom right-hand corner of your screen till it fits across your entire ‘desktop’.

2) NOW take your mouse cursor and float it over the right edge of your browser window CLICK and drag to the left.

Your browser viewport should begin to “collapse” (get smaller).

3) With the mouse cursor STILL DEPRESSED continue dragging to the left SLOWLY and watch how the series of thumbnails reduce in number – from 6-across (OR more, depending upon the size of your desktop screen) – to five… then four… as the viewport continues to get smaller.

The gallery Lightroom has produced is responding to ‘break-points’ as the browser’s window shrinks in size, code that “styles the page’s overall look” to the viewer – many elements really; but most importantly (in this case) is that code is managing how the presentation is sized specifically to adapt to various screens: desktop, tablets AND phones.

4) NOTE that if you are on a phone – depending upon it's pixel width, its screen width – you may instead see 4 thumbnails across, perhaps 3-across. And when you click on a thumbnail the enlarged photograph fits perfectly in your phone as you hold it in the 'portrait' or vertical position.

My only gripe here is that Adobe didn't customize it's code to provide for the mobil end-user wanting to see a HORIZONTAL image larger by holding their phone in the 'landscape' or horizontal position. Rendering of images do not adapt to how you hold your phone. Bummer.

 

BTW see other Location Scouting projects I had participated in with clients in the past (a series from favorite campaigns I worked on) via my Location Scouting/Production Services website. Links on my “Wassup” page there.

Many of those project ‘blog’ galleries I built in a 13-year-old version of Dreamweaver(!) and a few I built with Lightroom’s “legacy” web gallery templates still available in LR-CC but around since LR-v1 released in 2007.

My point in mentioning this is just try “collapsing” your desktop web browser’s viewport with those galleries and notice that neither the thumbnails OR the pages scale, shrink; nor do their ‘detail’ pages (enlargements of my thumbnails generated on separate, attendant pages).

The new ‘responsive’ web galleries in Lightroom-CC are ‘the bomb’.

Return to Lightroom Tutorials and Tips landing page...