From a4fb9cd25631f012eb0d0912cdd85e719c3e80c1 Mon Sep 17 00:00:00 2001
From: Bryan Stopp <bstopp@users.noreply.github.com>
Date: Tue, 19 Dec 2023 10:02:47 -0600
Subject: [PATCH] Fix images in default content. (#184)

---
 blocks/cards/cards.css         |  8 ++++++--
 blocks/cards/cards.js          | 14 +++++++++++++-
 blocks/separator/separator.css |  4 ++++
 scripts/scripts.js             |  9 +++++++++
 styles/styles.css              | 17 +++++++++++++++++
 5 files changed, 49 insertions(+), 3 deletions(-)

diff --git a/blocks/cards/cards.css b/blocks/cards/cards.css
index 72d1dded..be9ac607 100644
--- a/blocks/cards/cards.css
+++ b/blocks/cards/cards.css
@@ -33,6 +33,11 @@
   padding: 0;
 }
 
+.cards.block.cards-1-cols .cards-list .card-image {
+  margin-bottom: 25px;
+}
+
+
 .cards.block .cards-list .cards-item .card-image {
   position: relative;
   display: flex;
@@ -47,12 +52,11 @@
   position: relative;
   height: 100%;
   width: 100%;
-  padding-bottom: 66%;
 }
 
 .cards.block .cards-list .cards-item .card-image img {
   position: absolute;
-  top: 0;
+  bottom: 0;
   left: 0;
   object-fit: cover;
   object-position: center;
diff --git a/blocks/cards/cards.js b/blocks/cards/cards.js
index 67cfd2a0..183c0acd 100644
--- a/blocks/cards/cards.js
+++ b/blocks/cards/cards.js
@@ -14,7 +14,7 @@ export default function decorate(block) {
   list.classList.add('cards-list');
   block.append(list);
 
-  // add logic for check-list case
+  // add logic for checklist case
   if (block.classList.contains('icons')) {
     block.classList.add('cards-2-cols');
     cards.forEach((row) => {
@@ -24,6 +24,7 @@ export default function decorate(block) {
       list.append(row);
     });
   } else {
+    let ratio = 9999;
     block.classList.add(`cards-${cards.length}-cols`);
     cards.forEach((row) => {
       row.className = 'cards-item';
@@ -32,6 +33,11 @@ export default function decorate(block) {
           // update container for picture with label
           div.classList.add('card-image');
           const picture = div.querySelector('picture');
+          const img = picture.querySelector('img');
+          const tmp = (parseInt(img.height, 10) / parseInt(img.width, 10)) * 100;
+          if (tmp < ratio) {
+            ratio = tmp;
+          }
           const paragraphElement = document.createElement(('p'));
           paragraphElement.textContent = div.textContent.trim();
           div.replaceChildren(picture, paragraphElement);
@@ -39,6 +45,12 @@ export default function decorate(block) {
           div.classList.add('card-body');
         }
       });
+      // Pad the picture with the smallest ratio image.
+      [...row.children].forEach((div) => {
+        if (div.querySelector('picture')) {
+          div.querySelector('picture').style.paddingBottom = `${ratio}%`;
+        }
+      });
       list.append(row);
     });
   }
diff --git a/blocks/separator/separator.css b/blocks/separator/separator.css
index 7428b59e..bee3afae 100644
--- a/blocks/separator/separator.css
+++ b/blocks/separator/separator.css
@@ -5,3 +5,7 @@
   border: none;
   background: var(--platinum);
 }
+
+.separator.block.padded {
+  margin: 30px 0;
+}
diff --git a/scripts/scripts.js b/scripts/scripts.js
index 98c10d92..84b3b317 100644
--- a/scripts/scripts.js
+++ b/scripts/scripts.js
@@ -150,6 +150,14 @@ function decorateVideoLinks(main) {
     });
 }
 
+function decorateImages(main) {
+  main.querySelectorAll('.section .default-content-wrapper picture').forEach((picture) => {
+    const img = picture.querySelector('img');
+    const ratio = (parseInt(img.height, 10) / parseInt(img.width, 10)) * 100;
+    picture.style.paddingBottom = `${ratio}%`;
+  });
+}
+
 /**
  * Build Floating image block
  * @param {Element} main The container element
@@ -252,6 +260,7 @@ export function decorateMain(main) {
   decorateSections(main);
   decorateBlocks(main);
   decorateVideoLinks(main);
+  decorateImages(main);
 }
 
 /**
diff --git a/styles/styles.css b/styles/styles.css
index 4459ea49..3e3756c3 100644
--- a/styles/styles.css
+++ b/styles/styles.css
@@ -304,6 +304,23 @@ main .section .default-content-wrapper h4 {
   margin-bottom: 1.25em;
 }
 
+main .section .default-content-wrapper picture {
+  display: block;
+  position: relative;
+  height: 100%;
+  width: 100%;
+}
+
+main .section .default-content-wrapper picture img {
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  left: 0;
+  bottom: 0;
+  object-fit: cover;
+  object-position: center;
+}
+
 /* common styles */
 @keyframes spinner-spin {
   0% { transform: rotate(0deg); }