feat: implement ImageContract in slider. (#672)

* feat: implement ImageContract in slider. * fix: add link description * fix: show image poster on video slides. --------- Co-authored-by: Sebastian Thulin <sebastian.thulin@helsingborg.se>
helsingborg-stad · Sep 30, 2024 · 2c11f8a · 2c11f8a
1 parent b3d0a0f
commit 2c11f8a
Show file tree

Hide file tree

Showing 5 changed files with 104 additions and 29 deletions.
diff --git a/source/php/Module/Slider/Slider.php b/source/php/Module/Slider/Slider.php
@@ -2,6 +2,9 @@
 
 namespace Modularity\Module\Slider;
 
+use Modularity\Integrations\Component\ImageResolver;
+use Modularity\Integrations\Component\ImageFocusResolver;
+use ComponentLibrary\Integrations\Image\Image as ImageComponentContract;
 class Slider extends \Modularity\Module
 {
     public $slug = 'slider';
@@ -89,10 +92,17 @@ public function data() : array
             'noSlides' => __('Please add something to slide.','modularity')
         ]; 
 
-
         return $data;
     }
 
+    /**
+     * Prepare slide
+     * 
+     * @param array $slide
+     * @param array $imageSize
+     * 
+     * @return array
+     */
     private function prepareSlide($slide, array $imageSize) {
         $slide = $slide['acf_fc_layout'] === 'video' ? 
             $this->prepareVideoSlide($slide, $imageSize) : 
@@ -103,27 +113,94 @@ private function prepareSlide($slide, array $imageSize) {
         return $slide;
     }
 
+    /**
+     * Prepare image slide
+     * 
+     * @param array $slide
+     * @param array $imageSize
+     * 
+     * @return array
+     */
     private function prepareImageSlide(array $slide, array $imageSize) {
+        //If no image, return slide
         if (!isset($slide['image']['id'])) {
-            return null;
+            return $slide;
         }
 
-        $slide['focusPoint'] = [
-            'top' => $slide['image']['top'] ?? "50",
-            'left' => $slide['image']['left'] ?? "50"
-        ];
-
-        $slide['image'] = \Municipio\Helper\Image::getImageAttachmentData($slide['image']['id'] ?? null, $imageSize);
+        //Try to get image contract
+        $imageContract = $this->getImageContract(
+            $slide['image']['id'], 
+            $slide['image'] ?? null
+        );
+
+        //If we have a contract, use it, else fallback to normal image
+        if($imageContract) {
+            $slide['image'] = $imageContract;
+            $slide['hasImageContract'] = true;
+        } else {
+            $slide['image'] = \Municipio\Helper\Image::getImageAttachmentData(
+                $slide['image']['id'] ?? null,
+                $imageSize
+            );
+            $slide['hasImageContract'] = false;
+        }
 
         return $slide;
     }    
 
+    /**
+     * Prepare video slide
+     * 
+     * @param array $slide
+     * @param array $imageSize
+     * 
+     * @return array
+     */
     private function prepareVideoSlide(array $slide, array $imageSize) {
-        $slide['image'] = \Municipio\Helper\Image::getImageAttachmentData($slide['image'] ?? null, $imageSize);
+        //Try to get image contract
+        $imageContract = $this->getImageContract(
+            $slide['image'], 
+            null
+        );
+
+        //If we have a contract, use it, else fallback to normal image
+        if($imageContract) {
+            $slide['image'] = $imageContract;
+            $slide['hasImageContract'] = true;
+        } else {
+            $slide['image'] = \Municipio\Helper\Image::getImageAttachmentData(
+                $slide['image']['id'] ?? null,
+                $imageSize
+            );
+            $slide['hasImageContract'] = false;
+        }
 
         return $slide;
     }
 
+    /**
+     * Get image contract
+     * 
+     * @param int $imageId
+     * @param array $focus
+     * @return ImageComponentContract|null
+     */
+    private function getImageContract(int $imageId, ?array $focus = null): ?ImageComponentContract {
+
+        return ImageComponentContract::factory(
+            (int) $imageId,
+            [1920, false],
+            new ImageResolver(),
+            !is_null($focus) ? new ImageFocusResolver($focus) : null
+        ); 
+    }
+
+    /**
+     * Get link data
+     * 
+     * @param array $slide
+     * @return array
+     */
     private function getLinkData(array $slide) {
         if (empty($slide['link_url'])) {
             return $slide;
@@ -151,13 +228,25 @@ private function getLinkData(array $slide) {
         return $slide;
     }
 
+    /**
+     * Check if link url is valid
+     * 
+     * @param array $slide
+     * @return bool
+     */
     private function isValidLinkUrl($slide) {
         return 
             isset($slide['link_url']) && 
             is_numeric($slide['link_url']) && 
             get_post_status($slide['link_url']) == "publish";
     }
 
+    /**
+     * Check if slide is a button CTA
+     * 
+     * @param array $slide
+     * @return bool
+     */
     private function isButtonCta($slide) {
         return 
             !empty($slide['link_type']) && 

diff --git a/source/php/Module/Slider/views/partials/image.blade.php b/source/php/Module/Slider/views/partials/image.blade.php
diff --git a/source/php/Module/Slider/views/partials/item.blade.php b/source/php/Module/Slider/views/partials/item.blade.php
@@ -2,13 +2,13 @@
     'title'             => $slide['textblock_title'],
     'text'              => $slide['textblock_content'],
     'layout'            => $slide['textblock_position'],
-    'desktop_image'     => $slide['image']['src'],
-    'background_video'  => $slide['video_mp4']['url'] ?? false,
-    'link'              => $slide['link_url'],
-    'alt'               => $slide['image']['alt'],
+    'image'             => $slide['hasImageContract'] ? $slide['image'] : $slide['image']['src'],
+    'video'             => $slide['video_mp4']['url'] ?? false,
+    'link'              => $slide['link_url'] ?? null,
+    'linkDescription'   => $slide['link_url_description'] ?? null,
+    'alt'               => $slide['hasImageContract'] ? null : $slide['image']['alt'],
     'heroStyle'         => $sidebarContext === 'sidebar.slider-area',
     'cta'               => $slide['call_to_action'] ?? null,
-    'focusPoint'        => $slide['focusPoint'],
     'context'           => ['module.slider-item', $sidebarContext . '.module.slider-item']
 ])
 @endslider__item
diff --git a/source/php/Module/Slider/views/partials/video.blade.php b/source/php/Module/Slider/views/partials/video.blade.php
diff --git a/source/php/Module/Slider/views/slider.blade.php b/source/php/Module/Slider/views/slider.blade.php
@@ -24,7 +24,7 @@
         'context'       => ['module.slider', $sidebarContext . '.module.slider', $sidebarContext . '.animation-item'],
     ])
         @foreach ($slides as $slide)
-            @includeFirst(['partials.' . $slide['acf_fc_layout'], 'partials.item'])
+            @include('partials.item') 
         @endforeach
     @endslider
 @else