63 lines
2.7 KiB
HTML
63 lines
2.7 KiB
HTML
<f:layout name="Default" />
|
|
<f:section name="Header"></f:section>
|
|
<f:section name="Main">
|
|
<f:variable name="imageSizeClass" value="md:w-1/2" />
|
|
<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>
|
|
|
|
<div class="flex flex-col {gapClass} py-16 fade-in-on-scroll {f:if(condition: '{data.imageorient} == 26', then: 'md:flex-row-reverse', else: 'md:flex-row')}">
|
|
<div class="flex items-center justify-center {imageSizeClass}">
|
|
<f:if condition="{data.image}">
|
|
<f:then>
|
|
<figure class="block w-full">
|
|
<!-- 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: 767px) 90vw,
|
|
{f:if(condition: '{data.imagesize} == 1', then: '(min-width: 768px) 40vw', else: '(min-width: 768px) 50vw')}" />
|
|
<!-- Fallback source -->
|
|
<source
|
|
srcset="
|
|
{f:uri.image(image:data.image.0, width:'320c', cropVariant:'default')} 320w,
|
|
{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:image
|
|
image="{data.image.0}"
|
|
treatIdAsReference="1"
|
|
cropVariant="default"
|
|
width="538c"
|
|
alt="{data.image.0.alternative}"
|
|
class="max-w-full h-auto block"
|
|
/>
|
|
</figure>
|
|
</f:then>
|
|
<f:else>
|
|
<p>No image available</p>
|
|
</f:else>
|
|
</f:if>
|
|
</div>
|
|
<div class="{textSizeClass}">
|
|
<f:if condition="{data.header}">
|
|
<h2>{data.header}</h2>
|
|
</f:if>
|
|
<f:if condition="{data.bodytext}">
|
|
<div class="prose lg:prose-lg">
|
|
<f:format.html>{data.bodytext}</f:format.html>
|
|
</div>
|
|
</f:if>
|
|
</div>
|
|
</div>
|
|
</f:section>
|