Topics

Video

Stacks Image 13

Test Project

Download

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 27

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 31
Stacks Image 33
Stacks Image 35

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 39

Finished Edit Mode

Stacks Image 43

Change Photo Columns in Edit Mode

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

Stacks Image 47

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 51
Stacks Image 53

Change Square Thumbnails in Image + Thumbnail 400px Stack

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

Stacks Image 57

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 61
Stacks Image 63

Change Lightbox Settings

Stacks Image 67

FTP Folder / Web Directory Integration

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 73

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 79
Stacks Image 81
Stacks Image 83

Pulse CMS Integration

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

Total CMS Gallery Integration

Stacks Image 93
Stacks Image 95

Total CMS Blog Gallery Integration

Stacks Image 99
Stacks Image 101

Easy CMS Integration

For a detailed Easy CMS integration, have a look at the dedicated tutorial page: Gallery 3 Easy CMS

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 115
Stacks Image 117
Stacks Image 119
Stacks Image 121

iCloud Photo 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