Menü mit Bildern in TYPO3 erstellt mit dem MenuProcessor

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>

Link:
https://docs.typo3.org/m/typo3/reference-typoscript/main/en-us/ContentObjects/Fluidtemplate/DataProcessing/MenuProcessor.html