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]