From 1070fe27fc40cef54f2b4a03cf17a3b7881ddbc4 Mon Sep 17 00:00:00 2001
From: Ewa <devnook@gmail.com>
Date: Tue, 2 Nov 2021 13:43:48 +0100
Subject: [PATCH] show most recent case studies (#6640)

* show most recent case studies

* change card hero object-fit
---
 src/scss/blocks/_card.scss           |  2 +-
 src/site/_includes/homepage-next.njk | 48 ++++++++++++++++------------
 2 files changed, 29 insertions(+), 21 deletions(-)

diff --git a/src/scss/blocks/_card.scss b/src/scss/blocks/_card.scss
index 6120b1632ca..a5a81bdd730 100644
--- 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
index cb53950d135..d419a07d9dc 100644
--- 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>