Gallery Stack Tutorial

Video

Stacks Image 331591

Test Project

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 331614

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 331618
Stacks Image 331620
Stacks Image 331622

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 331626

Finished Edit Mode

Stacks Image 331630

Change Photo Columns in Edit Mode

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

Stacks Image 331634

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 331638
Stacks Image 331640

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 331646
Stacks Image 331648

Change Lightbox Settings

Stacks Image 331652

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 331656

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 331664
Stacks Image 331666
Stacks Image 331668

Pulse CMS Integration

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

Total CMS Gallery Integration

Stacks Image 331675
Stacks Image 331677

Total CMS Blog Gallery Integration

Stacks Image 331681
Stacks Image 331683

Easy CMS Integration

Stacks Image 331691
Stacks Image 331693

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 331701
Stacks Image 331703
Stacks Image 331705
Stacks Image 331707

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

inStacks Software

Gallery Stack 3

Gallery Stack

Wir benutzen Cookies / We use cookies. Info: Datenschutzerklärung / Privacy Policy