Merge pull request #311 from FitzwilliamMuseum/issue-310-carousel-cha…

…nges

Change carousels on landing page

app/Http/Controllers/highlightsController.php

@@ -80,8 +80,8 @@ public function landing(): View
         $periods = Highlights::getPeriods();
         $periods = $this->group_by("period_assigned", $periods['data']);
         $contexts = HighlightPages::getContexts();
-        $context = $this->group_by("section", $contexts['data']);
-        return view('highlights.landing', compact('pharos', 'periods', 'context', 'page'));
+        $contexts = $this->group_by("section", $contexts['data']);
+        return view('highlights.landing', compact('pharos', 'periods', 'contexts', 'page'));
     }
 
     /**

app/View/Components/carouselSlide.php

@@ -0,0 +1,41 @@
+<?php
+
+namespace App\View\Components;
+
+use Illuminate\View\Component;
+
+class carouselSlide extends Component
+{
+    public array $slides;
+    public string $class;
+    public string $imageObject;
+    public string $title;
+    public string $route;
+    public string $param;
+    public bool $slugify;
+    /**
+     * Create a new component instance.
+     *
+     * @return void
+     */
+    public function __construct(array $slides, string $class, string $imageObject, string $title, string $route, string $param, bool $slugify)
+    {
+        $this->slides = $slides;
+        $this->class = $class;
+        $this->imageObject = $imageObject;
+        $this->title = $title;
+        $this->route = $route;
+        $this->param = $param;
+        $this->slugify = $slugify;
+    }
+
+    /**
+     * Get the view / contents that represent the component.
+     *
+     * @return \Illuminate\Contracts\View\View|\Closure|string
+     */
+    public function render()
+    {
+        return view('components.carousel-slide');
+    }
+}

package.json

@@ -40,7 +40,7 @@
         "@fortawesome/fontawesome-free": "^6.1.1",
         "@popperjs/core": "^2.11.5",
         "@xmldom/xmldom": "^0.8.2",
-        "autoprefixer": "^10.4.5",
+        "autoprefixer": "^10.4.7",
         "clean-css": "^5.3.0",
         "leaflet-iiif": "^3.0.0",
         "minimist": ">=1.2.6",

resources/views/components/carousel-slide.blade.php

@@ -0,0 +1,67 @@
+<div class="carousel-item {{ $class }}">
+    <div class="row">
+        @foreach($slides as $slide)
+            @if(array_key_exists('0',$slide))
+                <div class="col-md-4 mb-3">
+                    <div class="card">
+                        @if($slugify)
+                            <a href="{{ route($route, Str::slug($slide[0][$param],'-')) }}" class="stretched-link">
+                                <img class="card-img-top" alt="{{$slide[0][$title]}}"
+                                     src="{{ $slide[0][$imageObject]['data']['thumbnails'][13]['url'] }}">
+                            </a>
+                        @else
+                            <a href="{{ route($route, $slide[0][$param]) }}" class="stretched-link">
+                                <img class="card-img-top" alt="{{$slide[0][$title]}}"
+                                     src="{{ $slide[0][$imageObject]['data']['thumbnails'][13]['url'] }}">
+                            </a>
+                        @endif
+                        <div class="card-body">
+                            <h3 class="card-title">
+                                @if($slugify)
+                                    <a href="{{ route($route, Str::slug($slide[0][$param],'-')) }}"
+                                       class="stretched-link">
+                                        {{ ucfirst(str_replace('-',' ', $slide[0][$title])) }}
+                                    </a>
+                                @else
+                                    <a href="{{ route($route, $slide[0][$param]) }}" class="stretched-link">
+                                        {{ ucfirst(str_replace('-',' ', $slide[0][$title])) }}
+                                    </a>
+                                @endif
+                            </h3>
+                        </div>
+                    </div>
+                </div>
+            @else
+                <div class="col-md-4 mb-3">
+                    <div class="card">
+                        @if($slugify)
+                            <a href="{{ route($route, Str::slug($slide[$param],'-')) }}" class="stretched-link">
+                                <img class="card-img-top" alt="{{$slide[$title]}}"
+                                     src="{{ $slide[$imageObject]['data']['thumbnails'][13]['url'] }}">
+                            </a>
+                        @else
+                            <a href="{{ route($route, $slide[$param]) }}" class="stretched-link">
+                                <img class="card-img-top" alt="{{$slide[$title]}}"
+                                     src="{{ $slide[$imageObject]['data']['thumbnails'][13]['url'] }}">
+
+                            </a>
+                        @endif
+                        <div class="card-body">
+                            <h3 class="card-title">
+                                @if($slugify)
+                                    <a href="{{ route($route, Str::slug($slide[$param],'-')) }}" class="stretched-link">
+                                        {{ ucfirst(str_replace('-',' ', $slide[$title])) }}
+                                    </a>
+                                @else
+                                    <a href="{{ route($route, $slide[$param]) }}" class="stretched-link">
+                                        {{ ucfirst(str_replace('-',' ', $slide[$title])) }}
+                                    </a>
+                                @endif
+                            </h3>
+                        </div>
+                    </div>
+                </div>
+            @endif
+        @endforeach
+    </div>
+</div>