Render childNode thats not a content collection

Hey Guys,
I have a Website, were I want to have a Picture in every document.

The picture should be in the header area.

I thought it would be o good idea to create a childNode for the document but I have no idea how to render it. If i am right the fusion file of the headerImg is not the right spot in this case.

I have the Page like that:

  abstract: true
    'Neos.Neos:Document': true
      type: 'WG.Site:Content.ImageHeader'
      type: 'Neos.Neos:ContentCollection'
          'WG.Site:Constraint.Content.Restricted': false
      'WG.Site:Document.HomePage': false
      'WG.Site:Constraint.Document.Restricted': false

And I can add the Img in the backend, but its not rendert in the document itself.

This is the imgHeader

    'Neos.Neos:Content': true
    'WG.Site:Mixin.Image': true
    label: Header-Bild
    icon: icon-picture
    position: 300

and this is the fusion of the ImageHeader

 * This code is feasable for production, and renders an image with LazyBones.
 * To better learn Neos take a look at WG.Site:Content.BasicImage,
 * which renders our images as an img tag.
prototype(WG.Site:Content.ImageHeader) < prototype(Neos.Neos:ContentComponent) {

    # if the current node has previous siblings it is not the
	# first content and should be loaded lazy otherwise not
	lazy = ${q(node).prev().is()}

    src = Neos.Fusion:Case {
        image {
            condition = ${q(node).property('image') ? true : false}
            renderer = Sitegeist.Kaleidoscope:AssetImageSource {
                asset = ${q(node).property('image')}
        dummyImage {
            condition = ${site.context.inBackend}
            renderer = Sitegeist.Kaleidoscope:DummyImageSource
    alternativeText = ${q(node).property('alternativeText')}

    renderer = afx`
            class="container-image header-image"
            srcset="320w, 400w, 480w, 600w, 640w, 720w, 768w, 800w, 960w, 1024px, 1280w, 1440w, 1600w, 1680w, 1920w, 2560w"

In best case I would like to render it in the Header.fusion

   prototype(WG.Site:Component.Header) < prototype(Neos.Fusion:Component) {
    homeLink = Neos.Neos:NodeUri {
        node = ${site}
    menuItems = Neos.Neos:MenuItems {
        startingPoint = ${site}
        maximumLevels = 3

    includeLogo = Neos.Fusion:Tag {
      tagName = 'img'
      attributes {
        src = Neos.Fusion:ResourceUri {
          path = 'resource://WG.Site/Public/Frontend/images/logo.png'

    renderer = afx`
    <div clasS="header-bg">
        <header class="main-header grid-container">
          <WG.Site:Component.Header.MenuItemsRenderer items={props.menuItems} />
          <a class="logo page-logo" href={props.homeLink}>

	@cache {
		mode = 'cached'
		entryIdentifier {
			documentNode = ${documentNode}
		entryTags {
			1 = ${Neos.Caching.nodeTypeTag('Neos.Neos:Document', documentNode)}

The answer to: how to render a childNode thats not a content collection:

usually you would have a content collection as childNode and then its easy to render:

myContent = Neos.Neos:ContentCollection {
    nodePath = "main" # usually its main but you could set it in yaml to: wfehugiouhewpfgh

but you want to use a node directly wich is in the nodePath ‘headerimg’.
This will render one specified childNode:
(we manipulate the node context: put in there the node from the path ‘headerimg’.
And let ContentCase render the prototype, which is the name as in the yaml in ‘childNodes type’ specified. (‘WG.Site:Content.ImageHeader’) )

myContent = Neos.Neos:ContentCase {
    # nodePath = "headerimg"
    @context.node = ${q(node).children("headerimg").get(0)}

The answer to: what you actually want:

use the inspector on the document to set the image like a ‘wordpress post image’:

the Neos.Demo does it like this for chapters:

How they implemented it:



About using it in your header - that should work if the node in your context is the current document. If that doesnt work at first i would recommend making the image work first in the normal document fusion like the neos.demo.

1 Like

Thank you for your time! This is exactly what I needed!