Example Node

sync#

# Card Wrapper

#

'Arsors.Neos:CardWrapper':

  superTypes:

    'Neos.Neos:Content': true

  childNodes:

    cards:

      type: 'Neos.Neos:ContentCollection'

      constraints:

        nodeTypes:

          '*': false

          'Arsors.Neos:Card': true

  ui:

    label: 'Card Wrapper'

    icon: 'icon-th-large'

    help:

      message: 'Lorem ipsum dolor amet sit bobo.'



#

# Card

#

'Arsors.Neos:Card':

  superTypes:

    'Neos.Neos:Content': true

  ui:

    label: 'Single Card'

    icon: 'icon-square'

    inspector:

      groups:

        cards:

          label: 'Card Settings'

          icon: 'icon-cogs'

  properties:

    cardTitle:

      type: string

      defaultValue: 'Card title'

      ui:

        label: 'Card title'

        reloadIfChanged: true

        inlineEditable: true

    cardText:

      type: string

      defaultValue: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.'

      ui:

        label: 'Card text'

        reloadIfChanged: true

        inlineEditable: true

    cardButtonText:

      type: string

      defaultValue: 'Go somewhere'

      ui:

        label: 'Card button text'

        reloadIfChanged: true

        inlineEditable: true

    cardButtonUrl:

      type: string

      ui:

        label: 'Button Url'

        reloadIfChanged: true

        inlineEditable: true

        inspector:

          editor: 'Neos.Neos/Inspector/Editors/LinkEditor'

          group: 'cards'

    cardImg:

      type: Neos\Media\Domain\Model\ImageInterface

      ui:

        label: 'Card Thumbnail'

        reloadIfChanged: true

        inspector:

          group: 'cards'

          editorOptions:

            accept: 'image/png'

            features:

              crop: true

            crop:

              aspectRatio:

                forceCrop: true

                locked:

                  width: 286

                  height: 180

syncprototype(Arsors.Neos:CardWrapper) < prototype(Neos.Neos:ContentComponent) {



  cards = Neos.Neos:ContentCollection {

    nodePath = 'cards'

    tagName = 'div'

    attributes.class = 'row'

  }



  renderer = afx`

    {props.cards}

  `



}



prototype(Arsors.Neos:Card) < prototype(Neos.Neos:ContentComponent) {



  renderer = afx`

    <div class="col-12 col-md-6 col-lg-4 pt-3 pb-3">

      <div class="card">

        <Neos.Neos:ImageTag @if.hasAsset={props.cardImg} asset={props.cardImg} attributes.alt={props.cardImg.title} attributes.title={props.cardImg.title} />

        <img @if.hasNoAsset={!props.cardImg} class="card-img-top" src="https://via.placeholder.com/286x180" alt="Card image cap" />



        <div class="card-body">

          <h5 class="card-title"><Neos.Neos:Editable property="cardTitle" /></h5>

          <p class="card-text"><Neos.Neos:Editable property="cardText" /></p>

          <a @if.inFrontend={!node.context.inBackend} href={props.cardButtonUrl} class="btn btn-primary">{props.cardButtonText}</a>

          <span @if.inBackend={node.context.inBackend} class="btn btn-primary"><Neos.Neos:Editable property="cardButtonText" /></span>

        </div>

      </div>

    </div>

  `



}