Gallery Stack Tutorial

Video

Testproject

Basics

Add Gallery Stacks 3 to a Stacks Plugin Page

In order to be able to use Gallery Stack 3, add a Stacks Plugin page to your project. Open the Stacks library and search for Gallery 3. Drag and drop the stack to your Stacks Plugin page.

Stacks Image 327779

Select a Grid (and Lightbox) or Slider Component

In order to select different components (grid, slider, or lightbox) select the (+) / Add button for adding one of the component stacks.

When adding a grid component, another container for the lightbox component will appear.

It is possible to remove components by clicking on the (x) / Delete button.

Stacks Image 327787
Stacks Image 327789
Stacks Image 327791

Select Images or Integration Stacks

Different image stacks are available for adding images to the stack.

  • Image (default image stack, same as drag and drop images to the stack via finder)
  • Image + Thumbnail 400px (automatic thumbnail creation - thumbnail display height can be adjusted in grid options)
  • Remote Image (via Remote Image Stack Integration)
  • Total/Easy CMS Image Integration (Best for Easy CMS Images)
  • Total CMS Gallery Integration
  • Total CMS Blog Gallery Integration

For the CMS Integration stacks, download Total CMS v1.2 latest beta. No Total CMS licence is required for Easy CMS Image Integration.

Stacks Image 327799

Finished Edit Mode

Stacks Image 327807

Change Photo Columns in Edit Mode

It is possible to change the amount of columns in edit mode for better display.

Stacks Image 327751

Change Photo Captions and Size of Photo in Lightbox

In order to change the screen resolution or caption text of the added image for lightbox display, double click on the image. In the stack inspector info window, it is possible to add Alt Tag and Max Width / Height settings.

Stacks Image 327771
Stacks Image 327741

Change Square Thumbnails in Image + Thumbnail 400px Stack

The automatic thumbnail creation stack is also able to create square thumbnails.

Stacks Image 327749

Change Grid Settings

In order to change grid, slider, or lightbox component options, select the repective stack and change options in the stack inspector info window.

Stacks Image 327759
Stacks Image 327761

Change Lightbox Settings

Stacks Image 327769

FTP Folder / Web Directory Integration (aka Photostream)

In order to display photos from a directory on your server, add a Photostream Web Directory child stack.

The easiest way to link a directory is via checking Absolute path starting from (project) root. In the following example, the images are loaded from /photos/gallery1, starting from the root where your project is published to.

In addition, you are able to put dedicated thumbnail files in a sub-directory of your photos folder (in that example /photos/gallery1/thumbs) with smaller file size for faster thumbnail gallery performance. Image names and amount of images has to be the same as in the main folder.

As captions, IPTC data stored inside the image is able to be be used, currently limited to the following attributes:

  • Headline (105)
  • Title (005)
  • Copyright (216)
  • Caption/Abstract (120)
  • Date Created (55)
  • File Name itself
Stacks Image 331530

Dynamic Photo Galleries via PHP Variable

It is possible to create programately dynamic photo galleries:

  • Therefore, a PHP variable declaration is needed (screenshot 1), which can be set by a blog post or custom code.
  • In the FTP Folder / Web Directory Integration (aka Photostream) you need to enter that variable inside the directory settings with " . $variable_name . " (screenshot 2).
  • Gallery Stack will display the pictures inside the given path (screenshot 3).
Stacks Image 331547
Stacks Image 331545
Stacks Image 331543

Pulse CMS Integration

For more information, have a look here: https://instacks.com/pulsecmsstack/tutorial/#gallery3

Total CMS Gallery Integration

Stacks Image 327815
Stacks Image 329751

Total CMS Blog Gallery Integration

Stacks Image 327823
Stacks Image 329749

Easy CMS Integration

Stacks Image 327831
Stacks Image 329747

Armadillo Integration

Add a Gallery Stack instance with Armadillo Integration Stack to a Armadillo page or blog inside RapidWeaver. Afterwards, add pictures via insert or drag and drop to a page or blog post. Inserting pictures directly inside HTML or Markdown inside Armadillo will also work.

Stacks Image 331505
Stacks Image 331534
Stacks Image 331509
Stacks Image 331507

Apple iCloud Album

In order to use the Apple iCloud Album Integration, you need publicly shared Apple iCloud Photo Album. Put the URL of the photo stream into the URL setting. Example URL: https://www.icloud.com/photostream/#A2GWZuqDGlcU43

For more information how to create a public photo stream, have a look here: https://support.apple.com/kb/PH12068?viewlocale=en_US&locale=en_US.

Displaying hundreds of photos could be quite time consuming. Therefore, it is possible to limit the amount of photos to be loaded from the photo stream.

Adobe Behance Projects

Sign up for a Behance Developer Key here: https://www.behance.net/dev/apps
Enter the key in the respective setting.

After creating a project, enter the project ID into the respective setting.
The project ID is visible in the project URL like in this example: https://www.behance.net/gallery/52870985/Grid-Test

Gallery Stack 3

Gallery Stack