Render childNode thats not a content collection

Using Neos & Flow Frontend & Integration
1

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:

   'WG.Site:Document.AbstractPage':
  abstract: true
  superTypes:
    'Neos.Neos:Document': true
  childNodes:
    headerimg:
      type: 'WG.Site:Content.ImageHeader'
    main:
      type: 'Neos.Neos:ContentCollection'
      constraints:
        nodeTypes:
          'WG.Site:Constraint.Content.Restricted': false
  constraints:
    nodeTypes:
      '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

'WG.Site:Content.ImageHeader':
  superTypes:
    'Neos.Neos:Content': true
    'WG.Site:Mixin.Image': true
  ui:
    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`
        <Sitegeist.Lazybones:Image
            class="container-image header-image"
            lazy={true}
            lazyWidth={200}
            imageSource={props.src}
            srcset="320w, 400w, 480w, 600w, 640w, 720w, 768w, 800w, 960w, 1024px, 1280w, 1440w, 1600w, 1680w, 1920w, 2560w"
            sizes={props.sizes}
            alt={props.alternativeText}
            />
	`
}

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}>
            {props.includeLogo}
          </a>
        </header>
    </div>
    `

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

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:

image
image1742×1050 524 KB

How they implemented it:

NodeType:
Neos.Demo/NodeTypes.Document.Chapter.yaml

Fusion:
Neos.Demo/Chapter.fusion

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.

2 Likes
3

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