64 lines
2.8 KiB
HTML
64 lines
2.8 KiB
HTML
<f:layout name="Default" />
|
|
<f:section name="Header"></f:section>
|
|
<f:section name="Main">
|
|
<f:if condition="{data.header}">
|
|
<h2 class="text-center mb-8">{data.header}</h2>
|
|
</f:if>
|
|
|
|
<f:if condition="{data.image}">
|
|
<f:variable name="columnClass">
|
|
<f:switch expression="{data.imagecols}">
|
|
<f:case value="2">md:grid-cols-2</f:case>
|
|
<f:case value="3">md:grid-cols-3</f:case>
|
|
<f:case value="5">md:grid-cols-5</f:case>
|
|
<f:defaultCase>md:grid-cols-1</f:defaultCase>
|
|
</f:switch>
|
|
</f:variable>
|
|
|
|
<div class="grid grid-cols-1 {columnClass} gap-6 md:gap-8">
|
|
<f:for each="{data.image}" as="image">
|
|
<div class="relative">
|
|
<f:if condition="{image.link}">
|
|
<f:then>
|
|
<f:link.typolink parameter="{image.link}" class="block w-full h-full">
|
|
<picture class="block w-full h-full">
|
|
<source
|
|
type="image/webp"
|
|
srcset="{f:uri.image(image:image, width:'320', cropVariant:'default', fileExtension:'webp')} 320w,
|
|
{f:uri.image(image:image, width:'768', cropVariant:'default', fileExtension:'webp')} 768w"
|
|
sizes="(max-width: 767px) 90vw, 33vw" />
|
|
<img
|
|
src="{f:uri.image(image:image, width:'768', cropVariant:'default')}"
|
|
srcset="{f:uri.image(image:image, width:'320', cropVariant:'default')} 320w,
|
|
{f:uri.image(image:image, width:'768', cropVariant:'default')} 768w"
|
|
sizes="(max-width: 767px) 90vw, 33vw"
|
|
alt="{image.alternative}"
|
|
class="w-full h-full object-cover"
|
|
/>
|
|
</picture>
|
|
</f:link.typolink>
|
|
</f:then>
|
|
<f:else>
|
|
<picture class="block w-full h-full">
|
|
<source
|
|
type="image/webp"
|
|
srcset="{f:uri.image(image:image, width:'320', cropVariant:'default', fileExtension:'webp')} 320w,
|
|
{f:uri.image(image:image, width:'768', cropVariant:'default', fileExtension:'webp')} 768w"
|
|
sizes="(max-width: 767px) 90vw, 33vw" />
|
|
<img
|
|
src="{f:uri.image(image:image, width:'768', cropVariant:'default')}"
|
|
srcset="{f:uri.image(image:image, width:'320', cropVariant:'default')} 320w,
|
|
{f:uri.image(image:image, width:'768', cropVariant:'default')} 768w"
|
|
sizes="(max-width: 767px) 90vw, 33vw"
|
|
alt="{image.alternative}"
|
|
class="w-full h-full object-cover"
|
|
/>
|
|
</picture>
|
|
</f:else>
|
|
</f:if>
|
|
</div>
|
|
</f:for>
|
|
</div>
|
|
</f:if>
|
|
</f:section>
|