Bilder-Navigation in TYPO3 mit dem MenuProcessor

Avatar of Andre LaniusAndre LaniusVerfasst 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  

Comments are disabled for this post.

0 Kommentare