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 is generated using a photogallery shortcode tag, inside which you create a ul (unordered list). Each item in the unordered list uses 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 and paragraph tag 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="http://www.montclair.edu/samples/wp-content/uploads/sites/12/2017/03/MYTH-STUDIES-300x200.jpg" alt="Photo of Rocky posing in front of NYC skyline" 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/samples/wp-content/uploads/sites/12/2017/03/Jewish-American-Studies-300x225.jpg" alt="Photo of students sitting on quad." 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="http://www.montclair.edu/samples/wp-content/uploads/sites/12/2017/03/Dance-1-300x225.jpg" alt="Photo of students performing a dance recital" 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="http://www.montclair.edu/samples/wp-content/uploads/sites/12/2017/03/Cognitive-Science-300x200.jpg" alt="Photo of hawk statue in front of Kasser Theater." 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/samples/wp-content/uploads/sites/12/2017/03/Animation-and-Illustration-1-300x200.jpg" alt="Photo of animation intern in front of Smurfs promotional statue." 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/samples/wp-content/uploads/sites/12/2017/03/African-American-Studies-1-300x169.jpg" alt="Photo of student sitting at desk in class." 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="http://www.montclair.edu/samples/wp-content/uploads/sites/12/2017/03/Accounting-1-300x200.jpg" alt="Photo of professor pointing at whiteboard notes." 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/samples/wp-content/uploads/sites/12/2017/03/090716_5678_Students-Campus-300x200.jpg" alt="Photo of students sitting at cafeteria table talking." 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>
</ul>
[/photogallery]