Introducing ProGallery 2

(Will Woodgate) #1

As the name suggests, ProGallery is designed and built for professional photographers and film makers. Users who typically need to create immersive photographic and video galleries for the modern internet.

RapidWeaver is crowded with an ever-growing choice of gallery stacks. With this in mind, we consulted with some existing ProGallery users (a few of which are photographic experts) and asked the tough question of what they would like to see done better! Through this consultation, several significant changes have been incorporated into version 2:

  • Faster loading galleries that can safely handle huge collections of both images and video
  • Lightbox titles, caption content and controls that do not layer-over or obscure your media
  • Modern, flexbox-based image layouts and pure CSS masonry grids without clumsy Javascript
  • Support for high-resolution retina display optimised photographs within lightbox mode
  • Brilliant responsiveness and accessibility for all users; whether they are on smartphone, tablet or desktop
  • Basic animation effects that will not turn pages into a flickery mess or suffer jerky transitions
  • Options to disable the lightbox and apply standard links on thumbnails, for linking to sub-galleries or webpages
  • A super-simple setup process, so more time can be spent doing actual photography, film making and just enjoying life!

Although a couple of lesser used features have been phased out in ProGallery 2, we’re confident that this major update re-establishes ProGallery as the unrivalled image and video gallery solution for professional photographers, artists and film makers, who depend on RapidWeaver. A huge amount of care and attention to detail has been put into this update. More free updates are planned; to continue evolving the stack and possibly adding more sources in partnership with other developers.

This video explains all the most noteworthy features new in ProGallery 2 and the basics of how to use this wonderful stack. A fully functioning free demo version of the stack is available for download.

ProGallery 2 is a free update for all existing customers. It can be installed alongside older versions of the stack. The update is ready to be downloaded from your Paddle account.

Any technical support questions or feedback can be posted via the Stacks4Stacks support page, from where you can be assured of a swift and friendly response. :slightly_smiling_face:

(Lisa Sandler) #3

One of my favorite gallery stacks updated… .awesome! Especially as a photographer who uses lots of images on a page. And the things you cut out… thumbnails and zoom… I never used those either. Great update!

@SteveB Watch the video… you will see. Nothing I personally will miss.

(Lisa Sandler) #4

To hijack your post in a related way… can you explain the best practice for setting up images? Should I use one set of images for thumbs, regular and retina images or is it better to create 3 separate images for this? Is one way less cumbersome or uses less memory/loading time?
thanks, Lisa

(David) #5

All the updates look great, and I can easily live without the zoom buttons, and never used the download button, but perhaps contrary to most, I did use the thumbnails on about five client sites. Clients have really liked the lightbox thumbnails, especially for larger galleries, as one can then skip to a particular image within the lightbox, without having to go back to the thumbnail index grid. Also great to have the toggle for the thumbnails, to hide them if desired.

@willwood Any chance of the lightbox thumbnail option being brought back? I hope I’m not the only one who uses/likes the lightbox thumbnails?

(Will Woodgate) #6

As per the video I published, the new lightbox is more minimalist and has therefore seen the removal of thumbnails, slideshow progress bars, the download button and magnification controls. These elements were deemed to create too much visual clutter and distraction - especially on smaller screens like the iPad. The lightbox buttons that remain are now less obtrusive, so the need for all the extra button style and markup settings has gone. The choice of lightbox animation effects has been reduced to now only include the ones which are assured to work reliably across all web browsers. Some sources have been merged together so that the stack is a lot less daunting to novice users new to it; but the popular sources all still remain and additionally they have been improved with support for optional things like retina images and supplementary links (used when the lightbox is disabled). All the old IE browser hacks and polyfills are gone. The codebase of ProGallery 2 is 58% smaller, compared to ProGallery 1.

(Will Woodgate) #7

Unlikely, but I won’t rule anything out. ProGalley1 might be better for you to continue using for the time being in certain projects where lightbox thumbnails are essential. Feedback suggested the thumbnails in the lightbox presented several disadvantages and weren’t often used in the group of users I consulted with.

(Lisa Sandler) #8

As a photographer, I decided to get rid of all thumbnails in my sliders a few months ago. As Will suggests, it just makes for less extra clutter for me.

(David) #9

Well - different strokes… That’s why it’s a great “option”. If you don’t want/need the lightbox thumbnails you can just switch them off. One of may clients is quite an accomplished Director of Photography and still photographer, another who’s site I’m working on now is a very recognized visual artist, and both of them wanted, and are very happy with the thumbnails. Other clients who had images for galleries of products or photos have also opted for them.

Glad to hear there is a still perhaps a glimmer of hope for restoring the thumbnail option. :slightly_smiling_face:

(Will Woodgate) #10

Use separate images for thumbnails, standard lightbox images and retina lightbox images. In other words, 3 images for each ‘entry’.

Your gallery will gain an astonishing speed boost and possibly consume far less bandwidth than previously. Easily you could be edging into the territory of being able to build web galleries of a couple of thousand images. This update is very, very, speed and performance orientated.

Thumbnails are lazy-loaded in the grid, as you scroll the page down. They only need to be small / low resolution images to give a “glimpse” of the actual images within the lightbox. These thumbnails are not retina optimised. They don’t need to be.

Lightbox images are only loaded on-demand when required. You may notice when navigating the lightbox, a slight pause between the images appearing.

High-resolution retina images are used like above, but only served in the lightbox if a retina display is detected as viewing the webpage.

During testing, we had a gallery of almost 800 MB setup, containing several hundred images. The webpage was still loading in under 3 seconds! It’s a pretty smart setup, and I feel it was well-worth the sacrifice of a few features that were holding us back.

There are lots of free and paid tools that can be used to batch-convert images into the different formats.

(Lisa Sandler) #11

Great news and thanks for explaining. I have a lot of work cut out for me, but I could use the faster loading, for sure. I’ve been scared to try to set this up in the past, but the CSV option looks like a great set up for me.

Can you recommend sizes for all 3?

(Will Woodgate) #12

The CSV source is great - it basically acts like a spreadsheet editable database where you can store all the info for your gallery. It’s a good way to manage larger galleries and can work with both images and video. Functions like find + replace and copy + paste make editing a lot easier. If you need more information about how it is created and how it works, I can consider putting together a video.

My ProGallery example comprises of 107 images. The combined size of all the images is 282 MB. Here is a breakdown of the sizes:

JPG, 72 dpi, 500px wide, 333px tall, approximately 60 KB each.

Lightbox images:
JPG, 72 dpi, 1500px wide, 999px tall, approximately 500 KB each.

Retina lightbox images:
JPG, 72 dpi, 3000px wide, 1997px tall, approximately 1.6 MB each.

(Lisa Sandler) #13

This is so helpful, thank you! I can’t wait to set my first one up.

I would also love a video, if you are inclined. I can’t seem to download your sample CSV file correctly and the other thing I still don’t quite understand is the relative path, so any info in those areas would be great.

(Lisa Sandler) #14

One more question on sizing… your sizes are based on the 6:4 ratio that comes out of the camera? I know you do landscapes, mostly in landscape shape. So these files of mine would be 3000x2000 for retina.
If I have photos that are 5:4 ratio, would I base this size on keeping same height and changing width? So… 2500x2000?
and same thing for the portrait shaped images?

(Bruce Kieffer) #15

I upgrade to ProGallery 2 and have been converting my site where I use the stack. It’s super nice! I love the lazy loading and the Masonry Grid setup. It handles images a bit differently than ProGallery, but that is how it is, and that is fine with me. Thanks Will!

(Ian Burden) #16

I’m finding that file sizes Will suggests are causing problems as they seem to be too big, particularly for mobile. Retina does not work for me at all because my mobile is retina and it just chokes on the big retina file. Are others experiencing problems?

Even the Lightbox size of 1500x999 is causing to much hesitation on a mobile (or on mine anyway) and some hesitation on my tablet. I think I’ll have to resort to reducing the Lightbox image file size and even then hiding the stack on mobile and having a special stack for mobile only, with an even smaller file size for the Lightbox.

I’m wondering if would be possible to have yet another file type that would only be used for Lightbox on mobiles, and if Will would consider offering that?

(Will Woodgate) #17

There have been no other reports from users of ProGallery experiencing problems with the display of images on mobile. I can only recall a single issue where images were not loading on mobile, and that was because the user had something else already on the page trying to ‘retina-ise’ the images, but wasn’t doing a good job of it. It kept trying to load retina images that were already loaded and got stuck in a loop.

Our office is now closed until the middle of January, for the festive period. I would probably suggest you take this opportunity to experiment some more with different image sizes and quantities. The sizes I stipulate are only an estimation. If you feel something needs to change in the stack, it would be best to raise a support request directly in a few weeks time and include some relevant details (like a test page link) of what is not working for you and what you propose is done instead.

I don’t have the stack (or RW) in front of me currently. I recall that retina images were optional in ProGallery 2. Not everybody needs or wants retina images. Sometimes standard images can look and work just fine on a retina display.

(Ian Burden) #18

Yes, I turned off the retina images and it seems better without them. Looks fine on the smaller devices I have with retina displays. I’m trying smaller regular Lightbox image sizes and it seems to work better, except on mobile, where I’ve tried a much smaller image and that works fine on the mobile.