Photo of desk with computer monitor displaying Montclair State University website.

Photo Gallery

The montclair.edu framework photo gallery was created with the goal of maximizing accessibility while also keeping editing simple. The gallery appears as a grid and expands to full screen when an image is clicked.

To build a gallery, use the photogallery shortcode tag, with an unordered list (ul) inside. Each item in the unordered list needs a photogalleryitem shortcode to pair an image with a caption.

Because the photogallery supports image resizing, please only use JPEG files in your gallery.

Tip: in order to give visitors a clear indication of what’s in your photo gallery, it’s usually best to put an h2 Title and descriptive paragraph before the photo gallery.

Example

Here is a sample photo gallery.

Attributes

The photogallery and photogalleryitem shortcodes do not have any attributes.

Code Sample

[photogallery]
<ul>
 	<li>[photogalleryitem]<img src="/wp-content/uploads/sites/119/2017/12/Marine-biology-header-photo.jpg" alt="Photo of hands holding jar with small jellyfish inside." />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at posuere risus, quis sagittis tellus. Vivamus efficitur dui ut leo congue aliquam. Sed malesuada augue quis orci imperdiet ultrices. [/photogalleryitem]</li>
 	<li>[photogalleryitem]<img src="/wp-content/uploads/sites/119/2017/12/Chemistry-header-photo.jpg" alt="Photo of student holding molecule model and comparing it to photo of molecule on computer screen." width="300" height="225" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at posuere risus, quis sagittis tellus. Vivamus efficitur dui ut leo congue aliquam. Sed malesuada augue quis orci imperdiet ultrices. [/photogalleryitem]</li>
 	<li>[photogalleryitem]<img src="/wp-content/uploads/sites/119/2017/12/022117_3438_Nursing-RN-BSN.jpg" alt="Photo of smiling RN-BSN student." width="300" height="225" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at posuere risus, quis sagittis tellus. Vivamus efficitur dui ut leo congue aliquam. Sed malesuada augue quis orci imperdiet ultrices. [/photogalleryitem]</li>
 	<li>[photogalleryitem]<img src="/wp-content/uploads/sites/119/2017/12/022417_1859_CART-West-Side-Story.jpg" alt="Photo of three student dancers performing in West Side Story play." width="300" height="200" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at posuere risus, quis sagittis tellus. Vivamus efficitur dui ut leo congue aliquam. Sed malesuada augue quis orci imperdiet ultrices. [/photogalleryitem]</li>
 	<li>[photogalleryitem]<img src="/wp-content/uploads/sites/119/2017/12/042817_4879_Campus-Students.jpg" alt="Photo of student sitting and writing outside on a sunny day on campus." width="300" height="200" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at posuere risus, quis sagittis tellus. Vivamus efficitur dui ut leo congue aliquam. Sed malesuada augue quis orci imperdiet ultrices. [/photogalleryitem]</li>
 	<li>[photogalleryitem]<img src="/wp-content/uploads/sites/119/2017/12/022516_7871_The-Producers.jpg" alt="Photo of lit up set during student performance of The Producers play." width="300" height="169" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at posuere risus, quis sagittis tellus. Vivamus efficitur dui ut leo congue aliquam. Sed malesuada augue quis orci imperdiet ultrices. [/photogalleryitem]</li>
 	<li>[photogalleryitem]<img src="/wp-content/uploads/sites/119/2017/12/042817_5137_Campus-Students.jpg" alt="Photo of men playing soccer on campus." width="300" height="200" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at posuere risus, quis sagittis tellus. Vivamus efficitur dui ut leo congue aliquam. Sed malesuada augue quis orci imperdiet ultrices. [/photogalleryitem]</li>
<li>[photogalleryitem]<img src="http://www.montclair.edu/web-services/wp-content/uploads/sites/119/2017/12/091715_1656_Night-Campus-300x225.jpg" alt="Photo of campus building at night." width="300" height="225" class="alignnone size-medium wp-image-751" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at posuere risus, quis sagittis tellus. Vivamus efficitur dui ut leo congue aliquam. Sed malesuada augue quis orci imperdiet ultrices. [/photogalleryitem]</li>
</ul>
[/photogallery]