feat: add url to site config, add webp support, change image sizing

packages/base/ContentBlocks/ContentElements/textimage/assets/frontend.css

@@ -46,11 +46,9 @@
 
 /* Size classes apply at all viewports */
 .textimage-image-wrapper.size-25 .textimage-picture {
-  max-width: 300px;
 }
 
 .textimage-image-wrapper.size-50 .textimage-picture {
-  max-width: 600px;
 }
 
 /* On larger screens, arrange horizontally for image position settings */
@@ -63,7 +61,15 @@
     flex-direction: row-reverse;
   }
 
-  .textimage-wrapper {
+    .textimage-image-wrapper.size-25 {
+        flex: 0 0 25%;
+    }
+
+    .textimage-image-wrapper.size-50 {
+        flex: 0 0 50%;
+    }
+
+    .textimage-wrapper {
     flex: 1;
-  }
+    }
 }

packages/base/ContentBlocks/ContentElements/textimage/config.yaml

@@ -14,7 +14,7 @@ fields:
   - identifier: image
     type: File
     properties:
-      allowed: [jpg, jpeg, png, gif]
+      allowed: [jpg, jpeg, png, gif, webp]
     useExistingField: true
   - identifier: imageorient
     useExistingField: true
@@ -26,4 +26,4 @@ fields:
       - label: 25%
         value: 1
       - label: 50%
-        value: 2
+        value: 2

packages/base/ContentBlocks/ContentElements/textimage/templates/frontend.html

@@ -18,6 +18,18 @@
       <f:if condition="{data.image}">
         <f:then>
           <picture class="textimage-picture">
+            <!-- WEBP source -->
+            <source
+              type="image/webp"
+              srcset="
+                {f:uri.image(image:data.image.0, width:'320c', cropVariant:'default', fileExtension:'webp')} 320w,
+                {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: 320px) 90vw,
+                     (max-width: 768px) 600px,
+                     600px" />
+
+            <!-- Fallback source -->
             <source
               srcset="
                 {f:uri.image(image:data.image.0, width:'320c', cropVariant:'default')} 320w,
@@ -26,6 +38,7 @@
               sizes="(max-width: 320px) 90vw,
                      (max-width: 768px) 600px,
                      600px" />
+
             <f:image
               image="{data.image.0}"
               treatIdAsReference="1"