fix: prevent empty buttons in link panel content element

This commit is contained in:
2026-09-03 15:51:38 +02:00
parent 39fb85744d
commit 8f421da599
@@ -9,51 +9,61 @@
<div class="grid grid-cols-1 lg:grid-cols-12 lg:grid-rows-3 lg:grid-flow-col gap-4 lg:gap-1 lg:h-128 bg-white"> <div class="grid grid-cols-1 lg:grid-cols-12 lg:grid-rows-3 lg:grid-flow-col gap-4 lg:gap-1 lg:h-128 bg-white">
<f:if condition="{images.0}"> <f:if condition="{images.0}">
<div class="relative h-32 lg:h-auto lg:col-span-2 lg:row-span-1 overflow-hidden"> <div class="relative h-32 lg:h-auto lg:col-span-2 lg:row-span-1 overflow-hidden">
<f:if condition="{images.0.link}">
<f:link.typolink parameter="{images.0.link}" class="absolute inset-0 z-20 flex items-center justify-center peer"> <f:link.typolink parameter="{images.0.link}" class="absolute inset-0 z-20 flex items-center justify-center peer">
<div class="inline-block px-4 py-2 text-center leading-none text-white hover:text-white text-2xl font-bold uppercase break-normal sbw:bg-sbw-secondary/90 uch:bg-uch-secondary/90 snz:bg-snz-secondary/90"> <div class="inline-block px-4 py-2 text-center leading-none text-white hover:text-white text-2xl font-bold uppercase break-normal sbw:bg-sbw-secondary/90 uch:bg-uch-secondary/90 snz:bg-snz-secondary/90">
{images.0.title -> f:format.raw()} {images.0.title -> f:format.raw()}
</div> </div>
</f:link.typolink> </f:link.typolink>
</f:if>
<f:image image="{images.0}" alt="{images.0.alternative}" class="w-full h-full object-cover transition-transform duration-300 peer-hover:scale-110" /> <f:image image="{images.0}" alt="{images.0.alternative}" class="w-full h-full object-cover transition-transform duration-300 peer-hover:scale-110" />
</div> </div>
</f:if> </f:if>
<f:if condition="{images.1}"> <f:if condition="{images.1}">
<div class="relative h-32 lg:h-auto lg:col-span-2 lg:row-span-1 overflow-hidden"> <div class="relative h-32 lg:h-auto lg:col-span-2 lg:row-span-1 overflow-hidden">
<f:if condition="{images.1.link}">
<f:link.typolink parameter="{images.1.link}" class="absolute inset-0 z-20 flex items-center justify-center peer"> <f:link.typolink parameter="{images.1.link}" class="absolute inset-0 z-20 flex items-center justify-center peer">
<div class="inline-block px-4 py-2 text-center leading-none text-white hover:text-white text-2xl font-bold uppercase break-normal sbw:bg-sbw-secondary/90 uch:bg-uch-secondary/90 snz:bg-snz-secondary/90"> <div class="inline-block px-4 py-2 text-center leading-none text-white hover:text-white text-2xl font-bold uppercase break-normal sbw:bg-sbw-secondary/90 uch:bg-uch-secondary/90 snz:bg-snz-secondary/90">
{images.1.title -> f:format.raw()} {images.1.title -> f:format.raw()}
</div> </div>
</f:link.typolink> </f:link.typolink>
</f:if>
<f:image image="{images.1}" alt="{images.1.alternative}" class="w-full h-full object-cover transition-transform duration-300 peer-hover:scale-110" /> <f:image image="{images.1}" alt="{images.1.alternative}" class="w-full h-full object-cover transition-transform duration-300 peer-hover:scale-110" />
</div> </div>
</f:if> </f:if>
<f:if condition="{images.4}"> <f:if condition="{images.4}">
<div class="relative h-32 lg:h-auto lg:col-span-12 lg:row-span-1 overflow-hidden"> <div class="relative h-32 lg:h-auto lg:col-span-12 lg:row-span-1 overflow-hidden">
<f:if condition="{images.4.link}">
<f:link.typolink parameter="{images.4.link}" class="absolute inset-0 z-20 flex items-center justify-center peer"> <f:link.typolink parameter="{images.4.link}" class="absolute inset-0 z-20 flex items-center justify-center peer">
<div class="inline-block px-4 py-2 text-center leading-none text-white hover:text-white text-2xl font-bold uppercase break-normal sbw:bg-sbw-secondary/90 uch:bg-uch-secondary/90 snz:bg-snz-secondary/90"> <div class="inline-block px-4 py-2 text-center leading-none text-white hover:text-white text-2xl font-bold uppercase break-normal sbw:bg-sbw-secondary/90 uch:bg-uch-secondary/90 snz:bg-snz-secondary/90">
{images.4.title -> f:format.raw()} {images.4.title -> f:format.raw()}
</div> </div>
</f:link.typolink> </f:link.typolink>
</f:if>
<f:image image="{images.4}" alt="{images.4.alternative}" class="w-full h-full object-cover transition-transform duration-300 peer-hover:scale-110" /> <f:image image="{images.4}" alt="{images.4.alternative}" class="w-full h-full object-cover transition-transform duration-300 peer-hover:scale-110" />
</div> </div>
</f:if> </f:if>
<f:if condition="{images.2}"> <f:if condition="{images.2}">
<div class="relative h-32 lg:h-auto lg:col-span-4 lg:row-span-2 overflow-hidden"> <div class="relative h-32 lg:h-auto lg:col-span-4 lg:row-span-2 overflow-hidden">
<f:if condition="{images.2.link}">
<f:link.typolink parameter="{images.2.link}" class="absolute inset-0 z-20 flex items-center justify-center peer"> <f:link.typolink parameter="{images.2.link}" class="absolute inset-0 z-20 flex items-center justify-center peer">
<div class="inline-block px-4 py-2 text-center leading-none text-white hover:text-white text-2xl font-bold uppercase break-normal sbw:bg-sbw-secondary/90 uch:bg-uch-secondary/90 snz:bg-snz-secondary/90"> <div class="inline-block px-4 py-2 text-center leading-none text-white hover:text-white text-2xl font-bold uppercase break-normal sbw:bg-sbw-secondary/90 uch:bg-uch-secondary/90 snz:bg-snz-secondary/90">
{images.2.title -> f:format.raw()} {images.2.title -> f:format.raw()}
</div> </div>
</f:link.typolink> </f:link.typolink>
</f:if>
<f:image image="{images.2}" alt="{images.2.alternative}" class="w-full h-full object-cover transition-transform duration-300 peer-hover:scale-110" /> <f:image image="{images.2}" alt="{images.2.alternative}" class="w-full h-full object-cover transition-transform duration-300 peer-hover:scale-110" />
</div> </div>
</f:if> </f:if>
<f:if condition="{images.3}"> <f:if condition="{images.3}">
<div class="relative h-32 lg:h-auto lg:col-span-6 lg:row-span-2 overflow-hidden"> <div class="relative h-32 lg:h-auto lg:col-span-6 lg:row-span-2 overflow-hidden">
<f:if condition="{images.3.link}">
<f:link.typolink parameter="{images.3.link}" class="absolute inset-0 z-20 w-full h-full flex items-center justify-center peer"> <f:link.typolink parameter="{images.3.link}" class="absolute inset-0 z-20 w-full h-full flex items-center justify-center peer">
<div class="inline-block px-4 py-2 text-center leading-none text-white hover:text-white text-2xl font-bold uppercase break-normal sbw:bg-sbw-secondary/90 uch:bg-uch-secondary/90 snz:bg-snz-secondary/90"> <div class="inline-block px-4 py-2 text-center leading-none text-white hover:text-white text-2xl font-bold uppercase break-normal sbw:bg-sbw-secondary/90 uch:bg-uch-secondary/90 snz:bg-snz-secondary/90">
{images.3.title -> f:format.raw()} {images.3.title -> f:format.raw()}
</div> </div>
</f:link.typolink> </f:link.typolink>
</f:if>
<f:image image="{images.3}" alt="{images.3.alternative}" class="w-full h-full object-cover transition-transform duration-300 peer-hover:scale-110" /> <f:image image="{images.3}" alt="{images.3.alternative}" class="w-full h-full object-cover transition-transform duration-300 peer-hover:scale-110" />
</div> </div>
</f:if> </f:if>