October 7, 2022

Pop-up Image Modals for USU Extension Web Pages

Sunset over Cedar Fort — Example of a pop-up image modal for USU Extension websites. An enlarged version of the image pops up when the photo is clicked. The magnifying glass icon is automatically displayed in the lower left corner. The image's alt tag text is displayed as a caption in the modal.

When creating web pages, sometimes it's important to give veiwers the ability to enlarge a photo to view more details or a larger image. The pop-up image modal for USU Extension websites allows this. This is especially helpful for research articles.

Add the Dependency Tag to the Bottom of the Page

The first step to making popup image modals on Extension sites is to add the following dependency tag to the page you want the modal to appear on: {{a:264744}}. The dependency tag links the JavaScript and style sheet that make the modal function to the page. Paste the depency tag at the bottom of the page's source code before the closing </content> tag.

Give the Image the Proper Class and ID

Give any image you want to open in a pop-up modal the class of ext-modal-images and the ID of modal-image. It might be helpful to wrap the image in a <figure> tag.

The image tag will look like this:

<figure class="figure"><img src="dependency tag" alt="alt text" class="ext-modal-images" id="modal-image"/></figure>

The modal images also work with USU Extension's responsive, floating images (as seen at the top of this artice. To do so, use the following code:

<figure class="figure float-md-right mr-md-3 article-figure">
<img src="dependency tag" alt="Alt text here" class="ext-modal-images" id="modal-image"/>
</figure>

Add the Alt Text/Modal Caption

The alt text for each image will act as its caption when the modal opens. Keep accessibility in mind. The caption that appears in the modal should work as both alt text for accesibility purposes and as a caption for the image. Avoid using punctuation in the alt text. The caption for the modal can be different than the caption that displays on the page below its image.