Implement a variable height hero for the rise up exhibition

Author: sean-dunwoody

public/css/app.css

@@ -1,5 +1,5 @@
 {
     "/js/app.js": "/js/app.js?id=b8905b220a3026e29c691fbcf7f1ab86",
-    "/css/app.css": "/css/app.css?id=0b507e855f6ef0d9dc4aab21328475d9",
+    "/css/app.css": "/css/app.css?id=81ca4c70d8e1a66441ec421a2a8c1814",
     "/css/fitzwilliam.css": "/css/fitzwilliam.css?id=ac5439ad1da7ccbbd3f994488e57982e"
 }

public/mix-manifest.json

@@ -10,3 +10,46 @@
 .navbar:has(#global-announcement) + .exhibition-hero + .breadcrumbs-su {
     margin: 0;
 }
+
+/**
+ * Styles for a hero image that determines the height 
+ * of the hero image based on the height of the image.
+ */
+ .exhibition-hero--variable-height {
+
+    // we revert to the default styles on mobile (which uses a CSS background image)
+    img {
+        display: none;
+    }
+
+    // the variable height styles only apply to larger screens
+    @media screen and (min-width: 768px) {
+        height: auto !important;
+
+        .bg-overlay {
+            background-image: none;
+            height: auto;
+            // margin-top takes account of the global navigation bar
+            margin-top: 90px;
+            position: relative;
+
+            img {
+                display: block;
+                object-fit: cover;
+                width: 100%;
+            }
+
+            // semi-transparent background behind the text for improved colour contrast (accessibility)
+            &:after {
+                background: linear-gradient( to top, rgba(0, 0, 0, 0.8) 10%, transparent );
+                bottom: 0;
+                content: "";
+                left: 0;
+                position: absolute;
+                right: 0;
+                top: 0;
+            }
+        }
+    }
+
+}

resources/sass/exhibition/_hero.scss

@@ -5,11 +5,25 @@
         If the end date is today, it will return false until the end of the day (23:59:59).
     */
     $exhibitionStatus = (!empty($hero["end"]) && \Carbon\Carbon::createFromFormat('Y-m-d', $hero["end"])->endOfDay()->isPast());
+
+    $heroClasses = '';
+
+    if('rise-up' === $hero['exhibition_slug']) {
+        $heroClasses = 'exhibition-hero--variable-height';
+    }
 @endphp
 @if (!empty($hero))
-    <div class="parallax home-hero exhibition-hero">
+
+    <div class="parallax home-hero exhibition-hero {{ $heroClasses }}">
         @if(!empty($hero['image']))
-            <div class="bg-overlay" style="background: linear-gradient( to top, rgba(0, 0, 0, 0.8) 10%, transparent ), url({{ $hero['image']['data']['url'] }}) no-repeat center center / cover"></div>
+            {{-- @TODO: We should refactor this so that it uses an img element for both of these instances - background image isn't ideal here --}}
+            @if(str_contains($heroClasses, 'exhibition-hero--variable-height'))
+                <div class="bg-overlay" style="background: linear-gradient( to top, rgba(0, 0, 0, 0.8) 10%, transparent ), url({{ $hero['image']['data']['url'] }}) no-repeat center center / cover">
+                    <img src="{{ $hero['image']['data']['url'] }}" alt="">
+                </div>
+            @else
+                <div class="bg-overlay" style="background: linear-gradient( to top, rgba(0, 0, 0, 0.8) 10%, transparent ), url({{ $hero['image']['data']['url'] }}) no-repeat center center / cover"></div>
+            @endif
         @else
             <div class="bg-overlay"></div>
         @endif

resources/views/components/exhibition-hero.blade.php

@@ -5,6 +5,7 @@
         $exhibition_tagline = $exhibition['exhibition_title'];
     }
     $hero = [
+        'exhibition_slug' => $exhibition['slug'],
         'hero_title' => $exhibition['exhibition_title'],
         'hero_subtitle' => $exhibition_tagline,
         'start' => $exhibition["exhibition_start_date"],