Our Shutter stack is a versatile image gallery stack for beginners and professionals alike. It is immensely versatile, and with that versatility comes a wide assortment of settings and features.
Below we look at each of the settings included in the Shutter stack and talk about what they do, and how they affect the stack's functionality. In addition we have a tutorial and walk-thru video below that helps get you started using the stack, as well as gives you an idea what the stack can do. For examples of the stack in action, please visit the product page.
Below we look at what each of the settings within the stack does. This is good reference in case you get stuck when building pages, as well as to get an idea of what controls exist in the stack before you purchase it.
Enabling Batch Mode allows you to have Shutter process a folder full of images for you which resides on your server. This mode can work both with your own thumbnails, or can generate thumbnails for you using the Generate Thumbnails option, below.
We cover how to make use of the Batch Mode processing in our tutorial video above. If you're interested in using this feature be sure to watch the video above as it is much easier to show how to use this functionality in a tutorial.
This is the name of the folder, within the batch folder on the server where this Shutter stack's images will reside.
Each page that uses Shutter, in Batch Mode, will have its own separate batch folder. Again, we encourage you to watch the above tutorial to learn how to use Batch processing.
This feature is used in conjunction with both the Batch Mode processing, above, as well as the Auto Generated thumbnails feature found in the Image child stack.
When using this feature with the Batch Mode processing you can leave the feature on at all times.
When used with the Auto Generated thumbnails feature of the Image child stack, we suggest disabling this feature once your final page design is set.
We discuss why, and how this feature works in the Getting Started tutorial video above.
Please Note: When using the Generate Thumbnails option, only JPG images are supported. If you're using Custom thumbnails, and not using the Generate Thumbnails option you can use other image types like PNG. We recommend using JPG images though as they load much faster.
This setting allows you to customize the Edit Mode display a bit to help in organizing your work area. Choose the size you wish your thumbnails to be displayed at in Edit Mode and the stack will size and crop them to fit.
The Shutter stack provides you four different ways to present your photos to the world. It offers 3 different thumbnail gallery layouts as well as the ability to build self contained light boxed groups.
Each of the four different layout types have settings specific to them. Below we'll cover the settings specific to each of these layout types:
Justified items base their layout design around the height of their rows. This setting allows you to set the row height that the stack should use for making its calculations.
The Spacing between each item in the Justified layout. This is applied to both the column and row gutters.
The last row in a Justified layout can act differently depending on your preferences. You can have the last row's items align to the left, center or right of the layout, or use the justified setting which distributes the last row's items across the entirety of the last row, extending from the left all the way to the right.
The order in which the images in the layout appear can be shuffled each time the page is loaded. This can give the design a different look and feel for each visitor.
MOBILE, TABLET & DESKTOP WIDTH
The Masonry layout bases its design around the width of columns, not rows, for each breakpoint. These three settings let you assign basic width settings using a percentage based value. This provides the stack the ability to calculate how it needs to adjust the layout at each breakpoint.
The Spacing between each item in the Masonry layout. This is applied to both the column and row gutters.
Masonry layouts adjust as they see fit based off of the images, their orientation, etc. This setting tells the Shutter stack not to allow more than 5 columns in the layout. Depending on the images and available space though the layout may contain fewer than 5 columns however.
When enabled this feature allows the stack to animate the relocation and sizing of the images when the stack needs to change the layout.
MOBILE, TABLET & DESKTOP SIZE
Shutter's Grid layout bases its design around creating thumbnails of equal height and width. We can set the size for these thumbnails for each individual breakpoint. These sizes are pixel based.
Overall the Grid based layout is super simple and does not require much configuration. We think most users will lean toward the Justified or Masonry layouts when using Shutter, but we wanted to include a Grid based layout for those times when it may come in handy for a specific page design.
MOBILE, TABLET & DESKTOP HEIGHT
For the Group layout we'll be specifying the height of our one featured thumbnail, which links to the light boxed gallery of images. This is much like what we did in our Justified Gallery. The thumbnail image's width will expand to fill whatever containing stack it is placed within, such as a column for example. We highlight the main thumbnail in Edit Mode for you so you always know which image will be used for the thumbnail.
This allows you to specify a title to be shown on the main thumbnail separate from the individual image thumbnail titles.
Allows you to adjust the roundness of the thumbnail images in your thumbnail layout.
BORDER & BORDER COLOR
You're able to choose a border width and border color for your thumbnails. Later on in the overlay section we'll look at setting an overlay border as well, which will be displayed when a visitor hovers their mouse over the thumbnail.
SCALE THUMBNAIL ON HOVER
When enabled a thumbnail will scale up in size gradually. The longer the visitor hovers over the image the more the image scales. This scale effect remains within the bounds of the thumbnail's dimensions. When the visitor removes the cursor from hovering over an item the image quickly scales back down in size.
This setting can be used with the Justified, Masonry and Grid layouts, but is not compatible with Groups.
When enabled you'll also be given settings for the Scale Durations, both in and out, as well as the max amount of scaling.
The thumbnails for all four layout types can have overlay styling which is applied to the thumbnail when your visitor hovers over it. The main Overlay styling is provided by the Overlay Gradient. You may choose two colors that will form a gradient on top of your images. This includes the ability to set the angle of the gradient as well.
Allows you to choose the width and color of the border that will be applied to the thumbnails when hovered over.
This setting provides you the ability to choose where, or when the image's title will be displayed on the thumbnail images. You can have the title appear Always, during Hover or not at all by setting it to None. When enabled you're also provided settings for the following items:
Adjust the background and text colors for the title that is shown on top of the thumbnail image.
Determine whether the title should be on the left- or right-hand side of the thumbnail.
Allows you to adjust the font size for your Title that is displayed on top of your thumbnail. You're given settings for each of the three responsive breakpoints so that you can opt to have the title adjust its size depending on the width of the display.
Allows you to round the corners of the Title's background to customize its look and feel.
Choose from several different animation styles for the image title. This animation is applied to the title when using the Hover mode and is used for animating the Title into view during the hover.
Determine how long it will take for the animation to occur. The larger the value in this field the slower the animation.
This setting provides you the ability to choose to display an icon on top of your thumbnail when the thumbnail is hovered over by your visitors. In addition to toggling this feature on and off there are several settings you can use to customize it as well:
Use this drop down to select from the various different icons types for your image indicator icon. The Image Icon is the one that will be displayed on top of photos in your layout.
This drop down is used to select from the various different icons types for your video indicator icon. The Video Icon is the one that will be displayed on top of video embed's thumbnails in your layout.
Adjust the background and icon colors here. These colors are applied to both the Image and Video icons.
This setting provides you two size controls. One is used to set the size of the icon's background, in which the icon itself is contained. The other setting allows you to adjust the sizing of the icon itself.
This feature adds a soft drop shadow to the both the Image and Video icons. When enabled this setting allows you to adjust the color of the shadow.
The Shutter stack's lightbox is not only a beautiful way to display your photos, it also offers you a good deal of control over refining how it not only looks but also how it functions for your visitors. Let's look at the many toggles available to use for customizing the lightbox portion of the Shutter stack:
When enabled the slider contained within the lightbox will loop back to the first slide when the visitor has reached the end of the series of images in that gallery. This can be because the visitor clicked the next arrow at the end of the slideshow of because autoplay advanced past the last image in the series.
Allows you to control whether navigation arrows are shown for the slider within the lightbox.
The Shutter lightbox can be configured to show a thumbnail of each of the gallery's image at the bottom of the screen. These thumbnails can be used by the visitor as a reference point as well as a way to navigate through your imagery.
The pagination dots can also be used as an alternate way for visitors to navigate the slides. You can use these in combination with arrows and / or thumbnails, or in place of them.
When enabled this setting forces your slides to auto advance. The autoplay feature will pause on each slide for a specific amount of time. You're able to adjust this Pause Duration further down in the settings to make the pause time shorter or longer to meet your needs.
This allows you to include controls within the lightbox itself so that your visitors can control the autoplay feature.
Enabling this control adds a progress bar to the top of the lightbox. This progress bar is used for the Autoplay functionality. It shows the visitors how far through the pause duration they are for each slide. You're able to configure the colors for the progress bar further down in the settings.
When turned on this allows the visitor to use their keyboard's arrow keys to navigate through your slides within the lightbox.
This option includes a download button within the lightbox that allows your visitors to download the images from your slider. This can be useful for when you want to offer your visitors the ability to have a copy of your images for themselves.
This preference, when enabled, adds social media sharing buttons to the lightbox. This let's your visitors easily share your imagery on social media.
When turned on this feature adds a fullscreen button to the lightbox, allowing your visitors to expand your lightbox even wider.
This feature enables your visitors to zoom in on your images to see them more closely.
Allows you to change the background color of your lightbox. This is the background seen behind your images between them and your main site. Adjusting this color, and its opacity can give you a custom look and feel for your site.
These color picker controls adjust the background and text colors for the title bar within the lightbox. This is the area where each image's title is shown. You can set both to 0% opacity if you'd like to hide the title bar altogether.
Four color pickers aimed at allowing you to adjust the different states of the pagination dots, when enabled.
A set of color pickers that are used to adjust the normal and hover state colors for the icons in the lightbox interface.
Adjusts the width of the thumbnails displayed at the bottom of the lightbox when you have enabled the Thumbnails option. This allows you to customize their display within the lightbox for your particular needs.
When using the progress bar option for your autoplay lightboxes you can use these features to adjust the colors for the progress bar as well as the height, or thickness, or the bar.
The Shutter lightbox provides several very elegant animation transition effects for your slider. This drop down allows you to choose which animation to apply to your slides. The transition animation is applied to both autoplay transitions as well as manual transitions triggered by your visitors.
This setting determines how fast or slow the slider will transition from one slide to the next. The larger the value the slower the transition.
This is where you can configure how long you wish the autoplay feature to pause on each slide. The larger the value the longer it will pause on a slide. For approximation purposes, 1000ms is equal to 1 second. So the default pause duration of 8000ms means the slide will be displayed for 8 seconds before transitioning to the next slide.
Turning this feature on will cause embedded video slides to play automatically when they appear in the slider. We highly discourage using this feature with autoplay enabled. It makes for a poor experience for your visitors.
This controls the size of the text for your captions within the lightbox display.
These two toggles allow you to apply some simple basic protections to your images. You can opt to prevent visitors from using drag-and-drop to pull an image from your page onto their computer. Likewise you can also enable the right-click protection which prevents visitors from right-clicking on your images to save them to their computer.
While these options can help to curtail the theft of your imagery, nothing can completely prevent visitors from stealing your images. There are plenty of other ways that they can steal them that we as developers cannot protect against. These settings really only keep honest visitors honest.
COLLAPSE IN EDIT MODE
When you're not working on your Shutter stack's individual images you can enable this feature which will tidy up Edit Mode for you a bit, hiding the images from view, making it simpler to work on your page.
IMAGE & VIDEO
Below we'll detail the few settings for the two child stacks found within the Shutter parent stack.
This is the location where you'll insert your individual, full sized images for your Shutter layout and lightbox.
You can opt to have shutter auto generate your thumbnails for you or choose to provide a custom thumbnail of your own. Shutter will also allow you to have the full-size image used as the thumbnail as well.
This is the text that will appear for the image thumbnail title as well as below the image in the lightbox.
Choose whether you'd like your video embed to be wither a YouTube or Vimeo video. You'll get an appropriate field, based on your choice, for the video's ID.
This is the field you'll use to provide a thumbnail image for your video embed.
This is the text that will appear for the video thumbnail title as well as below the video in the lightbox.
Auto Generated Thumbails
Please note that when using the Auto Generated thumbnails option for your Image child stack, Shutter will auto generate those thumbnails only when the Generate Thumbnails feature, in the main parent Shutter stack, is enabled. Once you've finalized your layout, disable that Generate Thumbnails option to provide a faster loading page for your visitors. If you ever change your Shutter content you can re-enable that feature to have Shutter re-generate your thumbnails for you.