Eine Vorlage für ein Menü mit MenuProcessor und Fluid Template findet sich im Sitepackage, das man sich bei sitepackagebuilder.com generieren kann. Will man zusätzlich Bilder aus den Seiteneigenschaften anzeigen, muss man die Vorlage etwas erweitern.
Hier zunächst das Typoscript, das der Sitepackagebuilder für den MenuProcessor ausliefert:
page { ... 10 = FLUIDTEMPLATE 10 { ... dataProcessing { ... 20 = TYPO3\CMS\Frontend\DataProcessing\MenuProcessor 20 { levels = 2 includeSpacer = 1 as = mainnavigation } } } ... }
Und das dazugehörige Fluid Template, der Einfachheit halber ohne die zweite Menüebene:
<ul> <f:for each="{mainnavigation}" as="mainnavigationItem"> <li class="{f:if(condition: mainnavigationItem.active, then:'active')}"> <a href="{mainnavigationItem.link}" target="{mainnavigationItem.target}" title="{mainnavigationItem.title}"> {mainnavigationItem.title} </a> ... </li> </f:for> </ul>
Das ist der Ausgangspunkt. Will man Zugriff auf die Bilder, die in den Seiteneigenschaften unter „Ressources“ eingebunden werden, so muss man zunächst das Typoscript erweitern (um die Zeilen 13 – 18):
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 } } } } } ... }
Dann kann man im Fluid Template auf das Bild zugreifen:
<f:for each="{mainnavigation}" as="mainnavigationItem"> <f:if condition="{mainnavigationItem.files}"> <f:media class="image-embed-item" file="{mainnavigationItem.files.0}" width="300" /> </f:if> </f:for>
Es wird davon ausgegangen, dass lediglich ein Bild hinterlegt ist und ausgegeben werden soll (files.0).
Will man das Bild als Hintergrundbild verwenden, so funktioniert folgender Code:
<f:for each="{mainnavigation}" as="mainnavigationItem"> <f:if condition="{mainnavigationItem.files}"> <a class="menulink" href="{mainnavigationItem.link}" target="{mainnavigationItem.target}" title="{mainnavigationItem.title}" style="background-image:url({f:uri.image(image:mainnavigationItem.files.0,width:'300')})"> <span>{mainnavigationItem.title}</span> </a> </f:if> </f:for>