I am building a main navigation in TYPO3 12 with drop down menus that contain images for each subpage. I added a custom tab 'Navigation' to the page properties, where I upload that image. What I do not understand is what I need to do in the fluid Template to output this image in the front-end.
I set up a menu data processor and one for images:
dataProcessing {
20 = TYPO3\CMS\Frontend\DataProcessing\MenuProcessor
20 {
levels = 2
includeSpacer = 1
as = mainnavigation
}
30 = files
30 {
as = images
references.fieldName = image
references.table = tt_content
sorting = title
sorting.direction = descending
}
}
In my Fluid Template I am looping through the array that contains the children/subpages of the main menu:
<ul class="dropdown__list">
<f:for each="{mainnavigationItem.children}" as="child">
<li class="{f:if(condition: child.active, then:'active')}">
<a href="{child.link}" target="{child.target}" title="{child.title}"> {child.title}
<img/> --- Here should be the image
</a>
</li>
</f:for>
</ul>
Accessing the array with {child.data.navigation_image} obviously just returns 0 or 1. How can I reference the file? I read about helpful extensions such as vhs or sms responsive images. I know how to render images within a content elements gallery, but this image is stored in the page properties and that leaves me clueless. I guess I need to work with the data processor but how?
You need to process your images inside the elements of your menu processor (as the images belong to the menu items).
Your attempt processes images aside from the menu.
An attempt could be like this:
dataProcessing {
20 = TYPO3\CMS\Frontend\DataProcessing\MenuProcessor
20 {
levels = 2
includeSpacer = 1
as = mainnavigation
dataProcessing {
10 = TYPO3\CMS\Frontend\DataProcessing\FilesProcessor
10 {
references.fieldName = myMenuImage
}
}
}
}
and inside your menu loop use <f:media file="{child.files.0}" />
or <f:image image="{child.files.0}" />
.
based on the documentation, where the image is fetched from the build in field media
. (You wrote you generated your own field for the navigation/ menu image)