From c4d01f2a47acb1532f1d9eb93f6cf1cc41fbd3a9 Mon Sep 17 00:00:00 2001
From: Dominik Polakovics <dominik.polakovics@cloonar.com>
Date: Mon, 16 Jun 2025 12:44:31 +0200
Subject: [PATCH] feat: update image size handling in textimage component for
 better layout control

---
 package.json                                  |  2 +-
 .../ContentElements/textimage/config.yaml     |  6 +++--
 .../textimage/templates/frontend.html         | 26 ++++++++++++++-----
 3 files changed, 25 insertions(+), 9 deletions(-)

diff --git a/package.json b/package.json
index 9ee95d0..c0044c2 100644
--- a/package.json
+++ b/package.json
@@ -3,7 +3,7 @@
   "version": "1.0.0",
   "scripts": {
     "build:css": "NODE_ENV=production webpack --config webpack.config.js --mode production",
-    "dev:css": "webpack --config webpack.config.js --mode development"
+    "dev:css": "webpack --config webpack.config.js --mode development --watch"
   },
   "devDependencies": {
     "autoprefixer": "^10.4.21",
diff --git a/packages/base/ContentBlocks/ContentElements/textimage/config.yaml b/packages/base/ContentBlocks/ContentElements/textimage/config.yaml
index 25fb58d..56a3839 100644
--- a/packages/base/ContentBlocks/ContentElements/textimage/config.yaml
+++ b/packages/base/ContentBlocks/ContentElements/textimage/config.yaml
@@ -21,9 +21,11 @@ fields:
   - identifier: imagesize
     type: Select
     renderType: selectSingle
-    default: 2
+    default: 3
     items:
       - label: 25%
         value: 1
+      - label: 33%
+        value: 2
       - label: 50%
-        value: 2
\ No newline at end of file
+        value: 3
\ No newline at end of file
diff --git a/packages/base/ContentBlocks/ContentElements/textimage/templates/frontend.html b/packages/base/ContentBlocks/ContentElements/textimage/templates/frontend.html
index d72920c..d40ff08 100644
--- a/packages/base/ContentBlocks/ContentElements/textimage/templates/frontend.html
+++ b/packages/base/ContentBlocks/ContentElements/textimage/templates/frontend.html
@@ -5,10 +5,16 @@
   <f:variable name="textSizeClass" value="md:w-1/2" />
   <f:variable name="gapClass" value="gap-8 md:gap-16" />
 
-  <f:if condition="{data.imagesize} == 1"> <!-- Size 25% -> map to 40% for layout -->
-    <f:variable name="imageSizeClass" value="md:w-2/5" />
-    <f:variable name="textSizeClass" value="md:w-3/5" />
-    <f:variable name="gapClass" value="gap-8 md:gap-16 lg:gap-32" />
+  <f:if condition="{data.imagesize} == 1"> <!-- Size 25% -->
+    <f:variable name="imageSizeClass" value="md:w-1/4" />
+    <f:variable name="textSizeClass" value="md:w-3/4" />
+    <f:variable name="gapClass" value="gap-6 md:gap-12" />
+  </f:if>
+
+  <f:if condition="{data.imagesize} == 2"> <!-- Size 33% -->
+    <f:variable name="imageSizeClass" value="md:w-1/3" />
+    <f:variable name="textSizeClass" value="md:w-2/3" />
+    <f:variable name="gapClass" value="gap-8 md:gap-16" />
   </f:if>
 
   <div class="flex flex-col {gapClass} fade-in-on-scroll {f:if(condition: '{data.imageorient} == 26', then: 'md:flex-row-reverse', else: 'md:flex-row')}">
@@ -24,7 +30,11 @@
                 {f:uri.image(image:data.image.0, width:'768c', cropVariant:'default', fileExtension:'webp')} 768w,
                 {f:uri.image(image:data.image.0, width:'1024c', cropVariant:'default', fileExtension:'webp')} 1024w"
               sizes="(max-width: 767px) 90vw,
-                     {f:if(condition: '{data.imagesize} == 1', then: '(min-width: 768px) 40vw', else: '(min-width: 768px) 50vw')}" />
+                     {f:if(condition: '{data.imagesize} == 1',
+                           then: '(min-width: 768px) 25vw',
+                           else: f:if(condition: '{data.imagesize} == 2',
+                                    then: '(min-width: 768px) 33vw',
+                                    else: '(min-width: 768px) 50vw'))}" />
             <!-- Fallback source -->
             <source
               srcset="
@@ -32,7 +42,11 @@
                 {f:uri.image(image:data.image.0, width:'400c', cropVariant:'default')} 768w,
                 {f:uri.image(image:data.image.0, width:'538c', cropVariant:'default')} 1024w"
               sizes="(max-width: 767px) 90vw,
-                     {f:if(condition: '{data.imagesize} == 1', then: '(min-width: 768px) 40vw', else: '(min-width: 768px) 50vw')}" />
+                     {f:if(condition: '{data.imagesize} == 1',
+                           then: '(min-width: 768px) 25vw',
+                           else: f:if(condition: '{data.imagesize} == 2',
+                                    then: '(min-width: 768px) 33vw',
+                                    else: '(min-width: 768px) 50vw'))}" />
             <f:image
               image="{data.image.0}"
               treatIdAsReference="1"