Merge pull request #22 from helsingborg-stad/feat/image-container-query

feat: add container query image feature in sections.
helsingborg-stad · Sep 25, 2024 · f49999d · f49999d
2 parents 40f1f49 + 5c546a2
commit f49999d
Show file tree

Hide file tree

Showing 8 changed files with 145 additions and 82 deletions.
diff --git a/source/php/Module/Card/Card.php b/source/php/Module/Card/Card.php
@@ -2,6 +2,10 @@
 
 namespace ModularitySections\Module\Card;
 
+use Modularity\Integrations\Component\ImageResolver;
+use Modularity\Integrations\Component\ImageFocusResolver;
+use ComponentLibrary\Integrations\Image\Image as ImageComponentContract;
+
 class Card extends \Modularity\Module
 {
     public $slug = 'section-card';
@@ -20,34 +24,46 @@ public function init()
     public function data(): array
     {
         $data = $this->getFields();
-
+    
         $data['fallbackId'] = $this->slug . '-' . uniqid();
 
-        //Fetch image data
-        if (isset($data['image']) && is_array($data['image'])) {
-            $data['image']['url'] = wp_get_attachment_image_src(
-                $data['image']['id'],
-                [1500, false]
-            )[0] ?? false;
-            $data['image'] = (object) $data['image'];
-        } elseif (isset($data['image']) && is_numeric($data['image'])) {
-            $data['image'] = (object) [
-                'url'   => wp_get_attachment_image_src($data['image'], [1500, false])[0],
-                'top'   => false,
-                'left' => false
-            ];
+        //Get image id
+        $imageId = $this->getImageId($data);
+
+        //Get image
+        if($imageId) {
+            $data['image'] = ImageComponentContract::factory(
+                    $imageId,
+                    [1920, false],
+                    new ImageResolver(),
+                    new ImageFocusResolver(
+                        isset($data['image']) && is_array($data['image']) ? $data['image']: null
+                    )
+            );
         } else {
-            $data['image'] = (object) [
-                'url'   => false,
-                'top'   => false,
-                'left' => false
-            ];
+            $data['image'] = false;
         }
 
         //Send to view
         return $data;
     }
 
+    /**
+     * Get image id from data array
+     * 
+     * @param array $data
+     * 
+     * @return int
+     */
+    private function getImageId(array $data): ?int {
+        if($data['image'] && is_array($data['image'])) {
+            return $data['image']['id'];
+        } elseif($data['image'] && is_numeric($data['image'])) {
+            return $data['image'];
+        }
+        return null;
+    }
+
     public function template(): string
     {
         return "card.blade.php";

diff --git a/source/php/Module/Card/views/card.blade.php b/source/php/Module/Card/views/card.blade.php
@@ -4,8 +4,7 @@
     'content' => $text,
     'layout' => 'card',
     'containerAware' => true,
-    'image' => !empty($image) ? $image->url : false,
-    'imageFocus' => !empty($image) ? ['top' => $image->top, 'left' => $image->left] : false,
+    'image' => $image,
     'height' => $height,
     'reverseColumns' => $reverse_columns,
     'paddingTop' => $spacing_top,

diff --git a/source/php/Module/Featured/Featured.php b/source/php/Module/Featured/Featured.php
@@ -2,6 +2,9 @@
 
 namespace ModularitySections\Module\Featured;
 
+use Modularity\Integrations\Component\ImageResolver;
+use Modularity\Integrations\Component\ImageFocusResolver;
+use ComponentLibrary\Integrations\Image\Image as ImageComponentContract;
 class Featured extends \Modularity\Module
 {
     public $slug = 'section-featured';
@@ -20,34 +23,46 @@ public function init()
     public function data(): array
     {
         $data = $this->getFields();
-
+    
         $data['fallbackId'] = $this->slug . '-' . uniqid();
 
-        //Fetch image data
-        if (isset($data['image']) && is_array($data['image']) && isset($data['image']['id'])) {
-            $data['image']['url'] = wp_get_attachment_image_src(
-                $data['image']['id'],
-                [960, false]
-            )[0];
-            $data['image'] = (object) $data['image'];
-        } elseif (isset($data['image']) && is_numeric($data['image'])) {
-            $data['image'] = (object) [
-                'url'   => wp_get_attachment_image_src($data['image'], [960, false])[0],
-                'top'   => false,
-                'left' => false
-            ];
+        //Get image id
+        $imageId = $this->getImageId($data);
+
+        //Get image
+        if($imageId) {
+            $data['image'] = ImageComponentContract::factory(
+                    $imageId,
+                    [1920, false],
+                    new ImageResolver(),
+                    new ImageFocusResolver(
+                        isset($data['image']) && is_array($data['image']) ? $data['image']: null
+                    )
+            );
         } else {
-            $data['image'] = (object) [
-                'url'   => false,
-                'top'   => false,
-                'left' => false
-            ];
+            $data['image'] = false;
         }
 
         //Send to view
         return $data;
     }
 
+    /**
+     * Get image id from data array
+     * 
+     * @param array $data
+     * 
+     * @return int
+     */
+    private function getImageId(array $data): ?int {
+        if($data['image'] && is_array($data['image'])) {
+            return $data['image']['id'];
+        } elseif($data['image'] && is_numeric($data['image'])) {
+            return $data['image'];
+        }
+        return null;
+    }
+
     public function template(): string
     {
         return "featured.blade.php";

diff --git a/source/php/Module/Featured/views/featured.blade.php b/source/php/Module/Featured/views/featured.blade.php
@@ -4,8 +4,7 @@
     'content' => $text,
     'layout' => 'featured',
     'background' => $background_color,
-    'image' => $image ? $image->url : false,
-    'imageFocus' => $image ? ['top' => $image->top, 'left' => $image->left] : false,
+    'image' => $image,
     'height' => $height,
     'textColor' => $text_color,
     'textAlignment' => $text_alignment,

diff --git a/source/php/Module/Full/Full.php b/source/php/Module/Full/Full.php
@@ -2,6 +2,10 @@
 
 namespace ModularitySections\Module\Full;
 
+use Modularity\Integrations\Component\ImageResolver;
+use Modularity\Integrations\Component\ImageFocusResolver;
+use ComponentLibrary\Integrations\Image\Image as ImageComponentContract;
+
 class Full extends \Modularity\Module
 {
     public $slug = 'section-full';
@@ -23,31 +27,48 @@ public function data() : array
 
         $data['fallbackId'] = $this->slug . '-' . uniqid();
 
-        //Fetch image data
-        if (isset($data['image']) && is_array($data['image'])) {
-            $data['image']['url'] = wp_get_attachment_image_src(
-                $data['image']['id'],
-                [1500, false]
-            )[0] ?? false;
-            $data['image'] = (object) $data['image'];
-        } elseif (isset($data['image']) && is_numeric($data['image'])) {
-            $data['image'] = (object) [
-                'url'   => wp_get_attachment_image_src($data['image'], [1500, false])[0],
-                'top'   => false,
-                'left' => false
-            ];
+        //Get image id
+        $imageId = $this->getImageId($data);
+
+        //Get image
+        if($imageId) {
+            $data['image'] = ImageComponentContract::factory(
+                    $imageId,
+                    [1920, false],
+                    new ImageResolver(),
+                    new ImageFocusResolver(
+                        isset($data['image']) && is_array($data['image']) ? $data['image']: null
+                    )
+            );
         } else {
-            $data['image'] = (object) [
-                'url'   => false,
-                'top'   => false,
-                'left' => false
-            ];
+            $data['image'] = false;
         }
 
         //Send to view
         return $data;
     }
 
+    /**
+     * Get image id from data array
+     * 
+     * @param array $data
+     * 
+     * @return int
+     */
+    private function getImageId(array $data): ?int {
+        if($data['image'] && is_array($data['image'])) {
+            return $data['image']['id'];
+        } elseif($data['image'] && is_numeric($data['image'])) {
+            return $data['image'];
+        }
+        return null;
+    }
+
+    /**
+     * Set template
+     * 
+     * @return string
+     */
     public function template() : string
     {
         return "full.blade.php";

diff --git a/source/php/Module/Full/views/full.blade.php b/source/php/Module/Full/views/full.blade.php
@@ -4,8 +4,7 @@
     'content'       => $text,
     'layout'        => 'full-width',
     'background'    => $background_color,
-    'image'         => $image ? $image->url: false,
-    'imageFocus'    => $image ? ['top' => $image->top, 'left' => $image->left]: false,
+    'image'         => $image,
     'height'        => $height,
     'textColor'     => $text_color,
     'textAlignment' => $text_alignment,

diff --git a/source/php/Module/Split/Split.php b/source/php/Module/Split/Split.php
@@ -2,6 +2,9 @@
 
 namespace ModularitySections\Module\Split;
 
+use Modularity\Integrations\Component\ImageResolver;
+use Modularity\Integrations\Component\ImageFocusResolver;
+use ComponentLibrary\Integrations\Image\Image as ImageComponentContract;
 class Split extends \Modularity\Module
 {
     public $slug = 'section-split';
@@ -23,31 +26,43 @@ public function data(): array
 
         $data['fallbackId'] = $this->slug . '-' . uniqid();
 
-        //Fetch image data
-        if (isset($data['image']) && is_array($data['image']) && isset($data['image']['id'])) {
-            $data['image']['url'] = wp_get_attachment_image_src(
-                $data['image']['id'],
-                [960, false]
-            )[0];
-            $data['image'] = (object) $data['image'];
-        } elseif (isset($data['image']) && is_numeric($data['image'])) {
-            $data['image'] = (object) [
-                'url'   => wp_get_attachment_image_src($data['image'], [960, false])[0],
-                'top'   => false,
-                'left' => false
-            ];
+        //Get image id
+        $imageId = $this->getImageId($data);
+
+        //Get image
+        if($imageId) {
+            $data['image'] = ImageComponentContract::factory(
+                    $imageId,
+                    [1920, false],
+                    new ImageResolver(),
+                    new ImageFocusResolver(
+                        isset($data['image']) && is_array($data['image']) ? $data['image']: null
+                    )
+            );
         } else {
-            $data['image'] = (object) [
-                'url'   => false,
-                'top'   => false,
-                'left' => false
-            ];
+            $data['image'] = false;
         }
 
         //Send to view
         return $data;
     }
 
+    /**
+     * Get image id from data array
+     * 
+     * @param array $data
+     * 
+     * @return int
+     */
+    private function getImageId(array $data): ?int {
+        if($data['image'] && is_array($data['image'])) {
+            return $data['image']['id'];
+        } elseif($data['image'] && is_numeric($data['image'])) {
+            return $data['image'];
+        }
+        return null;
+    }
+
     public function template() : string
     {
         return "split.blade.php";

diff --git a/source/php/Module/Split/views/split.blade.php b/source/php/Module/Split/views/split.blade.php
@@ -4,8 +4,7 @@
     'content'           => $text,
     'layout'            => 'split',
     'background'        => $background_color,
-    'image'             => $image ? $image->url : false,
-    'imageFocus'        => $image ? ['top' => $image->top, 'left' => $image->left] : false,
+    'image'             => $image,
     'height'            => $height,
     'textColor'         => $text_color,
     'textAlignment'     => $text_alignment,