feat: update image size handling in textimage component for better layout control

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",

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
+        value: 3

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:if condition="{data.imagesize} == 1"> <!-- Size 25% -->
-    <f:variable name="imageSizeClass" value="md:w-2/5" />
+    <f:variable name="imageSizeClass" value="md:w-1/4" />
-    <f:variable name="textSizeClass" value="md:w-3/5" />
+    <f:variable name="textSizeClass" value="md:w-3/4" />
-    <f:variable name="gapClass" value="gap-8 md:gap-16 lg:gap-32" />
+    <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"