Shutter excels at creating gorgeous gallery layouts. Below we've built a wedding photo layout using Shutter's Justified thumbnail layout -- one of our favorites.
We've used mostly default settings for this gallery, so you can see that right out of the box Shutter creates some stunning albums. A lot of effort has gone into hand crafting beautiful default settings to help make your life much easier. Give it a look and don't forget to click on the gallery images to explore the lightbox as well.
While Shutter's gallery style layouts are powerful and stylish, we understand that sometimes you need something more compact. For that we built Groups into Shutter. These groups take the first image in the stack and make it our singular thumbnail.
All of the normal styling can be applied to the thumbnail, just as with the Justififed and Masonry layouts. When your visitor clicks on the thumbnail a Lightbox gallery is launched that contains all of your images. Below we've built three different galleries using a Foundry columns stack which contains three separate Shutter stacks that comprise our photo galleries.
While the Justified gallery can have a more squared off look at the bottom and is based on row heights, the Masonry arrangement is focused on fitting everything together in specific sized columns, arranging the images on page load in a brick-like, or Masonry, layout.
We've made some minor tweaks from the default settings, such as removing the gutters and adding rounded corners, but the most noticeable might be the transition animation between slides in the lightbox. Shutter offers several different animation styles for these transitions.
Shutter's Grid layout also provides a back-to-basics, standard gird arrangement, no fancy justified or masonry style layout here. You still have access to many of the same settings as the other two more modern layouts, just applied to the basic Grid design instead.
In this example we've included our images' titles when hovered over. Additionally we've also applied a subtle scaling up of the thumbnails and a slight blur when hovered over.
Shutter doesn't stop at image galleries. We've also built in support for video embeds as well. This allows you to build layouts with custom thumbnails that trigger your video embeds.
This gives a beautiful, professional design for your video galleries and focuses your visitor's attention of your videos as well. Additionally you can mix and match within a Shutter layout as well, including both images as well as video embeds! Below we've built a small gallery that contains a few video embeds, along with several images as well.
In addition to the tutorial walk through video above we also offer detailed documentation for each setting within this stack.
You can find the full documentation and tutorials for Shutter, as well as all of our other products in the Elixir Support Hub.
This stack relies on the Stacks API to load icons and other tools needed for features in this stack. Let's look at the required software as well as the browser support for this stack.
As mentioned, we use the latest Stacks API for this stack to help facilitate its functionality. You'll need the following tools to make use of it for your site:
This stack is designed with modern browsers in mind to give your visitors the best experience possible. It will work nicely in the most recent versions of these browsers: