[SOLVED] How to extend Neos.NodeTypes:TEXT with custom html?

Using Neos & Flow
#1

Hi,
I can’t figure how to extend the Neos.NodeTypes:TEXT node in a way to put a static image (for example) on top of the text.
My problem is about the HTML template. I want inline edition for my editors.

Here’s my minimalist HTML template

<div class="uk-block">
        <h3 class="film"><i class="uk-icon-video-camera uk-icon-medium uk-align-left"></i>À propos du réalisateur</h3>
        <div class="contenu">{neos:contentElement.editable(property: 'text')}</div>
</div>

And my fusion file is like this

prototype(Company.Project:BlocRealisateur) < prototype(Neos.NodeTypes:Text) {
        text = ${q(node).property('text')}
        itemRenderer = Neos.NodeTypes:Text        
}

Thanks in advance for your help,
regards
xavier

#2

Bonjour Xavier,
welcome to the Neos community! You need three parts for this to work:

  1. A nodetype definition (NodeTypes.yaml) for that node type, which you probably already have somewhere. Could you post that so we can see what you created there?
  2. A template - yours looks good. It should be located in your site package under Company.Project/Resources/Private/Templates/NodeTypes/BlocRealisateur.html - this is where Neos looks for it by default.
  3. A Fusion prototype. For your use case (just changing the HTML output), it is not even necessary to create any Fusion, as Neos will, by default, generate exactly what you need in the background. So just post your NodeType here and lets look at that :slight_smile:
#3

Hi Bastian,
Thank you very much for your response,
my NodeType is so simple that I didn’t post the code :smile:

'Company.Project:BlocRealisateur': 
  superTypes:
    'Neos.NodeTypes:Text': TRUE
  ui:
    label: 'Infos sur le réalisateur'
    group: 'general'
    inspector:
      groups:
        'actu':
          label: i18n
          position: 50

As I said, my problem is to get the content of the Node, as it’s not a property of my node.

#4

I finally did succeed this night to solve my problem.
This is what I did for people facing the same problem.

NodeType

'Company.Project:InfosRealisateur': 
  superTypes:
    'Neos.Neos:Content': TRUE
  ui:
    label: 'infos réalisateur'
    group: 'general'
  childNodes:
    texte:
      type: 'Neos.NodeTypes:Text'

BlocRealisateur.fusion

prototype(Company.Problem:InfosRealisateur) {
	textRenderer = Neos.NodeTypes:Text
	texte = ${q(node).children('texte').get(0)}
}

BlocRealisateur.html

{namespace fusion=Neos\Fusion\ViewHelpers}
<h3 class="film"><i class="uk-icon-video-camera uk-icon-medium uk-align-left"></i>À propos du réalisateur</h3>
<div class="contenu"><fusion:render path="textRenderer" context="{node:texte}" /></div>

I found this solution in the documentation :slight_smile:
Creating a site with neos > Rendering Custom Markup > Creating Custom Content Elements

Thanks again for your response Bastian
Cheers

#5

Oh, I see! That works, but it can be made simpler still. You can reduce your nodetype to:

'Company.Project:InfosRealisateur': 
  superTypes:
    'Neos.NodeTypes:Text': TRUE
  ui:
    label: 'infos réalisateur'
    group: 'general'

your fusion to (technically, you can delete the Fusion entirely as this is exactly what Neos generates by default):

prototype(Company.Project:InfosRealisateur) < prototype{Neos.NodeTypes:Text) {
	text = ${q(node).property('text')}
}

and your template simply becomes:

{namespace neos=Neos\Neos\ViewHelpers}
<h3 class="film">
    <i class="uk-icon-video-camera uk-icon-medium uk-align-left"></i>À propos du réalisateur
</h3>
<div class="contenu">
    <neos:contentElement.editable property="text" />
</div>

This way, you inherit directly from Text instead of adding it as a child node, which makes your node tree simpler.

#6

Hello Bastian,
again thank you for this,
your comment is very usefull,
I want to try this smart way (without childNodes) :slight_smile:

Best regards,
xavier