Cloonar/dialog-relations-website
2
0
Fork 0
Code Pull Requests Actions Activity

feat: update image size handling in textimage component for better layout control
All checks were successful
Build / build (push) Successful in 4m18s
Details
Build / deploy-stage (push) Successful in 4m47s
Details
Build / switch-stage (push) Successful in 2m3s
Details

Browse Source
This commit is contained in:
Dominik Polakovics Polakovics
2025-06-16 12:44:31 +02:00
parent f36e0d7f72
commit c4d01f2a47
3 changed files with 25 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
packages/base/ContentBlocks/ContentElements/textimage/templates/frontend.html
View File

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