Creating a simple Content Element
If you need some specific content element, you can easly create a new Node Type with an attached HTML template. To add a new Node Type, follow this example, just replace “Vendor” by your own vendor prefix:
Yaml (Sites/Vendor.Site/Configuration/NodeTypes.yaml):
'Vendor:YourContentElementName':
superTypes:
'Neos.Neos:Content': TRUE
ui:
label: 'My first custom content element'
group: 'general'
inspector:
groups:
image:
label: 'Image'
icon: 'icon-image'
position: 1
properties:
headline:
type: string
defaultValue: 'Replace by your headline value ...'
ui:
label: 'Headline'
inlineEditable: TRUE
subheadline:
type: string
defaultValue: 'Replace by your subheadline value ...'
ui:
label: 'Subheadline'
inlineEditable: TRUE
text:
type: string
ui:
label: 'Text'
reloadIfChanged: TRUE
image:
type: Neos\Media\Domain\Model\ImageInterface
ui:
label: 'Image'
reloadIfChanged: TRUE
inspector:
group: 'image'
Based on your Node Type configuration, now you need a Fusion object to be able to use your new Node Type. This Fusion object needs to have the same name as the Node Type:
Fusion (Sites/Vendor.Site/Resources/Private/Fusion/Root.fusion):
prototype(Vendor:YourContentElementName) < prototype(Neos.Neos:Content) {
templatePath = 'resource://Vendor.Site/Private/Templates/FusionObjects/YourContentElementName.html'
headline = ${q(node).property('headline')}
subheadline = ${q(node).property('subheadline')}
text = ${q(node).property('text')}
image = ${q(node).property('image')}
}
Last thing, add the required Fluid template:
HTML (Vendor.Site/Private/Templates/FusionObjects/YourContentElementName.html):
{namespace neos=Neos\Neos\ViewHelpers}
{namespace media=Neos\Media\ViewHelpers}
<article>
<header>
{neos:contentElement.editable(property: 'headline', tag: 'h2')}
{neos:contentElement.editable(property: 'subheadline', tag: 'h3')}
</header>
<div>
{neos:contentElement.editable(property: 'text')}
<f:if condition="{image}"><media:image image="{image}" maximumWidth="300" alt="{headline}" /></f:if>
</div>
</article>
Now, if you try to add a new Node in your page, you should see your new Node Type. Enjoy editing with Neos.