Teaser menu/menu with images

Using Neos & Flow Frontend & Integration
1

Hello!
I am sorry if this is covered somewhere already, but I can’t find it.
I would like to create a menu of same level pages (e.g. other pages at the same level as current page) with page title, page image (and possibly some teaser text).
Something like teaser list of articles.

What is a proper way to do it?

Many thanks to all!

– Iztok

2

Create a menu with a fusion collection and create a custom item renderer for each page which is the nodetype name prefixed with some string (here ‘Menu’):

prototype(Your.Package:SomeNodeType) {
    menu = Neos.Fusion:Collection {
        collection = ${q(documentNode).parent().children('[instanceof Neos.Neos:Document]')}
        itemName = 'node'
        itemRenderer = Neos.Fusion:ContentCase {
            default {
                type = ${q(node).property('_nodeType.name') + 'Menu'}
            }
        }
    }
}

# create a prototype for each nodetype you want to have in the menu
prototype(Your.Package:PageType1Menu) < prototype(Neos.Fusion:Template) {
    templatePath = 'resource://...'

    # The following values are just some examples and can be adjusted as needed.
    # Use them in your template as you need them ({image}, {teaser}, ...).
    # Note: 'node' is the current document node
    image = ${q(node).property('image')}
    teaser = ${q(node).children('teaser').property('text')}
    title = ${q(node).property('title')}
    # .. add further properties if needed.
}

prototype(Your.Package:PageType2Menu) < prototype(Neos.Fusion:Template) {
    templatePath = 'resource://...'

    # Use it the same way as above.
}

Hope this helps.