Image modals

src/_collections/_update_template.md

@@ -43,3 +43,5 @@ The thumbnail displayed in the main collection has an enforced size of 80px by 6
 The image in the individual update page has a width of 320px. _The height is not enforced._ 
 
 With these constraints in mind, the best image size is 320px by 240px. It is fine if the image is larger. It will likely shrink just fine on the main updates page, but be sure to check over the thumbnail on the collections page. 
+
+For an example, see `"assets/img/updates/roadmap-08-2024.png"`. It's much larger than the recommended size, and it's not of the right shape, but it displays well enough. 

src/_collections/updates/2024-08-21.md

@@ -4,7 +4,7 @@ date: "2024-08-21"
 title: August 2024
 description: Historical data migration, Submission exceptions, Fixes and improvements
 image_path: "assets/img/updates/roadmap-08-2024.png"
-image_alt: The Federal Audit Clearinghouse's 2025 Product Roadmap
+image_alt: The Federal Audit Clearinghouse's 2025 Product Roadmap.
 image_caption: To help you understand our work, we’ll provide regular updates on the work we’re doing and what’s next. 
 ---
 The Federal Audit Clearinghouse team works in the open. Our day-to-day task board can be found on [Github](https://github.com/orgs/GSA-TTS/projects/11/views/2) and prior updates are available in [our archive]({{ config.baseUrl }}updates/archive).

src/updates/updates-layout.njk

@@ -32,13 +32,64 @@ eleventyComputed:
     {# Image and caption, if they exist. #}
     {% if post.data.image_path and post.data.image_alt %}
       <div class="float-right width-mobile margin-left-3 margin-bottom-3">
-        <img src="{{config.baseUrl}}{{post.data.image_path}}" style="border: 1px solid #555;" alt="{{post.data.image_alt}}"/>
+        <img src="{{config.baseUrl}}{{post.data.image_path}}" style="border: 1px solid #555;" alt="{{post.data.image_alt}}" aria-controls="image-modal" data-open-modal/>
         {% if post.data.image_caption%}
-            <p class="text-italic text-primary font-sans-sm margin-bottom-0 margin-top-1">{{post.data.image_caption | safe}}</p>
+          <p class="text-italic text-primary font-sans-sm margin-bottom-0 margin-top-1">{{post.data.image_caption | safe}}</p>
         {% endif %}
       </div>
     {% endif %}
 
+    {# Image modal content #}
+    <div class="usa-modal usa-modal--lg"
+         id="image-modal"
+         aria-labelledby="image-modal-heading"
+         aria-describedby="image-modal-description">
+      <div class="usa-modal__content">
+        <div class="usa-modal__main">
+          <h2 class="usa-modal__heading" id="image-modal-heading">
+            Image
+          </h2>
+          <img src="{{config.baseUrl}}{{post.data.image_path}}"
+               style="border: 1px solid #555;"
+               alt="{{post.data.image_alt}}"/>
+          <div class="usa-prose">
+            <p id="image-modal-description">
+              {{post.data.image_alt}}
+            </p>
+          </div>
+          <div class="usa-modal__footer">
+            <ul class="usa-button-group">
+              <li class="usa-button-group__item">
+                <button
+                  type="button"
+                  class="usa-button"
+                  data-close-modal
+                >
+                  Go back
+                </button>
+              </li>
+              <li class="usa-button-group__item">
+                <a class="usa-button usa-button--unstyled padding-105 text-center"
+                   href="{{config.baseUrl}}{{post.data.image_path}}"
+                   target=_blank
+                   rel="noopener noreferrer">
+                  Open image in a new tab
+                </a>
+              </li>
+            </ul>
+          </div>
+        </div>
+        <button type="button"
+          class="usa-button usa-modal__close"
+          aria-label="Close this window"
+          data-close-modal>
+          <svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
+            <use xlink:href="{{ config.baseUrl }}assets/img/sprite.svg#close"></use>
+          </svg>
+        </button>
+      </div>
+    </div>
+
     {# Post content and recent updates collection #}
     <div class="margin-top-3 margin-bottom-6">{{ post.content | safe }}</div>
     {% include 'components/updates/collection_recent_updates.njk' %}