fix: design changes

2024-12-14 17:13:33 +01:00
parent 78bffc5b46
commit ee73d44aaf
6 changed files with 82 additions and 8 deletions
--- a/packages/base/ContentBlocks/ContentElements/textimage/templates/frontend.html
+++ b/packages/base/ContentBlocks/ContentElements/textimage/templates/frontend.html
@@ -8,7 +8,23 @@
    <div class="textimage-image-wrapper">
      <f:if condition="{data.image}">
        <f:then>
-          <f:image image="{data.image.0}" alt="{data.header}" class="textimage-image" />
+          <picture>
+            <source 
+              srcset="
+                {f:uri.image(image:data.image.0, width:'320c', cropVariant:'default')} 320w,
+                {f:uri.image(image:data.image.0, width:'768c', cropVariant:'default')} 768w,
+                {f:uri.image(image:data.image.0, width:'1024c', cropVariant:'default')} 1024w"
+              sizes="(max-width: 320px) 90vw,
+                     (max-width: 768px) 600px,
+                     600px" />
+            <f:image 
+              image="{data.image.0}" 
+              treatIdAsReference="1" 
+              cropVariant="default" 
+              width="1024c" 
+              alt="{data.header}" 
+              class="textimage-image" />
+          </picture>
        </f:then>
        <f:else>
          <p>No image available</p>