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

config/sites/default/config.yaml

@@ -1,4 +1,10 @@
-base: /
+base: https://lena-schilling.at
+baseVariants:
+  - base: https://lena-schilling.ddev.site
+    condition: 'applicationContext == "Development/Ddev"'
+
+  - base: https://lena-schilling.cloonar.dev
+    condition: 'applicationContext == "Production/Staging"'
 dependencies:
   - georgringer/news
   - typo3/redirects

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

@@ -8,7 +8,7 @@
 }
 
 .frame-type-cloonar_hero + .frame {
-    margin-top: -10rem;
+    margin-top: -10.4rem;
 }
 .frame-type-cloonar_hero .container {
     padding-bottom: 3rem;
@@ -81,6 +81,7 @@
 .frame-type-cloonar_hero .hero-image-wrapper {
   margin-top: 1rem;
   align-self: flex-end;
+  width: 100%;
 }
 
 .frame-type-cloonar_hero .hero-image {

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

@@ -21,11 +21,23 @@
         <f:if condition="{data.image}">
           <f:then>
             <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:'430c', cropVariant:'default', fileExtension:'webp')} 1024w"
+                  sizes="(max-width: 320px) 80vw,
+                         (max-width: 768px) 80px,
+                         430px" />
+
+                <!-- Fallback source -->
               <source
                 srcset="
                   {f:uri.image(image:data.image.0, width:'320c', cropVariant:'default')} 320w,
                   {f:uri.image(image:data.image.0, width:'600c', cropVariant:'default')} 600w,
-                  {f:uri.image(image:data.image.0, width:'430c', cropVariant:'default')} 430w"
+                  {f:uri.image(image:data.image.0, width:'430c', cropVariant:'default')} 1024w"
                 sizes="(max-width: 320px) 80vw,
                        (max-width: 768px) 80vw,
                        430px" />

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"

packages/base/Resources/Private/Extensions/News/Partials/List/Item.html

@@ -3,7 +3,19 @@
         <f:if condition="{newsItem.media}">
             <f:then>
               <picture>
-                <source 
+                <!-- WEBP source -->
+                <source
+                  type="image/webp"
+                  srcset="
+                    {f:uri.image(image:newsItem.media.0, width:'320c', cropVariant:'default', fileExtension:'webp')} 320w,
+                    {f:uri.image(image:newsItem.media.0, width:'768c', cropVariant:'default', fileExtension:'webp')} 768w,
+                    {f:uri.image(image:newsItem.media.0, width:'1024c', cropVariant:'default', fileExtension:'webp')} 1024w"
+                  sizes="(max-width: 320px) 100vw,
+                         (max-width: 768px) 50px,
+                         400px" />
+
+                <!-- Fallback source -->
+                <source
                   srcset="
                     {f:uri.image(image:newsItem.media.0, width:'320c', cropVariant:'default')} 320w,
                     {f:uri.image(image:newsItem.media.0, width:'768c', cropVariant:'default')} 768w,
@@ -11,12 +23,12 @@
                   sizes="(max-width: 320px) 100vw,
                          (max-width: 768px) 50vw,
                          400px" />
-                <f:image 
+                <f:image
-                  image="{newsItem.media.0}" 
+                  image="{newsItem.media.0}"
-                  treatIdAsReference="1" 
+                  treatIdAsReference="1"
                   cropVariant="default"
                   width="1024c"
-                  alt="{newsItem.title}" 
+                  alt="{newsItem.title}"
                   class="news-item-grid-image" />
               </picture>
             </f:then>