Bilder-Navigation in TYPO3 mit dem MenuProcessor
Verfasst am: 10. Juni 2023 Kategorien: Menüs, Typoscript
Ab der TYPO3-Version 10.4 sollten Menüs und Navigationen nur noch mit dem MenuProcessor in Typoscript von TYPO3 erzeugt werden.
Gleiches gilt auch, wenn man eine Bilder-Navigation erzeugen möchte. Die Bilder sollten auf den Seiten in den Seiteneigenschaften unter Resources hinterlegt sein.
Für eine normale Navigation muss folgendes ins TS Setup eingetragen sein.
page {
10 = FLUIDTEMPLATE
10 {
dataProcessing {
20 = TYPO3\CMS\Frontend\DataProcessing\MenuProcessor
20 {
levels = 2
includeSpacer = 1
as = navigation
}
}
}
}Im Fluid-Template könnte es dann in etwa wie folgt ausgegeben werden, aber in diesem Beispiel für nur 1 Ebene.
<ul>
<f:for each="{navigation}" as="item">
<li class="{f:if(condition: item.active, then:'active')}">
<a href="{item.link}" target="{item.target}" title="{item.title}">
{item.title}
</a>
...
</li>
</f:for>
</ul>So ähnlich wird es auch gemacht, wenn man eine Navigation oder ein Menü aus Bildern erzeugen möchte, die in den Seiteneigenschaften hinterlegt sind.
Es müsste das o.a. Typoscript noch etwas erweitert werden. Die Zeilen 11 - 16 müssten dann noch ergänzt werden, wo der FilesProcessor aufgerufen wird.
page {
10 = FLUIDTEMPLATE
10 {
dataProcessing {
...
20 = TYPO3\CMS\Frontend\DataProcessing\MenuProcessor
20 {
levels = 2
includeSpacer = 1
as = mainnavigation
dataProcessing {
10 = TYPO3\CMS\Frontend\DataProcessing\FilesProcessor
10 {
references.fieldName = media
}
}
}
}
}
}Anschließend kann man im Fluid-Template auf die Bilder innerhalb einer Schleife zugreifen und als Menü ausgeben. Das könnte ungefähr so aussehen.
<f:for each="{navigation}" as="item">
<f:if condition="{item.files}">
<f:link.page pageUid="{item.link}"><f:media class="image-embed-item" file="{item.files.0}" width="300" /></f:link.page>
</f:if>
</f:for>
0 Kommentare