feat(partner): refactor partner block to use responsive logo images

website/modules/asset/ui/src/scss/_cases.scss

@@ -1403,55 +1403,25 @@
   position: absolute;
   top: 0px;
   left: 20px;
-
 
   @include breakpoint-medium {
     top: 40px;
     left: 0;
   }
 }
 
-.cs_partnership-box {
-  background-color: $white;
-  padding: 8px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  text-align: center;
-
-  @include breakpoint-medium {
-    width: 114px;
-    padding: 12px;
-  }
-}
-
-.cs_partnership-label {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-
-.cs_partnership-text {
-  @include font-settings(9px, 100%, $font-weight-extra-bold);
-  color: $gray-500;
-  text-transform: uppercase;
-
-  @include breakpoint-medium {
-    @include font-settings(11px, 110%, $font-weight-extra-bold);
-  }
+.cs_partnership-picture {
+  display: block;
 }
 
 .cs_partnership-logo {
-  max-width: 100%;
-  height: auto;
-  max-height: 36px;
-  width: auto;
+  width: 66px;
+  height: 66px;
   object-fit: contain;
   display: block;
 
   @include breakpoint-medium {
-    max-height: 46px;
+    width: 140px;
+    height: 140px;
   }
 }

website/modules/business-partner/index.js

@@ -5,19 +5,27 @@ module.exports = {
     pluralLabel: 'Business Partners',
     slugPrefix: 'business-partner-',
     sort: {
-      title: 1,
+      createdAt: -1,
     },
     shortcut: false,
   },
   fields: {
     add: {
-      title: {
-        label: 'Partner Name',
-        type: 'string',
+      partnerLogoMobile: {
+        label: 'Partner Logo (Mobile)',
+        type: 'area',
         required: true,
+        options: {
+          max: 1,
+          min: 1,
+          widgets: {
+            '@apostrophecms/image': {},
+          },
+        },
+        help: 'Upload 66px × 66px logo for mobile/default view',
       },
-      partnerLogo: {
-        label: 'Partner Logo',
+      partnerLogoDesktop: {
+        label: 'Partner Logo (Desktop)',
         type: 'area',
         required: true,
         options: {
@@ -27,6 +35,7 @@ module.exports = {
             '@apostrophecms/image': {},
           },
         },
+        help: 'Upload 146px × 146px logo for desktop (≥ medium breakpoint)',
       },
       partnerWebsite: {
         label: 'Partner Website',
@@ -39,7 +48,7 @@ module.exports = {
     group: {
       basics: {
         label: 'Basics',
-        fields: ['title', 'partnerLogo', 'partnerWebsite'],
+        fields: ['partnerLogoMobile', 'partnerLogoDesktop', 'partnerWebsite'],
       },
     },
   },

website/modules/case-studies-page/views/show.html

@@ -134,36 +134,38 @@
 
       {% if data.piece._partner and data.piece._partner.length %}
       {% set partner = data.piece._partner[0] %}
-      {% set partnerLogo = apos.image.first(partner.partnerLogo) %}
+      {% set partnerLogoMobile = apos.image.first(partner.partnerLogoMobile) %}
+      {% set partnerLogoDesktop = apos.image.first(partner.partnerLogoDesktop) %}
       {% if partner.partnerWebsite %}
       <a
         href="{{ partner.partnerWebsite }}"
         target="_blank"
         rel="noopener noreferrer"
-        aria-label="Visit {{ partner.title or 'partner' }} website"
+        aria-label="Visit partner website"
         class="cs_partnership"
       >
       {% else %}
       <div class="cs_partnership">
       {% endif %}
-        <div class="cs_partnership-box">
-          <div class="cs_partnership-label">
-            <span class="cs_partnership-text">In partnership</span>
-            <span class="cs_partnership-text">with</span>
-            {% if partner.title %}
-            <span class="cs_partnership-text">{{ partner.title }}</span>
-            {% endif %}
-          </div>
-          {% if partnerLogo %}
+        {% if partnerLogoMobile or partnerLogoDesktop %}
+        <picture class="cs_partnership-picture">
+          {% if partnerLogoDesktop %}
+          <source
+            media="(min-width: 768px)"
+            srcset="{{ apos.attachment.url(partnerLogoDesktop, { size: 'full' }) }}"
+          />
+          {% endif %}
+          {% if partnerLogoMobile %}
           <img
             class="cs_partnership-logo"
-            src="{{ apos.attachment.url(partnerLogo, { size: 'full' }) }}"
-            alt="{{ partnerLogo._alt or partner.title or '' }}"
-            width="{{ apos.attachment.getWidth(partnerLogo) }}"
-            height="{{ apos.attachment.getHeight(partnerLogo) }}"
+            src="{{ apos.attachment.url(partnerLogoMobile, { size: 'full' }) }}"
+            alt="{{ partnerLogoMobile._alt or 'Partner logo' }}"
+            width="{{ apos.attachment.getWidth(partnerLogoMobile) }}"
+            height="{{ apos.attachment.getHeight(partnerLogoMobile) }}"
           />
           {% endif %}
-        </div>
+        </picture>
+        {% endif %}
       {% if partner.partnerWebsite %}
       </a>
       {% else %}

website/modules/case-studies/index.js

@@ -57,9 +57,9 @@ module.exports = {
         max: 1,
         builders: {
           project: {
-            title: 1,
             slug: 1,
-            partnerLogo: 1,
+            partnerLogoMobile: 1,
+            partnerLogoDesktop: 1,
             partnerWebsite: 1,
           },
         },