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="http://www.montclair.edu/university-communications/wp-content/uploads/sites/144/2022/02/091121_5502_Day-Of-Service-scaled-1.jpeg" alt="Montclair Community Farm" width="2560" height="1920" />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/university-communications/wp-content/uploads/sites/144/2024/03/011524_14931_Communication-Sciences-and-Disorders.jpg.2.1x.wide_.jpg" alt="A student wears virtual reality goggles." width="300" height="250" /> 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/university-communications/wp-content/uploads/sites/144/2023/06/05312023_0735_Bonner_Summer_Leadership_1-LAROSA-Enhanced-NR.jpg.4.1x.wide_.jpg" alt="Students in a crowd smile and applaud." width="300" height="250" /> 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/university-communications/wp-content/uploads/sites/144/2023/02/Cali-Pathways-12-17-2022-140.jpg" alt="Female student playing violin listens to female instructor." width="300" height="250" /> 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/university-communications/wp-content/uploads/sites/144/2024/08/042224_23583_Students-on-campus-1.jpg" alt="Student working on their laptop." width="300" height="250" /> 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/university-communications/wp-content/uploads/sites/144/2023/05/051623_0832_Senior_Night-LAROSA-Enhanced-NR.jpg.2.1x.wide_.jpg" alt="Two spectators watch fireworks exploding over a ballpark." width="300" height="250" /> 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/university-communications/wp-content/uploads/sites/144/2024/03/03222024_1080_Yogi_Berra_Game_Pitch-LAROSA1.jpg.4.1x.wide_.jpg" alt="" width="300" height="250" /> 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/university-communications/wp-content/uploads/sites/144/2024/11/101524_76029_Students-Campus.png" alt="Students walking in front of Cole Hall at sunset" width="300" height="250" /> 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]