WIP Migrate event hero element
This commit is contained in:
Björn Fromme
@@ -1,53 +1,72 @@
|
||||
{namespace v=FluidTYPO3\Vhs\ViewHelpers}
|
||||
<div class="herounit herounit--event">
|
||||
<div id="ep-main-carousel" class="navbar-carousel carousel slide">
|
||||
<div class="item{f:if(condition: iteration.isFirst, then: ' active')}">
|
||||
<div class="container stoerer">
|
||||
<div class="grid col-span-12 gap-4">
|
||||
<div class="col-span-12 md:col-span-3 lg:col-span-2 lg:col-start-2">
|
||||
<div>{settings.eventDateDayFrom -> f:format.raw()}<br>-<br>{settings.eventDateDayTo -> f:format.raw()}</div>
|
||||
<div>{settings.eventDateMonth -> f:format.raw()}</div>
|
||||
</div>
|
||||
<div class="col-span-6 md:col-span-4 lg:col-span-3">{settings.eventHeroClaim -> f:format.raw()}</div>
|
||||
<div class="col-span-6 md:col-span-3 lg:col-span-2">{settings.eventHeroDescription -> f:format.raw()}</div>
|
||||
<html data-namespace-typo3-fluid="true" lang="en"
|
||||
xmlns="http://www.w3.org/1999/xhtml"
|
||||
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
|
||||
|
||||
<div class="relative max-w-screen-2xl mx-auto">
|
||||
<div class="absolute bottom-0 left-0 inset-x-0 py-8 sbw:bg-sbw-overlay-secondary">
|
||||
<div class="max-w-screen-md mx-auto px-4 md:px-0 flex">
|
||||
<div class="sbw:bg-sbw-primary hidden md:flex flex-col justify-center">
|
||||
<div class="text-white font-extrabold text-5xl flex-1 flex flex-col justify-around items-center text-center leading-none py-2 px-16">
|
||||
<span>{settings.eventDateDayFrom -> f:format.raw()}</span>
|
||||
<span>-</span>
|
||||
<span>{settings.eventDateDayTo -> f:format.raw()}</span>
|
||||
</div>
|
||||
<div class="w-full px-4 bg-white text-center sbw:text-sbw-primary p-2 whitespace-nowrap text-2xl uppercase font-bold leading-tight">
|
||||
{settings.eventDateMonth -> f:format.raw()}
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-white uppercase text-7xl text-right md:text-left font-extrabold pr-8 md:px-8">
|
||||
{settings.eventHeroClaim -> f:format.raw()}
|
||||
</div>
|
||||
<div class="text-white text-2xl font-light border-l-8 border-white pl-2">
|
||||
{settings.eventHeroDescription -> f:format.raw()}
|
||||
</div>
|
||||
</div>
|
||||
{slides -> v:iterator.first() -> v:variable.set(name: 'slide')}
|
||||
<f:if condition="{slide.image.0}">
|
||||
</div>
|
||||
<f:alias map="{image: slide.image.0}">
|
||||
<f:if condition="{image}">
|
||||
<f:then>
|
||||
<img src="{f:uri.image(image: slide.image.0, width: '1370')}"
|
||||
alt="{slide.image.0.alternative}" title="{slide.image.0.title}">
|
||||
<picture>
|
||||
<source srcset="{f:uri.image(image: image, width: '1370')}" media="(min-width: 768px)">
|
||||
<source srcset="{f:uri.image(image: image, height: '320')}" media="(max-width: 767px)">
|
||||
<img class="block w-full h-full object-cover"
|
||||
src="{f:uri.image(image: image, height: '320')}"
|
||||
alt="{image.alternative}">
|
||||
</picture>
|
||||
</f:then>
|
||||
<f:else>
|
||||
<img src="https://placehold.it/1370x700" alt="">
|
||||
</f:else>
|
||||
</f:if>
|
||||
</div>
|
||||
</div>
|
||||
<f:if condition="{badge}">
|
||||
<f:alias map="{badgeData: badge.0.data}">
|
||||
<f:link.typolink parameter="{badgeData.link}">
|
||||
<div class="herounit__badge herounit__badge--custom custom-badge">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
preserveAspectRatio="xMinYMin meet" viewBox="0 0 200 200" class="custom-badge__background">
|
||||
<g>
|
||||
</f:alias>
|
||||
<f:comment><!--
|
||||
<f:if condition="{badge}">
|
||||
<f:alias map="{badgeData: badge.0.data}">
|
||||
<f:link.typolink parameter="{badgeData.link}">
|
||||
<div class="herounit__badge herounit__badge--custom custom-badge">
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
preserveAspectRatio="xMinYMin meet" viewBox="0 0 200 200" class="custom-badge__background">
|
||||
<circle id="bgouter" cx="100" cy="100" r="100"/>
|
||||
<circle id="bginner" cx="100" cy="100" r="70"/>
|
||||
</g>
|
||||
</svg>
|
||||
<div class="custom-badge__content">
|
||||
<span class="custom-badge__title">{badgeData.title -> f:format.raw()}</span>
|
||||
<span class="custom-badge__subtitle">{badgeData.subtitle -> f:format.raw()}</span>
|
||||
</svg>
|
||||
<div class="custom-badge__content">
|
||||
<span class="custom-badge__title">{badgeData.title -> f:format.raw()}</span>
|
||||
<span class="custom-badge__subtitle">{badgeData.subtitle -> f:format.raw()}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</f:link.typolink>
|
||||
</f:alias>
|
||||
</f:if>
|
||||
--></f:comment>
|
||||
<f:comment><!--
|
||||
<f:if condition="{settings.eventAddon}">
|
||||
<f:link.typolink parameter="{settings.eventAddon.link}" class="{settings.eventAddon.class}"
|
||||
title="{settings.eventAddon.title}">
|
||||
<img src="{f:uri.image(src: settings.eventAddon.file)}"
|
||||
alt="{settings.eventAddon.title}" title="{settings.eventAddon.title}">
|
||||
</f:link.typolink>
|
||||
</f:alias>
|
||||
</f:if>
|
||||
<f:if condition="{settings.eventAddon}">
|
||||
<f:link.typolink parameter="{settings.eventAddon.link}" class="{settings.eventAddon.class}"
|
||||
title="{settings.eventAddon.title}">
|
||||
<img src="{f:uri.image(src: settings.eventAddon.file)}"
|
||||
alt="{settings.eventAddon.title}" title="{settings.eventAddon.title}">
|
||||
</f:link.typolink>
|
||||
</f:if>
|
||||
</div>
|
||||
</f:if>
|
||||
--></f:comment>
|
||||
</div>
|
||||
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user