Setting up a Clearing Gallery

Here is a basic overview of setting up a Clearing Gallery page.

When you drop the Clearing Gallery stack onto a stacks page, you will see something like this:

Now you need to drop Clearing Gallery Image stacks. You will need one image stack for each image in your gallery. As you add them to the Clearing Gallery stack, it will look like this:

Each Image stack has two image wells. One for the Full sized version of your image, and one for the thumbnail version of your image.

Once you are at this stage, you will want to start setting up thumbnail versions of each image you are going to include in the gallery. This can be done with Preview or any other image editing app out there. Once your images are ready, you will then need to drop the smaller thumbnail version on the image well that says Thumbnail next to it and the full sized image version in the image well that says Full Image next to it. The image will only appear in the stacks page once you add the thumbnail veresion.

Clearing Gallery Stack Settings

Now let's move onto the settings for the Clearing Gallery stacks.

All of these settings are not on by default, but I turned them on so you can see all of the settings, as some of them are not seen until you check a box.

Frame Thumbs? - This will put a white frame around the thumbnails of the gallery. The frame will also have a highlight color around it as you mouse over the image.

Round Frame Corners? - This will only appear if you check the above setting. This will round the corners of the Frame.

Featured Image Support? - If checked, it will only display the Clearing Gallery Image stacks that have the Featured Image box checked (see below).

Custom Styles? - If you check this box, two color settings, the Lightbox Bg (Lightbox Background) and the Lightbox Font, will appear. This gives you some customization of the Background and Font colors.

Block Grid Layout? - This will give the thumbnail images a grid like design.

Vertically Centered Images? - This will align images that are not all of the same height, for example, if you have a landscape image and a portrait image in the same gallery.

Top Align on Mobile? - This will align the images closer to the top on a mobile device and not cetnered.

Define Tablet Sizing? & Define Desktop Sizing? - When checked, two new sliders will appear at the bottom of the settings. They will give you the option to add more columns to the Tablet and Desktop views.

Clearing Image Stack Settings

Below is a screenshot of the Clearing Image Stack settings.

Full Image & Thumbnail Image - These are the drop wells for the images you will use for your Gallery. If you do not want to drag and drop them here, you can then check the Warehouse Images? box and link options will appear.

Alt Tag - This is where you will add the Alt Tag for the image for SEO. We highly recommend you put something unique to the image here.

Caption Text - If you want to have captions to the Thumbnail or to the Lightbox image, here is where you would it.

Thumb Caption & Lightbox Caption - Here you can turn the captions on and either use the Caption text or the Alt Tag text.

Featured Image? - If you turn on this setting in the Clearing Gallery settings above, you will need to check at least ONE of these settings for one image or no images from your gallery will appear.

We hope this setup tutorial of the Clearing Gallery has helped you out. Please send any questions to support(at)joeworkman(dot)net.

Now go forth and make your websites great!

Video Tutorial