show most recent case studies (#6640)

* show most recent case studies * change card hero object-fit
GoogleChrome · Nov 2, 2021 · 1070fe2 · 1070fe2
1 parent 4fd2be6
commit 1070fe2
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 21 deletions.
diff --git a/src/scss/blocks/_card.scss b/src/scss/blocks/_card.scss
@@ -114,7 +114,7 @@
 .card__hero {
   width: 100%;
   aspect-ratio: 5/3;
-  object-fit: cover;
+  object-fit: contain;
   border-radius: $global-radius-large;
 }
 

diff --git a/src/site/_includes/homepage-next.njk b/src/site/_includes/homepage-next.njk
@@ -108,26 +108,34 @@ CSS_ORIGIN: 'next'
         </div>
       </div>
       <div class="homepage__case-studies switcher gap-top-size-2">
-      {% for item in collections['case-study'] %}
-        {# For some reason, splice() was messing up the data... #}
-        {% if loop.index <= 2 %}
-        <article class="card">
-          {% Img src=item.data.hero, alt=item.data.alt, width="570", height="330", class="card__hero" %}
-          <div class="card__content flow">
-            <h3 class="card__heading text-size-3">
-              <a href="{{ item.url }}">{{ item.data.title }}</a>
-            </h3>
-            <p>{{ item.data.description }}</p>
-          </div>
-          <div class="card__tags cluster gap-top-size-1" aria-label="tags for this case study">
-            {% for tagKey in item.data.tags or [] %}
-              {% if tagKey in collections.tags %}
-                {% set tag = collections.tags[tagKey] %}
-                <a class="pill" href="{{ tag.url }}">{{ tag.overrideTitle or tag.title | i18n(locale) }}</a>
-              {% endif %}
-            {% endfor %}
-          </div>
-        </article>
+      {% set cardCount = 0 %}
+      {% for item in collections['case-study'] | reverse %}
+        {% if cardCount <= 1 %}
+          {% if item.data.hero %}
+            {% if not item.data.alt %}
+              {% set alt = '' %}
+            {% else %}
+              {% set alt = item.data.alt %}
+            {% endif %}
+            <article class="card">
+              {% Img src=item.data.hero, alt=item.data.alt, width="570", height="330", class="card__hero" %}
+              <div class="card__content flow">
+                <h3 class="card__heading text-size-3">
+                  <a href="{{ item.url }}">{{ item.data.title }}</a>
+                </h3>
+                <p>{{ item.data.description }}</p>
+              </div>
+              <div class="card__tags cluster gap-top-size-1" aria-label="tags for this case study">
+                {% for tagKey in item.data.tags or [] %}
+                  {% if tagKey in collections.tags %}
+                    {% set tag = collections.tags[tagKey] %}
+                    <a class="pill" href="{{ tag.url }}">{{ tag.overrideTitle or tag.title | i18n(locale) }}</a>
+                  {% endif %}
+                {% endfor %}
+              </div>
+            </article>
+            {% set cardCount = cardCount + 1 %}
+          {% endif %}
         {% endif %}
       {% endfor %}
       </div>