Creating a NodeType that is Content and ContentCollection

Neos / Flow FAQ
1

Quite often collection Nodes are needed to group contents together. The usual way is to define a contentNode that has a childNode Collection of Type TYPO3.Neos:ContentCollection

For the editors that has the drawback that an unneeded hierarchy level is added to the structure and that they have to be aware to select the content to add content before,after or the child-collection to add content inside.

This solution here avoids that.

In NodeTypes.yaml

'Vendor.Site:Slider':
  superTypes:
    'TYPO3.Neos:Content': TRUE
    'TYPO3.Neos:ContentCollection': TRUE

In Fusion

prototype(Sitegeist.SitegeistDe:Slider) < prototype(TYPO3.TypoScript:Tag) {
  content = TYPO3.Neos:ContentCollection
  @process.contentElementWrapping >
}
5 Likes
2

Nice! One question though: Why does the content element wrapping need to be removed here? Where is the Slider “container” wrapped if it needs to be edited?

3

Until now this was what i had to do to get the editing experience I was after. I tried a bunch of combinations that i considered more or less equivalent until I found this.

I will try to boil it down a bit further the next days.

4

Exprimented a bit further … the one thing that is important is that neos needs a container around the contentCollection. If a collection is placed directly in another collection the backend behaves strange (infinite expanding).

This boils the solution down to:

prototype(Vendor.Site:Slider) < prototype(TYPO3.TypoScript:Tag) {
  content = TYPO3.Neos:ContentCollection
  @process.contentElementWrapping >
}

I will adjust the example above accordingly

5

Do you know why? It seems to be a problem with a javascript.
I would need a solution without an extra wrapping div. Tag and the ContentCollection inside it results in two wrapping divs. This breaks some of my css (besides that it renders unnecessary output).
Using Value works in the frontend, but the backend freaks out because of the missing wrapping div as you wrote.

Edit:
A possible solution could be:

prototype(Vendor.Site:Slider) < prototype(TYPO3.TypoScript:Value) {
  value = TYPO3.Neos:ContentCollection
  // Prevent breaking the backend
  @process.wrapValueInTag {
    expression = TYPO3.TypoScript:Tag {
      content = ${value}
    }
    @if.wrapOnlyInBackend = ${node.context.inBackend}
  }
}

This prevents breaking the backend completely but it doesn’t help with the breaking of my css (which I can’t adjust easily because it’s a framework). But I think it is helpful for others.
Maybe you know a better solution which won’t break the css.

6

True … this seems to be a js-problem that occurs only if a collection is rendered directly into another one. I found no solution for this yet. I would appreciate if someone could fix the current behavior, i do’nt know the ember code well enough to fix this.