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.
Click on an image below to enlarge photo.
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.
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.
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.
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.
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.
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.
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.
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.
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]