ProGallery is particularly well-suited towards the handling of larger image and video galleries. Built-in lazy-loading ensures that thumbnail images are only downloaded and displayed when within the viewable area of a webpage. Additionally when the lightbox is opened, images only get displayed on demand. The outcome of these techniques ensures you can have a high-quality gallery of several hundred megabytes or more in size (as demonstrated below) but website users will still be able to quickly and safely access your gallery.

"Other gallery stacks have disappointed me. I've tried many and keep coming back to ProGallery. I love the simplicity. It just gets the job done. You have created exactly what I need and cannot give this stack enough praise. ProGallery has helped me win several photography contracts purely on the basis of my clients being able to see my work properly. For this I cannot thank you enough!" - Mike

"Still the best gallery plugin there is for RW. And Wills support is fab!!" - Emma

The responsive lightbox used in ProGallery supports both images and video; so think of it as two stacks for the price of one! Different sources can be configured to collect images or video for display within ProGallery. Our lightbox is purposefully kept visually uncluttered for more emphasis on your media. Captions and navigation controls are never layered over your lightbox images - a major flaw in some competing stacks.

Example

This is a real working example of ProGallery, with the default settings applied. A total of 107 images are being loaded via a CSV file. The image formats are as follows...

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

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

We have purposefully opted to use quite sizeable images, in order to exaggerate the lazy-loading effect. Ordinarily you will probably want to use smaller image file sizes to maintain decent loading speed for your end users on slower internet connections. This example is using the Flexbox thumbnail layout and Lightcase lightbox.

  • Buttermere Valley
    Buttermere Valley
    Lake District, England. © Will Woodgate, 2017
  • View over the east of Buttermere Lake
    View over the east of Buttermere Lake
    Lake District, England. © Will Woodgate, 2017
  • Looking down into Buttermere Valley, from the Summit of Haystacks
    Looking down into Buttermere Valley, from the Summit of Haystacks
    Lake District, England. © Will Woodgate, 2017
  • Wildflower Meadow
    Wildflower Meadow
    Lake District, England. © Will Woodgate, 2017
  • Stepping Stones over the River Brathay
    Stepping Stones over the River Brathay
    Lake District, England. © Will Woodgate, 2017
  • Pastal Scene at Stang End
    Pastal Scene at Stang End
    Lake District, England. © Will Woodgate, 2017
  • Little Langdale
    Little Langdale
    Lake District, England. © Will Woodgate, 2017
  • Mist over Great Intake
    Mist over Great Intake
    Lake District, England. © Will Woodgate, 2017
  • Water Meadow near Little Langdale
    Water Meadow near Little Langdale
    Lake District, England. © Will Woodgate, 2017
  • Lingmoor Fell
    Lingmoor Fell
    Lake District, England. © Will Woodgate, 2017
  • Slate
    Slate
    Lake District, England. © Will Woodgate, 2017
  • Beck and Wild Garlick in Fletcher's Wood
    Beck and Wild Garlick in Fletcher's Wood
    Lake District, England. © Will Woodgate, 2017
  • Bluebells in Fletcher's Wood
    Bluebells in Fletcher's Wood
    Lake District, England. © Will Woodgate, 2017
  • Stoney Track leading through Fletcher's Wood
    Stoney Track leading through Fletcher's Wood
    Lake District, England. © Will Woodgate, 2017
  • Black Beck in Warnscale Bottom
    Black Beck in Warnscale Bottom
    Lake District, England. © Will Woodgate, 2017
  • Warnscale Beck flowing into Buttermere Lake
    Warnscale Beck flowing into Buttermere Lake
    Lake District, England. © Will Woodgate, 2017
  • Tarn on the summit of Haystacks
    Tarn on the summit of Haystacks
    Lake District, England. © Will Woodgate, 2017
  • View from Haystacks, looking down upon Buttermere Lake
    View from Haystacks, looking down upon Buttermere Lake
    Lake District, England. © Will Woodgate, 2017
  • View from the Summit of Haystacks
    View from the Summit of Haystacks
    Lake District, England. © Will Woodgate, 2017
  • Stone Bridge at Elterwater
    Stone Bridge at Elterwater
    Lake District, England. © Will Woodgate, 2017
  • Tarn on the summit of Haystacks
    Tarn on the summit of Haystacks
    Lake District, England. © Will Woodgate, 2017
  • Pillar Fell
    Pillar Fell
    Lake District, England. © Will Woodgate, 2017
  • View into the Valley
    View into the Valley
    Lake District, England. © Will Woodgate, 2017
  • Summit of Haystacks
    Summit of Haystacks
    Lake District, England. © Will Woodgate, 2017
  • Buttermere Lake
    Buttermere Lake
    Lake District, England. © Will Woodgate, 2017
  • Sunlight moving over Buttermere Valley
    Sunlight moving over Buttermere Valley
    Lake District, England. © Will Woodgate, 2017
  • Looking Stead Fell
    Looking Stead Fell
    Lake District, England. © Will Woodgate, 2017
  • Fleetwith Pike and Dale Head beyond
    Fleetwith Pike and Dale Head beyond
    Lake District, England. © Will Woodgate, 2017
  • Larch Plantation and Herdwick Sheep above Buttermere Lake
    Larch Plantation and Herdwick Sheep above Buttermere Lake
    Lake District, England. © Will Woodgate, 2017
  • Warnscale Bottom
    Warnscale Bottom
    Lake District, England. © Will Woodgate, 2017
  • Glen Mary Waterfalls
    Glen Mary Waterfalls
    Lake District, England. © Will Woodgate, 2017
  • Close-up waterfall and moss
    Close-up waterfall and moss
    Lake District, England. © Will Woodgate, 2017
  • Waterfall in monochrome
    Waterfall in monochrome
    Lake District, England. © Will Woodgate, 2017
  • Glen Mary Cascade
    Glen Mary Cascade
    Lake District, England. © Will Woodgate, 2017
  • Tarn Hows
    Tarn Hows
    Lake District, England. © Will Woodgate, 2017
  • Bluebells and blue sky over Tarn Hows
    Bluebells and blue sky over Tarn Hows
    Lake District, England. © Will Woodgate, 2017
  • View of Yewdale Fells from Tarn Hows
    View of Yewdale Fells from Tarn Hows
    Lake District, England. © Will Woodgate, 2017
  • Pine Trees on the edge of Tarn Hows
    Pine Trees on the edge of Tarn Hows
    Lake District, England. © Will Woodgate, 2017
  • Waterfowl on Tarn Hows
    Waterfowl on Tarn Hows
    Lake District, England. © Will Woodgate, 2017
  • Monochrome Forest
    Monochrome Forest
    Lake District, England. © Will Woodgate, 2017
  • Small Valley
    Small Valley
    Lake District, England. © Will Woodgate, 2017
  • Sunlit Greenery
    Sunlit Greenery
    Lake District, England. © Will Woodgate, 2017
  • Northern end of Tarn Hows
    Northern end of Tarn Hows
    Lake District, England. © Will Woodgate, 2017
  • Grasses on the Lake Edge
    Grasses on the Lake Edge
    Lake District, England. © Will Woodgate, 2017
  • Little Beck flowing into Tarn Hows
    Little Beck flowing into Tarn Hows
    Lake District, England. © Will Woodgate, 2017
  • Holm Fell
    Holm Fell
    Lake District, England. © Will Woodgate, 2017
  • Tree Line and Mountains
    Tree Line and Mountains
    Lake District, England. © Will Woodgate, 2017
  • Ambleside mountains
    Ambleside mountains
    Lake District, England. © Will Woodgate, 2017
  • Roe Deer
    Roe Deer
    Lake District, England. © Will Woodgate, 2017
  • Ambleside mountains
    Ambleside mountains
    Lake District, England. © Will Woodgate, 2017
  • Old Quarry Workings
    Old Quarry Workings
    Lake District, England. © Will Woodgate, 2017
  • Red Admiral butterfly
    Red Admiral butterfly
    Lake District, England. © Will Woodgate, 2017
  • Forests and Mountains
    Forests and Mountains
    Lake District, England. © Will Woodgate, 2017
  • Green Pastures
    Green Pastures
    Lake District, England. © Will Woodgate, 2017
  • Yewdale Valley
    Yewdale Valley
    Lake District, England. © Will Woodgate, 2017
  • Coniston Lake from Tarn Hows
    Coniston Lake from Tarn Hows
    Lake District, England. © Will Woodgate, 2017
  • Wild Forest
    Wild Forest
    Lake District, England. © Will Woodgate, 2017
  • Ambleside Mountain Landscape
    Ambleside Mountain Landscape
    Lake District, England. © Will Woodgate, 2017
  • High and Low
    High and Low
    Lake District, England. © Will Woodgate, 2017
  • Near and Far
    Near and Far
    Lake District, England. © Will Woodgate, 2017
  • May Sunshine
    May Sunshine
    Lake District, England. © Will Woodgate, 2017
  • Steep Forest
    Steep Forest
    Lake District, England. © Will Woodgate, 2017
  • Drystone wall near Glen Mary
    Drystone wall near Glen Mary
    Lake District, England. © Will Woodgate, 2017
  • Elter Water
    Elter Water
    Lake District, England. © Will Woodgate, 2017
  • Mallard Duck
    Mallard Duck
    Lake District, England. © Will Woodgate, 2017
  • Birk Rig Park
    Birk Rig Park
    Lake District, England. © Will Woodgate, 2017
  • Bight Sunlight over River Brathway
    Bight Sunlight over River Brathway
    Lake District, England. © Will Woodgate, 2017
  • Rock Reflections in the River Brathway
    Rock Reflections in the River Brathway
    Lake District, England. © Will Woodgate, 2017
  • Skelwith Force Waterfall
    Skelwith Force Waterfall
    Lake District, England. © Will Woodgate, 2017
  • Island on the River Brathway
    Island on the River Brathway
    Lake District, England. © Will Woodgate, 2017
  • Monochrome Rock Reflections
    Monochrome Rock Reflections
    Lake District, England. © Will Woodgate, 2017
  • Oak Tree
    Oak Tree
    Lake District, England. © Will Woodgate, 2017
  • Banks of the River Brathway
    Banks of the River Brathway
    Lake District, England. © Will Woodgate, 2017
  • Looking towards Holm Fell
    Looking towards Holm Fell
    Lake District, England. © Will Woodgate, 2017
  • Framed River
    Framed River
    Lake District, England. © Will Woodgate, 2017
  • Rakerigg
    Rakerigg
    Lake District, England. © Will Woodgate, 2017
  • Blake Rigg
    Blake Rigg
    Lake District, England. © Will Woodgate, 2017
  • Blea Tarn
    Blea Tarn
    Lake District, England. © Will Woodgate, 2017
  • High Park
    High Park
    Lake District, England. © Will Woodgate, 2017
  • Monochrome Old Barns
    Monochrome Old Barns
    Lake District, England. © Will Woodgate, 2017
  • Bee Hive
    Bee Hive
    Lake District, England. © Will Woodgate, 2017
  • Cottage Garden
    Cottage Garden
    Lake District, England. © Will Woodgate, 2017
  • Watering Can and Pots
    Watering Can and Pots
    Lake District, England. © Will Woodgate, 2017
  • Monochrome Wheelbarrow
    Monochrome Wheelbarrow
    Lake District, England. © Will Woodgate, 2017
  • Field and Trees
    Field and Trees
    Lake District, England. © Will Woodgate, 2017
  • Canada Geese
    Canada Geese
    Lake District, England. © Will Woodgate, 2017
  • Hawkshead Village
    Hawkshead Village
    Lake District, England. © Will Woodgate, 2017
  • Monochrome Ambleside
    Monochrome Ambleside
    Lake District, England. © Will Woodgate, 2017
  • Head of Coniston Lake
    Head of Coniston Lake
    Lake District, England. © Will Woodgate, 2017
  • Rigg Head
    Rigg Head
    Lake District, England. © Will Woodgate, 2017
  • Yewdale Beck
    Yewdale Beck
    Lake District, England. © Will Woodgate, 2017
  • Water Meadow near Elswater
    Water Meadow near Elswater
    Lake District, England. © Will Woodgate, 2017
  • Skelwith Bridge
    Skelwith Bridge
    Lake District, England. © Will Woodgate, 2017
  • Coniston Fells
    Coniston Fells
    Lake District, England. © Will Woodgate, 2017
  • Mixed Forest
    Mixed Forest
    Lake District, England. © Will Woodgate, 2017
  • Swimming in Blea Tarn
    Swimming in Blea Tarn
    Lake District, England. © Will Woodgate, 2017
  • Blea Tarn, viewed from Side Pike
    Blea Tarn, viewed from Side Pike
    Lake District, England. © Will Woodgate, 2017
  • Great Langdale
    Great Langdale
    Lake District, England. © Will Woodgate, 2017
  • View of Great Langdale from Side Pike
    View of Great Langdale from Side Pike
    Lake District, England. © Will Woodgate, 2017
  • Way Marker
    Way Marker
    Lake District, England. © Will Woodgate, 2017
  • Path around Blea Tarn
    Path around Blea Tarn
    Lake District, England. © Will Woodgate, 2017
  • Marshy Headwaters of Blea Tarn
    Marshy Headwaters of Blea Tarn
    Lake District, England. © Will Woodgate, 2017
  • Monochrome Rock Reflections in Blea Tarn
    Monochrome Rock Reflections in Blea Tarn
    Lake District, England. © Will Woodgate, 2017
  • Colwith Valley
    Colwith Valley
    Lake District, England. © Will Woodgate, 2017
  • Slater Bridge
    Slater Bridge
    Lake District, England. © Will Woodgate, 2017
  • Little Langdale Tarn looking towards Great Intake
    Little Langdale Tarn looking towards Great Intake
    Lake District, England. © Will Woodgate, 2017
  • Low Light Way Marker
    Low Light Way Marker
    Lake District, England. © Will Woodgate, 2017
 
You may download the original CSV file here to see how the spreadsheet is structured and use this as a basis for your own ProGallery configuration. Right-click and select 'save as' if the file does not download for you straight away. Don't worry if the idea of CSV files sounds too complicated - you can also setup ProGallery to use images you drag-and-drop into RapidWeaver too! Continue reading to learn about the different sources available in ProGallery.

Setup

Install ProGallery into Stacks and RapidWeaver in the normal way (drag-and-drop the ProGallery icon onto your RW dock icon and follow the onscreen instructions). Open your Stacks Library and drag-and-drop a copy of ProGallery 3 into your webpage.

By default when you start, instructions are shown in edit mode, along with three input boxes (for thumbnail layout, lightbox and content sources). By following the instructions shown in edit mode, you should find ProGallery is relatively straightforward to configure. The 'Demo Images' source is a useful source to quickly start testing ProGallery with. Both the main ProGallery stack and the sub-stacks all have their own settings. Instructions can be toggled on and off in the main stack settings.

Because this is a professional grade gallery stack, the choice of settings is purposefully very large. Also with settings that relate to dimensions, you have greater freedom to enter settings in shorthand format (e.g. Padding: 0.25rem) or longhand format (e.g. Padding: 0.5rem 0.25rem 0.5rem 0.25rem) along with choosing your own units of measurement (e.g. rem, em, px, pt, %, vw, vh). If you have worked with CSS code in the past, then you'll appreciate how truly useful this is to have in a stack! All settings display informational tooltips on mouseover, explaining what they do. You can also ask if you have any queries.

Thumbnail Layouts

ProGallery always displays your gallery in the format of a thumbnail grid. It does this because professional photographers have repeatedly said that this is the preferred format many like to see their albums presented in, for maximum impact. Thumbnail grids also bode well with maintaining a high degree of SEO and website accessibility. ProGallery ships with several thumbnail grid layouts; all of which have slightly different features and configuration. However they all use modern CSS code and work with every lightbox type and image or video source. There is also a 'custom layout' provided; meaning you or another web developer can create bespoke thumbnail layouts.

Lightboxes

ProGallery is supplied with a great choice of lightbox effects. Included are some older favourites like Colorbox and newer lightboxes like Lightcase, TopBox and VenoBox. A lightbox is a method of making content open at a larger size. Every lightbox provided in ProGallery has a unique feature set. The choice of lightboxes enables you to experiment with them all and find the best one for your needs. For example, Photobox does slideshows and thumbnail images, but can't do YouTube content. Whereas Lightcase can do Youtube, but can't do DeviantArt. So you'll want to experiment with the different lightbox effects to find the one that looks works best for what you want displayed. If no lightbox is required, just leave the lightbox type box empty or use the 'No Lightbox' lightbox type. This latter option has a convenient feature to force links to open in new tabs and extra settings for tooltips.

Combining ProGallery + TopBox

ProGallery already includes a TopBox lightbox type. It has basic settings to adjust some of the lightbox colours and labels. The full TopBox stack is a separate purchase and naturally has a far greater choice of style and behaviour settings, including support for things like custom video controls (for MP4, YouTube, Vimeo etc). Because ProGallery and TopBox are from the same developer, both stacks can "talk" to each other and work in harmony. To lightbox your ProGallery content using the full TopBox stack, leave the Lightbox Type in ProGallery empty. Add a TopBox stack to the webpage and set the TopBox Selector setting to #gallery a where 'gallery' is the ID / selector of your ProGallery. Leaving the TopBox Title Source setting as title will enable TopBox to continue fetching your image or video titles.

Relative paths for CSV files and directories

If you have configured ProGallery to use images or video from a CSV spreadsheet file or an image directory, it is important that the CSV file or content is stored on the same domain (e.g. example.com) and you link to the file using relative links. Relative links offer improved security and much faster retrieval of the data. Our published example above is using a CSV file stored on the Stacks4Stacks server, to build the image gallery you see. This current page you are reading now is stored in the /progallery/ directory. Our CSV file is stored over in the /resources/ directory. This is what it looks like in FTP:

stacks4stacks.com/
progallery/index.php
resources/imagedata.csv

So in the stack settings we entered ../resources/imagedata.csv as the link to the CSV file. The CSV file can have links to images stored anywhere, including on other domains. It's just the CSV file that has to live on the same domain as the website.

With relative links, a web browser tracks backwards from the location of the present page (e.g. https://stacks4stacks.com/progallery/index.php). You use ../ to determine how many levels the ProGallery page is from the root domain. Then navigate down into the /resources/ directory, where it will find our imagedata.csv file. And sure enough, if you go to https://stacks4stacks.com/resources/imagedata.csv in your web browser address bar, you will reach the same CSV file.

Again, relative paths are very fast and safe. Trying to access CSV files on other domains will often fail and some hosting companies will block it (as a security measure). There are many more explantations and tutorials online about relative links.

In summary, a relative link tells a web browser what the shortest route is to a file, from the current page. You use ../ to navigate out of directories (back to the website root), and then name the directories (e.g. /resources/2016/gallery/ to navigate down into directories. If the CSV file is within the same directory as the page is stored, just enter the filename as the link. For CSV files added as resources to RapidWeaver, no further action is required.

Custom triggers for light boxes

Perhaps you want to send clients links by email, that will take them directly to your website and launch a particular image or video automatically? Or how about the option to create custom buttons in your webpage to start the lightbox gallery? Both are feasible to do with ProGallery.

For linking to an individual image or video from an outside location (like an email, social media or another webpage), simply append a hash (#) character onto the webpage link, followed by your gallery ID, followed by the number of the item you want triggered on page load:

https://example.com/gallery/#mygallery4

To create a custom link or button on the same page ProGallery is on, for triggering a lightbox, follow this markup pattern:

<a href="#mygallery1" class="proGalleryTrigger">Click Me!</a>

If you were configuring the link using the link dialogue window in RapidWeaver, then you would set the URL to #mygallery1 and add a custom class attribute with a value of proGalleryTrigger, as pictured below.

ProGallery custom lightbox trigger

NB: We use the 'proGalleryTrigger' class to scope our link or button better. It is a much more efficient method, it allows us to nullify normal link behaviour and it will stop confits with other stacks on the same page. Without this class, the trigger will not work for opening the ProGallery lightbox.

As before, replace 'mygallery' with your actual Gallery ID (configured in the ProGallery general Settings) and the number corresponds with the item number you want to open.

Creating sub-galleries or sub-albums

A frequent request from ProGallery customers has been the ability to display a grid of thumbnail images, and then set those thumbnails as links to sub-galleries or sub-albums, sorted by genre or category. This is surprisingly easy to accomplish and the method ProGallery uses is excellent for SEO and website accessibility.

Start by creating a new gallery page and then setup a series of subpages nested under the main gallery page. On your main gallery page, create a thumbnail grid, but do not use a lightbox (either leave the Lightbox Type empty or apply the 'No Lightbox' type). Instead of applying a lightbox, set these thumbnail images as links to the subpages. On each subpage, setup more ProGallery stacks. On these subpages, the ProGallery stacks you setup can feature a full lightbox or other functionality. Give all of your ProGallery pages good meta descriptions and keywords for search engines to use. You may wish to add stacks like JumpStack or Options to the subpages, to create an easy method for your website users to navigate between the galleries.

Using multiple ProGallery stacks on the same page

The first thing to note is that it is possible to combine multiple image and video sources within the same ProGallery stack. So as an example, you could make use of Single Dragged Images and Single Video sources in the same stack. This is one of the great features of ProGallery. Therefore you could create quite a sophisticated gallery of mixed media. Just be sure to use a lightbox that supports all the content you want to setup.

If you do want to use multiple ProGallery stacks on the same page, you will firstly need to go into the main ProGallery settings and change the Gallery ID to something unique like mygallery2. Next you'll need to go into your Thumbnail Layout and Lightbox Type sub stacks and update the Scope setting. The scope should equal the Gallery ID value, you setup within the main ProGallery stack. This ensures that the three different components of ProGallery work in harmony and won't risk conflicting with other ProGallery stacks used on the page.