feat: teasers and the left/event sidebar page layouts on TYPO3 13

Templates restored from a46918d unchanged; TCA and TypoScript were
already there. The teaser markup matches TYPO3 10 on every page that
renders (image titles lose trailing whitespace).

Co-Authored-By: Claude Opus 5.5 <[email protected]>
This commit is contained in:
frommeandClaude Opus 5.5 committed 2026-10-24 11:51:55 +02:00
1 parent dfed542af1
commit 301e89e60c
17 files changed
+536

No files matched your search

@@ -0,0 +1,35 @@
<html data-namespace-typo3-fluid="true" lang="en"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
<f:render partial="Mainnav" section="Main" arguments="{_all}"/>
<header>
<f:render partial="HeaderSliderSmall" arguments="{_all}"/>
<f:if condition="{data.tx_eptheme_hide_searchbar}">
<f:else>
<f:cObject typoscriptObjectPath="lib.searchBar"/>
</f:else>
</f:if>
</header>
<main id="main-content">
<f:cObject typoscriptObjectPath="lib.breadcrumb"/>
<f:render section="Header" optional="true"/>
<div class="container grid grid-cols-3 gap-8">
<div class="col-span-3 lg:col-span-1 order-last lg:order-none">
<f:render section="Sidebar"/>
</div>
<div class="col-span-3 lg:col-span-2">
<f:render section="Content"/>
</div>
</div>
<f:render section="Teasers"/>
</main>
<footer>
<f:render partial="Footer" arguments="{_all}"/>
</footer>
<f:render partial="ContactBar" arguments="{_all}"/>
<f:render partial="Topnav" arguments="{_all}"/>
<f:render partial="Mobilenav" section="Main" arguments="{_all}"/>
<f:render partial="Search/MobileSearch" arguments="{_all}"/>
<f:render partial="Config" arguments="{_all}" />
</html>
@@ -0,0 +1,29 @@
<html data-namespace-typo3-fluid="true" lang="en"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
<f:render partial="Mainnav" section="Main" arguments="{_all}"/>
<header>
<f:render partial="HeaderSliderSmall" arguments="{_all}"/>
</header>
<main id="main-content">
<f:cObject typoscriptObjectPath="lib.breadcrumb"/>
<f:render section="Header" optional="true"/>
<div class="container grid grid-cols-3 gap-8">
<div class="col-span-3 lg:col-span-1 order-last lg:order-none">
<f:render section="Sidebar"/>
</div>
<div class="col-span-3 lg:col-span-2">
<f:render section="Content"/>
</div>
</div>
<f:render section="Teasers"/>
</main>
<footer>
<f:render partial="Footer" arguments="{_all}"/>
</footer>
<f:render partial="ContactBar" arguments="{_all}"/>
<f:render partial="Topnav" arguments="{_all}"/>
<f:render partial="Mobilenav" section="Main" arguments="{_all}"/>
<f:render partial="Config" arguments="{_all}" />
</html>
@@ -0,0 +1,29 @@
<html data-namespace-typo3-fluid="true" lang="en"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
<f:render partial="Mainnav" section="Main" arguments="{_all}"/>
<header>
<f:render partial="HeaderSliderSmall" arguments="{_all}"/>
<f:cObject typoscriptObjectPath="lib.breadcrumb"/>
</header>
<main id="main-content">
<f:render section="Header" optional="true"/>
<div class="container grid grid-cols-3 gap-8">
<div class="col-span-3 lg:col-span-2">
<f:render section="Content"/>
</div>
<div class="col-span-3 lg:col-span-1">
<f:render section="Sidebar"/>
</div>
</div>
<f:render section="Teasers"/>
</main>
<footer>
<f:render partial="Footer" arguments="{_all}"/>
</footer>
<f:render partial="ContactBar" arguments="{_all}"/>
<f:render partial="Topnav" arguments="{_all}"/>
<f:render partial="Mobilenav" section="Main" arguments="{_all}"/>
<f:render partial="Config" arguments="{_all}" />
</html>
@@ -0,0 +1,52 @@
<html data-namespace-typo3-fluid="true" lang="en"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:ep="http://typo3.org/ns/EP/EpTheme/ViewHelpers"
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
<f:section name="Teaser">
<div class="relative flex flex-col">
<div class="relative">
{ep:icon(icon: 'flag-{city.country.code -> f:format.case(mode: \'lower\')}', class: 'w-8 h-6 absolute top-0 left-0')}
<f:alias map="{teaserImage: city.teaserImage, defaultImage: city.images.0}">
<f:if condition="{teaserImage}">
<f:then>
<f:variable name="image" value="{teaserImage}"/>
</f:then>
<f:else>
<f:variable name="image" value="{defaultImage}"/>
</f:else>
</f:if>
<f:if condition="{image}">
<f:then>
<f:image image="{image}"
loading="lazy"
class="block w-full h-full object-cover"
width="400c"
height="300c"
alt="{city.name}" />
</f:then>
<f:else>
<f:image src="EXT:ep_theme/Resources/Public/images/lazy.png"
width="400c"
height="300c"
alt="{city.name}"/>
</f:else>
</f:if>
</f:alias>
</div>
<div class="flex-1 flex flex-col pt-4 bg-white border border-t-0 border-zinc-200">
<a href="{f:uri.typolink(parameter: city.detailPage)}" class="px-2 peer headline--3 mb-4 no-underline">
{city.name}
<span class="absolute inset-0"></span>
</a>
<div class="flex-1 px-2 text-zinc-800" data-rte-content>
{city.teaser -> f:format.crop(maxCharacters: settings.teaserTextMaxChars) -> f:format.html()}
</div>
<div class="button teaser-button">
{f:translate(key: 'tx_eptheme.label.teaserbutton.default', extensionName: 'ep_theme')}
</div>
</div>
</div>
</f:section>
</html>
@@ -0,0 +1,51 @@
<html data-namespace-typo3-fluid="true" lang="en"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
<f:section name="Teaser">
<f:if condition="{concept}">
<div class="relative flex flex-col">
<div class="relative">
<f:alias map="{teaserImage: concept.teaserImage, defaultImage: concept.headerImage}">
<f:if condition="{teaserImage}">
<f:then>
<f:variable name="image" value="{teaserImage}"/>
</f:then>
<f:else>
<f:variable name="image" value="{defaultImage}"/>
</f:else>
</f:if>
<f:if condition="{image}">
<f:then>
<f:image image="{image}"
loading="lazy"
class="block w-full h-full object-cover"
width="400c"
height="300c"
alt="{concept.name}" />
</f:then>
<f:else>
<f:image src="EXT:ep_theme/Resources/Public/images/lazy.png"
width="400c"
height="300c"
alt="{concept.name}"/>
</f:else>
</f:if>
</f:alias>
<div class="absolute z-10 inset-0 bg-concept-{concept.code}/70">
<f:link.typolink parameter="{concept.detailPage}"
class="flex h-full w-full p-4 items-end headline--3 text-white">
{concept.name}
<span class="absolute inset-0"></span>
</f:link.typolink>
</div>
</div>
<div class="p-4 flex-1">
{concept.teaser -> f:format.crop(maxCharacters: settings.teaserTextMaxChars) -> f:format.html()}
</div>
<div class="bg-concept-{concept.code} h-1 w-20"></div>
</div>
</f:if>
</f:section>
</html>
@@ -0,0 +1,52 @@
<html data-namespace-typo3-fluid="true" lang="en"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:ep="http://typo3.org/ns/EP/EpTheme/ViewHelpers"
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
<f:section name="Teaser">
<div class="relative flex flex-col">
<div class="relative">
{ep:icon(icon: 'flag-{region.country.code -> f:format.case(mode: \'lower\')}', class: 'w-8 h-6 absolute top-0 left-0')}
<f:alias map="{teaserImage: region.teaserImage, defaultImage: region.images.0}">
<f:if condition="{teaserImage}">
<f:then>
<f:variable name="image" value="{teaserImage}"/>
</f:then>
<f:else>
<f:variable name="image" value="{defaultImage}"/>
</f:else>
</f:if>
<f:if condition="{image}">
<f:then>
<f:image image="{image}"
loading="lazy"
class="block w-full h-full object-cover"
width="400c"
height="300c"
alt="{region.name}" />
</f:then>
<f:else>
<f:image src="EXT:ep_theme/Resources/Public/images/lazy.png"
width="400c"
height="300c"
alt="{region.name}"/>
</f:else>
</f:if>
</f:alias>
</div>
<div class="flex-1 flex flex-col pt-4 bg-white border border-t-0 border-zinc-200">
<a href="{f:uri.typolink(parameter: region.detailPage)}" class="px-2 peer headline--3 mb-4 no-underline">
{region.name}
<span class="absolute inset-0"></span>
</a>
<div class="flex-1 px-2 text-zinc-800" data-rte-content>
{region.teaser -> f:format.crop(maxCharacters: settings.teaserTextMaxChars) -> f:format.html()}
</div>
<div class="button teaser-button">
{f:translate(key: 'tx_eptheme.label.teaserbutton.default', extensionName: 'ep_theme')}
</div>
</div>
</div>
</f:section>
</html>
@@ -0,0 +1,34 @@
<html data-namespace-typo3-fluid="true" lang="en"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:ep="http://typo3.org/ns/EP/EpTheme/ViewHelpers"
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
<f:section name="Teaser">
<div class="relative flex flex-col">
<div class="relative">
<f:if condition="{context.country}">
{ep:icon(icon: 'flag-{context.country.code -> f:format.case(mode: \'lower\')}', class: 'w-8 h-6 absolute top-0 left-0')}
</f:if>
<f:image image="{teaserImage}"
loading="lazy"
class="block w-full h-full object-cover"
width="400c"
height="300c"
alt="{teaserImage.alternative}" />
</div>
<div class="flex-1 flex flex-col pt-4 bg-white border border-t-0 border-zinc-200">
<a href="{f:uri.typolink(parameter: data.header_link)}" class="px-2 peer headline--3 mb-2 no-underline">
{data.header -> f:format.nl2br()}{f:if(condition: data.subheader, then: '<br>{data.subheader}')}
<span class="absolute inset-0"></span>
</a>
<div class="flex-1 px-2 pb-6 text-zinc-800" data-rte-content>
{data.bodytext -> f:format.html()}
</div>
<div class="button teaser-button">
{data.button -> v:or(alternative: 'Details')}
</div>
</div>
</div>
</f:section>
</html>
@@ -0,0 +1,27 @@
<html data-namespace-typo3-fluid="true" lang="en"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:v="http://typo3.org/ns/FluidTYPO3/Vhs/ViewHelpers"
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
<f:section name="Teaser">
<div class="relative teaserbox teaserbox--default">
<div class="teasebox__image">
<f:render partial="TeaserImage" arguments="{image: teaserImage}"/>
</div>
<div class="teaserbox__main">
<a href="{f:uri.typolink(parameter: data.header_link)}" class="headline headline--3 headline--teaser no-underline">
{data.header -> f:format.nl2br()}{f:if(condition: data.subheader, then: '<br>{data.subheader}')}
<span class="absolute inset-0"></span>
</a>
<hr>
<div class="text-zinc-800" data-rte-content>
{data.bodytext -> f:format.html()}
</div>
</div>
<div class="button bg-button button--full">
{data.button -> v:or(alternative: 'Details')}
</div>
</div>
</f:section>
</html>
@@ -0,0 +1,63 @@
<html data-namespace-typo3-fluid="true" lang="en"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
<f:if condition="{image.uid}">
<f:then>
<picture>
<source media="(min-width: 1201px)" srcset="{f:uri.image(
image: image, width: '370', height: '220c-100'
)} 370w"/>
<source media="(max-width: 1200px)" srcset="{f:uri.image(
image: image, width: '320', height: '160c-100'
)} 320w"/>
<source media="(max-width: 991px)" srcset="{f:uri.image(
image: image, width: '360', height: '200c-100'
)} 360w"/>
<source media="(max-width: 768px)" srcset="{f:uri.image(
image: image, width: '500', height: '250c-100'
)} 500w"/>
<source media="(max-width: 512px)" srcset="{f:uri.image(
image: image, width: '350', height: '175c-100'
)} 350w"/>
<f:image image="{image}"
loading="lazy"
class="block w-full h-auto"
width="500"
height="250c-100"
alt="{image.alternative}" />
</picture>
</f:then>
<f:else>
<picture>
<source media="(min-width: 1201px)" srcset="{f:uri.image(
src: 'EXT:ep_theme/Resources/Public/images/header-winter.jpg',
width: '370', height: '220c-100'
)} 370w"/>
<source media="(max-width: 1200px)" srcset="{f:uri.image(
src: 'EXT:ep_theme/Resources/Public/images/header-winter.jpg',
width: '320', height: '160c-100'
)} 320w"/>
<source media="(max-width: 991px)" srcset="{f:uri.image(
src: 'EXT:ep_theme/Resources/Public/images/header-winter.jpg',
width: '360', height: '200c-100'
)} 360w"/>
<source media="(max-width: 768px)" srcset="{f:uri.image(
src: 'EXT:ep_theme/Resources/Public/images/header-winter.jpg',
width: '500', height: '250c-100'
)} 500w"/>
<source media="(max-width: 512px)" srcset="{f:uri.image(
src: 'EXT:ep_theme/Resources/Public/images/header-winter.jpg',
width: '350', height: '175c-100'
)} 350w"/>
<f:image src="EXT:ep_theme/Resources/Public/images/header-winter.jpg"
loading="lazy"
class="block w-full h-auto"
width="360"
height="270c-100"
alt="" />
</picture>
</f:else>
</f:if>
</html>
@@ -0,0 +1,19 @@
<html data-namespace-typo3-fluid="true" lang="en"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers"
xmlns:ep="http://typo3.org/ns/EP/EpTheme/ViewHelpers">
<f:layout name="Bare"/>
<f:section name="Main">
<f:switch expression="{data.layout}">
<f:case value="0">
<f:render partial="Teaser/OneColumn" section="Teaser" arguments="{_all}"/>
</f:case>
<f:case value="1">
<f:render partial="Teaser/TwoColumn" section="Teaser" arguments="{_all}"/>
</f:case>
</f:switch>
</f:section>
</html>
@@ -0,0 +1,13 @@
<html data-namespace-typo3-fluid="true" lang="en"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers"
xmlns:ep="http://typo3.org/ns/EP/EpTheme/ViewHelpers"
xmlns:v="http://typo3.org/ns/FluidTYPO3/Vhs/ViewHelpers">
<f:layout name="Bare"/>
<f:section name="Main">
<f:render partial="City/Teaser" section="Teaser" arguments="{_all}"/>
</f:section>
</html>
@@ -0,0 +1,13 @@
<html data-namespace-typo3-fluid="true" lang="en"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers"
xmlns:ep="http://typo3.org/ns/EP/EpTheme/ViewHelpers"
xmlns:v="http://typo3.org/ns/FluidTYPO3/Vhs/ViewHelpers">
<f:layout name="Bare"/>
<f:section name="Main">
<f:render partial="Concept/Teaser" section="Teaser" arguments="{_all}"/>
</f:section>
</html>
@@ -0,0 +1,37 @@
<html data-namespace-typo3-fluid="true" lang="en"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
<f:layout name="Bare"/>
<f:section name="Main">
<div class="relative flex flex-col">
<div class="relative">
<svg class="w-8 h-6 absolute top-0 left-0">
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-flag-{country.code -> f:format.case(mode: 'lower')}"></use>
</svg>
<f:if condition="{country.teaserImages}">
<f:image image="{country.teaserImages.0}"
loading="lazy"
class="block w-full h-full object-cover"
width="400c"
height="300c"
alt="{country.name}" />
</f:if>
</div>
<div class="flex-1 flex flex-col pt-4 bg-white border border-t-0 border-zinc-200">
<a href="{f:uri.typolink(parameter: country.detailPage)}" class="px-2 peer headline--3 mb-4 no-underline">
{country.name}
<span class="absolute inset-0"></span>
</a>
<div class="flex-1 px-2 text-zinc-800" data-rte-content>
{country.teaser -> f:format.crop(maxCharacters: settings.teaserTextMaxChars) -> f:format.html()}
</div>
<div class="button teaser-button w-full">
{data.button -> v:or(alternative: 'Details')}
</div>
</div>
</div>
</f:section>
</html>
@@ -0,0 +1,13 @@
<html data-namespace-typo3-fluid="true" lang="en"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers"
xmlns:ep="http://typo3.org/ns/EP/EpTheme/ViewHelpers"
xmlns:v="http://typo3.org/ns/FluidTYPO3/Vhs/ViewHelpers">
<f:layout name="Bare"/>
<f:section name="Main">
<f:render partial="Region/Teaser" section="Teaser" arguments="{_all}"/>
</f:section>
</html>
@@ -0,0 +1,23 @@
<html data-namespace-typo3-fluid="true" lang="en"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
<f:layout name="Page/SubpageSidebarLeft"/>
<f:section name="Header">
<f:cObject typoscriptObjectPath="lib.dynamicContent" data="{pageUid: '{data.uid}', colPos: '3'}" />
</f:section>
<f:section name="Content">
<f:cObject typoscriptObjectPath="lib.dynamicContent" data="{pageUid: '{data.uid}', colPos: '4'}" />
</f:section>
<f:section name="Sidebar">
<f:cObject typoscriptObjectPath="lib.dynamicContent" data="{pageUid: '{data.uid}', colPos: '2'}" />
</f:section>
<f:section name="Teasers">
<f:cObject typoscriptObjectPath="lib.dynamicContent" data="{pageUid: '{data.uid}', colPos: '1', wrap: '<a id=\"teasers\" class=\"anchor\"></a>|'}" />
</f:section>
</html>
@@ -0,0 +1,23 @@
<html data-namespace-typo3-fluid="true" lang="en"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
<f:layout name="Page/SubpageSidebarLeftEvent"/>
<f:section name="Header">
<f:cObject typoscriptObjectPath="lib.dynamicContent" data="{pageUid: '{data.uid}', colPos: '3'}" />
</f:section>
<f:section name="Content">
<f:cObject typoscriptObjectPath="lib.dynamicContent" data="{pageUid: '{data.uid}', colPos: '4'}" />
</f:section>
<f:section name="Sidebar">
<f:cObject typoscriptObjectPath="lib.dynamicContent" data="{pageUid: '{data.uid}', colPos: '2'}" />
</f:section>
<f:section name="Teasers">
<f:cObject typoscriptObjectPath="lib.dynamicContent" data="{pageUid: '{data.uid}', colPos: '1', wrap: '<a id=\"teasers\" class=\"anchor\"></a>|'}" />
</f:section>
</html>
@@ -0,0 +1,23 @@
<html data-namespace-typo3-fluid="true" lang="en"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
<f:layout name="Page/SubpageSidebarRightEvent"/>
<f:section name="Header">
<f:cObject typoscriptObjectPath="lib.dynamicContent" data="{pageUid: '{data.uid}', colPos: '3'}" />
</f:section>
<f:section name="Content">
<f:cObject typoscriptObjectPath="lib.dynamicContent" data="{pageUid: '{data.uid}', colPos: '4'}" />
</f:section>
<f:section name="Sidebar">
<f:cObject typoscriptObjectPath="lib.dynamicContent" data="{pageUid: '{data.uid}', colPos: '2'}" />
</f:section>
<f:section name="Teasers">
<f:cObject typoscriptObjectPath="lib.dynamicContent" data="{pageUid: '{data.uid}', colPos: '1', wrap: '<a id=\"teasers\" class=\"anchor\"></a>|'}" />
</f:section>
</html>