Augmenter does not work like expected in backend rendering

Using Neos & Flow Frontend & Integration
3

Hi Sebastian,

Thank you, this was very helpful.
I remembered this blog post (https://mind-the-seb.de/blog/preventing-deep-content-nesting-in-neos-cms ) and experimented a bit. I don’t like to set the caching by my own. But i like the clean content tree.

Im using atomic fusion and the next step should be adding css modules.
So i need a solution with a reusable component for manipulating the content collection without loosing the default contentElementWrapping.

Now my solution is a helper component with the Augmenter. It is theoretically reusable in my other components with similar collections. I think a separate component with the augmenter to add own attributes is useful for separation of concerns.

Im Using The Columns Node as ContentCollection and the fusion is the normal atomic fusion stuff. To putt the wrapper component with the augmenter between the content-collection and contentElementWrapping, i use @process and @position. And now it’s working like expected. :slight_smile: It’s a clean html markup in frontend and backend. :slight_smile:

"LeanWorks.Site:Content.Columns":
  superTypes:
    "Neos.Neos:Content": true
    "Neos.Neos:ContentCollection": true
  ui:
    icon: grip-lines
    label: "Columns"
  constraints:
    nodeTypes:
      "*": false
      "LeanWorks.Site:Content.Column": true
  properties: 
      # ...




prototype(LeanWorks.Site:Content.Columns) < prototype(Neos.Neos:ContentComponent) {

    content = Neos.Neos:ContentCollection {
        tagName = 'div'
    }

    # putt own wrapping between contetCollection and contentElementWrapping
    content.@process.wrapContent = LeanWorks.Site:Component.Molecule.Columns.Collection {
        orientation = ${q(node).property('orientation')}
        gapSize = ${q(node).property('gapSize')}
        content = ${value}
    }

    # do contentElementWrapping after my own wrapping
    content.@process.contentElementWrapping.@position = 99

    renderer = ${props.content}
}




prototype(LeanWorks.Site:Component.Molecule.Columns.Collection) < prototype(Neos.Fusion:Component) {

    orientation = 'horizontal'
    gapSize = 16

    renderer = afx`
        <Neos.Fusion:Augmenter
            class={
                'Columns' +
                (props.orientation ? ' Columns--'+props.orientation : null) +
                (props.gapSize ? ' Columns--gapSize-'+props.gapSize : null)
            }
            >
            {props.content}
        </Neos.Fusion:Augmenter>
    `
}

But i’m not shure where the Collection component should live. It’s an Atom, Molecule or like another namespace? :thinking:

I think about these namespaces:

  • Component.Moledule.Columns.Collection,
  • Component.Molecule.Collection.Columns,
  • Component.Collection.Column

My HTML now looks like that and it’s working in backend too without loosing the default wrapping. :slight_smile:

<div class="Columns Columns--horizontal neos-contentcollection">
    <div class="Column neos-contentcollection">...</div>
    <div class="Column neos-contentcollection">...</div>
    <div class="Column neos-contentcollection">...</div>
    <div class="Column neos-contentcollection">...</div>
</div>