Nesting nodes problems

Using Neos & Flow
1

Hi everyone, I’m super Noob in Neos and I’m dealing with some problems while I try to nest nodes. My goal is to achieve a section with some elements inside and a title. By now I could deal with everything following the documentation and posts, but now I can’t see anything when my nodes are inside this ContentCollection, but when I move out, everything works fine.
Here are the files

NodeTypes.Section.yaml

'My.Package:CardsSection':
superTypes:
    'Neos.Neos:Content': TRUE

childNodes:
    sectioncontent:
        type: 'Neos.Neos:ContentCollection'
        constraints:
            nodeTypes:
                '*': FALSE
                'My.Package:Cards': TRUE
                
ui:
    label: 'Items container section'
    group: general
    icon: 'icon-cubes'
    inspector:
        groups:
            main:
                label: 'Properties'
                icon: 'icon-cubes'
                position: 1

properties:
    headline:
        type: string
        defaultValue: ''
        ui:
            label: 'Headline'
            inlineEditable: FALSE
            reloadIfChanged: TRUE
            inspector:
                group: 'main'

    color:
        type: string
        validation:
            'Neos.Neos/Validation/RegularExpressionValidator':
                regularExpression: '/(^#([a-fA-F0-9]{3}){1,2}$)|(^rgba?\(\d{1,3}%?,\d{1,3}%?,\d{1,3}%?(,\d{1,3}%?)?\)$)/i'
        ui:
            label: 'Flat background color'
            inlineEditable: FALSE
            reloadIfChanged: TRUE
            inspector:
                group: 'main'

Section.fusion

prototype(My.Package:CardsSection) {
templatePath = 'resource://My.Package/Private/Templates/NodeTypes/CardsSection.html'
headline = ${q(node).property('headline')}
color = ${q(node).property('color')}

sectioncontent = Neos.Neos:ContentCollection {
    nodePath = 'sectioncontent'
}
}

Section.html

{namespace neos=Neos\Neos\ViewHelpers}
{namespace fusion=Neos\Fusion\ViewHelpers}

<section class="employee-survey-real-time-section" style="background: {color}">
<div class="main-container">
{neos:contentElement.editable(property: 'headline', tag: 'h2')}

{sectioncontent -> f:format.raw()}

</div>
</section>

NodeTypes.Card.yaml

'My.Package:Cards':
    superTypes:
        'Neos.Neos:Content': TRUE
    ui:
        label: 'Card'
        group: 'general'
        icon: 'icon-cube'
        inspector:
            groups:
                main:
                    label: 'Properties'
                    icon: 'icon-cube'
                    position: 1
    properties:
        image:
            type: Neos\Media\Domain\Model\ImageInterface
            ui:
                label: 'Image'
                inlineEditable: FALSE
                reloadIfChanged: TRUE
                inspector:
                    group: 'main'
        headline:
            type: string
            defaultValue: ''
            ui:
                label: 'Headline'
                inlineEditable: FALSE
                reloadIfChanged: TRUE
                inspector:
                    group: 'main'
        paragraph:
            type: string
            defaultValue: ''
            ui:
                label: 'Paragraph'
                inlineEditable: FALSE
                reloadIfChanged: TRUE
                inspector:
                    group: 'main'

Card.fusion

prototype(My.Package:Cards) < prototype(Neos.Neos:Content) {
    templatePath = 'resource://My.Package/Private/Templates/Cards.html'

    headline = ${q(node).property('headline')}
    paragraph = ${q(node).property('paragraph')}
    image = ${q(node).property('image')}
}

Card.html

{namespace neos=Neos\Neos\ViewHelpers}
{namespace media=Neos\Media\ViewHelpers}

<!-- Card -->
<div class="card-icon-text card-anim">
    <div class="card-icon">
        <f:if condition="{image}">
            <media:image image="{image}" alt="{headline}" />
        </f:if>
    </div>
    <div class="card-title">
        {neos:contentElement.editable(property: 'headline', tag: 'h4')}
    </div>
    <div class="card-text">
        {neos:contentElement.editable(property: 'paragraph', tag: 'p')}
    </div>
</div>
2

Some of the posts I’ve checked:

https://discuss.neos.io/t/nested-nodetype-example/1021
https://discuss.neos.io/t/solved-nesting-content-containers/3284/2
https://discuss.neos.io/t/wrap-items-in-a-collection-with-custom-markup/3060
https://discuss.neos.io/t/solved-cant-edit-child-node-elements/2504/3
https://discuss.neos.io/t/problem-to-use-output-a-content-collection-as-a-child-node/797
https://discuss.neos.io/t/solved-rendering-contentcollection-items-for-nodetype/2638
https://discuss.neos.io/t/solved-cant-edit-child-node-elements/2504
https://www.youtube.com/watch?v=Q44mpQX8eWU&t=512s

None of them worked (probably I was doing sth wrong).
Thanks in advance and I hope someone can give me a hint.

3

You are talking about Section.html in your post but the templatePath ends with CardsSection.html are those the same files?

Apart from that inconsistency it looks fine to me and should work.

You could generally make this element simpler (as it has only a single section) and declare the element itself to be a content collection. So you would have a NodeType like this:

'My.Package:CardsSection':
  superTypes:
    'Neos.Neos:Content': true
    'Neos.Neos:ContentCollection': true

  ui:
    label: 'Items container section'
    group: general
    icon: 'icon-cubes'
    inspector:
        groups:
            main:
                label: 'Properties'
                icon: 'icon-cubes'
                position: 1

  properties:
    headline:
        type: string
        defaultValue: ''
        ui:
            label: 'Headline'
            inlineEditable: FALSE
            reloadIfChanged: TRUE
            inspector:
                group: 'main'

    color:
        type: string
        validation:
            'Neos.Neos/Validation/RegularExpressionValidator':
                regularExpression: '/(^#([a-fA-F0-9]{3}){1,2}$)|(^rgba?\(\d{1,3}%?,\d{1,3}%?,\d{1,3}%?(,\d{1,3}%?)?\)$)/i'
        ui:
            label: 'Flat background color'
            inlineEditable: FALSE
            reloadIfChanged: TRUE
            inspector:
                group: 'main'

And then fusion like this:

prototype(My.Package:CardsSection) {
    templatePath = 'resource://My.Package/Private/Templates/NodeTypes/CardsSection.html'

    sectioncontent = Neos.Neos:ContentCollection {
        nodePath = '.'
    }
}
4

Yes, Section.html is, in fact, CardsSection.html. As I’m newbie, I’m making test to check it before goes to the final project.

Could you give me further information about my inconsistencies? They’ll be handy to keep in mind when I’m going to develop the final project.

According to the code you gave me, it doesn’t work at all. Something’s going on with my local environment that the UI doesn’t render nodes inside ContentCollection nodes. (I can manage the properties of the nodes inside the ContentCollection Node, but I can’t see it on the UI).

I’ll install the environment again in case something went wrong with the previous installation, and check this from there.

@bernhard gave me this post you made via Slack Neos channel, so I’ll check it also