Fluid menu element with image from page resources? - typo3

Question

I've created a new fluid menu element and I need it to show an image for each page. The image is stored in the page resources.
When I debug the template, each menu item shows data.media => 1 but media cannot be expanded any further. How can I get the image to render in my template?
TS:
ext_menu_image < lib.contentElement
ext_menu_image {
templateName = MenuImage
dataProcessing {
10 = TYPO3\CMS\Frontend\DataProcessing\MenuProcessor
10 {
special = directory
special.value.field = pages
levels = 1
as = menuItems
expandAll = 1
titleField = nav_title // title
}
}
}
Template:
<f:for each="{menuItems}" as="page">
{f:uri.image(image:page.data.media.???)}
</f:for>

Answer 1

By default the MenuProcessor just puts the data directly from the table into the array in Fluid. The media field in the pages table, just holds the number of relations. So you need another data processor so it is translated to a file. This should do it:
ext_menu_image < lib.contentElement
ext_menu_image {
templateName = MenuImage
dataProcessing {
10 = TYPO3\CMS\Frontend\DataProcessing\MenuProcessor
10 {
special = directory
special.value.field = pages
levels = 1
as = menuItems
expandAll = 1
titleField = nav_title // title
dataProcessing {
10 = TYPO3\CMS\Frontend\DataProcessing\FilesProcessor
10 {
references.fieldName = media
}
}
}
}
}