fix: try resolve a aspect-ratio on images defining both height and wi…

…dth.
helsingborg-stad · Oct 18, 2024 · 3cdfad9 · 3cdfad9
1 parent 1452b30
commit 3cdfad9
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 1 deletion.
diff --git a/source/php/Component/Image/Image.php b/source/php/Component/Image/Image.php
@@ -81,11 +81,31 @@ private function handleImageProcessing(ImageInterface $src, &$alt, $lqipEnabled)
 
         $this->data['classList'][] = $this->getBaseClass('container-query', true);
 
+        $aspectRatio = $this->resolveAspectRatioFromContainerQueryData($this->data['containerQueryData']);
+        if($aspectRatio) {
+            if (!isset($this->data['attributeList']['style'])) {
+                $this->data['attributeList']['style'] = "";
+            }
+            $this->data['attributeList']['style'] .= "aspect-ratio: " . $aspectRatio . ";";
+        }
+
         if ($lqipEnabled && $src->getLqipUrl()) {
             $this->addLowResolutionPlaceholder($src);
         }
     }
 
+    private function resolveAspectRatioFromContainerQueryData($containerQueryData): ?string
+    {
+        if (is_array($containerQueryData) && !empty($containerQueryData)) {
+            foreach ($containerQueryData as $data) {
+                if (isset($data['aspectRatio']) && !is_null($data['aspectRatio'])) {
+                    return $data['aspectRatio'];
+                }
+            }
+        }
+        return null;
+    }
+
     private function addLowResolutionPlaceholder(ImageInterface $src)
     {
         if (!isset($this->data['attributeList']['style'])) {

diff --git a/source/php/Integrations/Image/Image.php b/source/php/Integrations/Image/Image.php
@@ -190,7 +190,9 @@ public function getContainerQueryData(): array {
               'landscape' => $this->createMediaQuery('landscape', $previousSize, $size, (bool) !($index === $totalSizes - 1)),
               'portrait'  => $this->createMediaQuery('portrait', $previousSize, $size, (bool) !($index === $totalSizes - 1)),
             ],
-            'src' => $this->getUrl()
+            'src' => $this->getUrl(),
+            'imageSize' => [$size, $this->scaledHeight($size)],
+            'aspectRatio' => $this->scaledHeight($size) == 0 ? null : implode('/', [$size, $this->scaledHeight($size)]),
         ];
 
         // Update $previousSize for the next iteration