Add a photo gallery to your site

Want to display a group of photos on your site? Stanford Sites now offers a solution for creating your own galleries.

Stanford Gallery joined Stanford Sites during the Summer 2016 Updates. Previously it was only available to our Jumpstart clients, but high demand for this functionality on Stanford Sites, combined with our commitment to contributing back to the greater community brought this module to sites created on Stanford Sites. 

You can create a gallery page or a block to use gallery content types through the Stanford Gallery Bean. The gallery images on this post are generated from the Stanford Gallery Bean placed using the Context module. (Not using Context yet? Learn more about this powerful tool now!)

Add Stanford Gallery to your site

1. Log into your Stanford Sites site.
2. In the Admin toolbar, select Modules.
3. Filter by the word gallery.
4. Select all the Stanford Gallery modules.
5. Click the Save configuration button.
6. In the Admin toolbar, go to People > Permissions.
7. Make sure everyone that needs access to gallery actions has them.

Create a gallery

1. In the Admin toolbar, select Content > Add Content > Gallery.
2. In the Menu Settings tab you can add this gallery to the menu structure of your site, or not. 
3. Click the Save button and admire your new gallery!

Use Stanford Gallery in a Block

Now that you've created a gallery, it can be placed as a block on your site. You will need Administrator privileges on your site.

1. In the Admin toolbar, select Content > Add Block > Stanford Gallery.
2. If you want a Title to display, provide one.
3. Select your desired gallery from the gallery dropdown menu.
4. Choose the View Mode (aka what size will the thumbnails be).
5. Save.
6. Place block (it's in the list of Beans) in Context.

What do the different sizes look like? 

You can compare the different preview thumbnail sizes in our Jumpstart Feature Demos page for Gallery.

But what's the code look like? 

If you're interested in how this module creates a responsive image gallery using the jQuery colorbox plugin, check out our Stanford Gallery code on GitHub.