Merge pull request #737 from FitzwilliamMuseum/feature/image-gallery

Feature/image gallery
FitzwilliamMuseum · Jan 20, 2025 · 1dc8f27 · 1dc8f27
2 parents f251162 + cd9fceb
commit 1dc8f27
Show file tree

Hide file tree

Showing 8 changed files with 100 additions and 4 deletions.
diff --git a/public/css/app.css b/public/css/app.css
diff --git a/public/mix-manifest.json b/public/mix-manifest.json
@@ -1,5 +1,5 @@
 {
     "/js/app.js": "/js/app.js?id=b8905b220a3026e29c691fbcf7f1ab86",
-    "/css/app.css": "/css/app.css?id=81ca4c70d8e1a66441ec421a2a8c1814",
-    "/css/fitzwilliam.css": "/css/fitzwilliam.css?id=ac5439ad1da7ccbbd3f994488e57982e"
+    "/css/app.css": "/css/app.css?id=c77e47e067d8b347e47c65c32b2a3587",
+    "/css/fitzwilliam.css": "/css/fitzwilliam.css?id=36320d096c399350614b372ec7c4975b"
 }
diff --git a/resources/css/site.css b/resources/css/site.css
@@ -1177,3 +1177,7 @@ a.text-center.btn.btn-outline-light.btn__book {
 .collection-carousel .carousel-control-next:focus {
     outline: 2px solid #007aff;
 }
+
+.exhibition .collection-carousel {
+    /* margin: 56px 0; */
+}
diff --git a/resources/sass/exhibition/_related-events.scss b/resources/sass/exhibition/_related-events.scss
@@ -4,7 +4,7 @@
     padding: 28px;
 
     @media screen and (min-width: 845px) {
-        margin: 0 auto;
+        margin: 56px auto;
         max-width: 800px;
     }
     &-title {

diff --git a/resources/sass/support-us/_image-gallery.scss b/resources/sass/support-us/_image-gallery.scss
@@ -0,0 +1,27 @@
+.image-gallery .carousel-control-prev {
+  background: linear-gradient(to right, black, rgba(0,0,0,0));
+}
+
+.image-gallery .carousel-control-prev:hover,
+.image-gallery .carousel-control-prev:focus {
+  background: linear-gradient(to right, black, rgba(0,0,0,0.5));
+}
+
+.image-gallery .carousel-control-next {
+  background: linear-gradient(to left, black, rgba(0,0,0,0));
+}
+
+.image-gallery .carousel-control-next:hover,
+.image-gallery .carousel-control-next:focus {
+  background: linear-gradient(to left, black, rgba(0,0,0,0.5));
+}
+
+.gallery-card {
+  height: 400px;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+}
diff --git a/resources/sass/support-us/_support-us.scss b/resources/sass/support-us/_support-us.scss
@@ -5,6 +5,7 @@
 @import '_text';
 @import '_featured-image';
 @import '_featured-video';
+@import '_image-gallery';
 @import '_payment-grid';
 @import '_fifty-fifty';
 @import '_faq';

diff --git a/resources/views/support/components/components-repeater.blade.php b/resources/views/support/components/components-repeater.blade.php
@@ -23,6 +23,8 @@
                 @include('support.components.featured-video')
             @elseif(!empty($component['50_50_content']))
                 @include('support.components.fiftyfifty')
+            @elseif(!empty($component['image_gallery']))
+                @include('support.components.image-gallery')
             @elseif(!empty($component['curators_positioning']))
                 @include('exhibitions.components.curators')
             @elseif(!empty($component['related_events']))

diff --git a/resources/views/support/components/image-gallery.blade.php b/resources/views/support/components/image-gallery.blade.php
@@ -0,0 +1,62 @@
+@if(!empty($component['image_gallery']))
+    <div class="container image-gallery">
+        <div class="row">
+            <div id="image-gallery" class="collection-carousel carousel slide" data-ride="carousel" data-bs-interval="false" data-pause="hover">
+                <div class="carousel-inner">
+                    @foreach(array_chunk($component['image_gallery'],3,true) as $slides)
+                        <div class="carousel-item {{ $loop->first ? 'active' : '' }}">
+                            <div class="row">
+                                @foreach($slides as $image)
+                                    @php
+                                        if(!empty($image['image_id'])) {
+                                            if(!empty($page['image_blocks'])) {
+                                                $image_source = $page['image_blocks'];
+                                            }
+                                            if(!empty($exhibition['exhibition_files'])) {
+                                                $image_source = $exhibition['exhibition_files'];
+                                            }
+
+                                            foreach($image_source as $image_block) {
+                                                if(!empty($image_block['directus_files_id'])) {
+                                                    $image_block['asset_id'] = $image_block['directus_files_id'];
+                                                }
+                                                if($image_block['asset_id']['id'] == $image['image_id']) {
+                                                    $image_asset = $image_block['asset_id'];
+                                            }
+                                            }
+                                        }
+                                    @endphp
+                                    <div class="col-md-4 mb-3">
+                                        <div class="card gallery-card">
+                                            @if(!empty($image_asset))
+                                                <img src="{{ $image_asset['data']['full_url'] }}" alt="{{ !empty($image_asset['data']['description']) ? $block_image['data']['description'] : '' }}" load="lazy">
+                                            @else
+                                                <img
+                                                    src="{{ env('MISSING_IMAGE_URL') }}"
+                                                    load="lazy" alt="">
+                                            @endif
+                                        </div>
+                                    </div>
+                                @endforeach
+                            </div>
+                        </div>
+                    @endforeach
+                </div>
+                <button class="carousel-control-prev" type="button" data-bs-target="#image-gallery" data-bs-slide="prev">
+                    <svg height="48" viewBox="0 0 48 48" width="64" xmlns="http://www.w3.org/2000/svg">
+                        <path fill="black" d="M0 0h48v48h-48z"></path>
+                        <path fill="white" d="M14.83 30.83l9.17-9.17 9.17 9.17 2.83-2.83-12-12-12 12z"></path>
+                    </svg>
+                    <span class="visually-hidden">Previous</span>
+                </button>
+                <button class="carousel-control-next" type="button" data-bs-target="#image-gallery" data-bs-slide="next">
+                    <svg height="48" viewBox="0 0 48 48" width="64" xmlns="http://www.w3.org/2000/svg">
+                        <path fill="black" d="M0 0h48v48h-48z"></path>
+                        <path fill="white" d="M14.83 30.83l9.17-9.17 9.17 9.17 2.83-2.83-12-12-12 12z"></path>
+                    </svg>
+                    <span class="visually-hidden">Next</span>
+                </button>
+            </div>
+        </div>
+    </div>
+@endif