Stacks4Stacks

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.

 
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.



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.