Image navigation in TYPO3 with the MenuProcessor

Avatar of Andre LaniusAndre LaniusPosted: 10. June 2023 Categorys: Menus, Typoscript

From TYPO3 version 10.4 menus and navigations should only be created with the MenuProcessor in TYPO3 Typoscript.

The same applies if you want to create image navigation. The images should be stored on the pages in the page properties under Resources.

For normal navigation, the following must be entered in the TS setup.

page {
    10 = FLUIDTEMPLATE
    10 {
        dataProcessing {
            20 = TYPO3\CMS\Frontend\DataProcessing\MenuProcessor
            20 {
                levels = 2
                includeSpacer = 1
                as = navigation
            }
        }
    }
}

In the fluid template it could then be output something like this, but in this example for only 1 level.

<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>

It is done in a similar way if you want to create a navigation or a menu from images that are stored in the page properties.

The above typescript would have to be expanded a bit. Lines 10 - 15 would then have to be added where the FilesProcessor is called.

page {
    10 = FLUIDTEMPLATE
    10 {
        dataProcessing {
            20 = TYPO3\CMS\Frontend\DataProcessing\MenuProcessor
            20 {
                levels = 2
                includeSpacer = 1
                as = navigation
                dataProcessing {
                    10 = TYPO3\CMS\Frontend\DataProcessing\FilesProcessor
                    10 {
                        references.fieldName = media
                    }
                }
            }
        }
    }
}

You can then access the images within a loop in the Fluid template and display them as a menu. It could look something like this.

<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 comments  
New comment

0 comments