Facebook Instant Articles, Google AMP und weitere Newsreader-Formate basieren alle auf HTML. Da jedoch formatspezifische Eigenheiten in der Auszeichnung wie z.B. bestimmte Klassennamen oder unterschiedliches Markup nötig sind, müssen diese Newsreader-Formate gezielt bespielt werden.
Neben der Möglichkeit einer Content Transformation, bei Instant Articles beispielsweise mit dem Facebook SDK (welches einen Parser und Transformer mitliefert), ist eine gängige Möglichkeit, unterschiedliche Templates für Seiten und Inhaltselemente auszuliefern. Damit können dann auch alle Vorteile der jeweiligen Plattformen wie interaktive Elemente vollumfänglich genutzt werden.
Wie das mit Neos CMS funktioniert, zeigen wir in diesem Blogartikel anhand eines Inhaltselements für ein einfaches Bild. Die folgenden Templates haben wir hier absichtlich vereinfacht, um das Wesentliche klarer in den Vordergrund zu stellen.
NodeType-Template für das normale Website-Frontend
Resources/Private/Templates/NodeTypes/Image.html
{namespace neos=Neos\Neos\ViewHelpers}
{namespace media=Neos\Media\ViewHelpers}
<div{attributes -> f:format.raw()}>
<figure>
<media:image image="{image}" class="img-responsive"
alt="{alternativeText}" title="{title}"
width="{width}" height="{height}"
allowUpScaling="true" allowCropping="true" />
<f:if condition="{caption}">
<figcaption>
{neos:contentElement.editable(property: 'caption', node: node)}
</figcaption>
</f:if>
</figure>
</div>NodeType-Template für Facebook Instant Articles
Resources/Private/Templates/NodeTypes/FacebookInstantArticles/Image.html
{namespace neos=Neos\Neos\ViewHelpers}
{namespace media=Neos\Media\ViewHelpers}
<figure data-feedback="fb:likes,fb:comments">
<media:image image="{image}"
width="{width}" height="{height}"
allowUpScaling="true" allowCropping="true" />
<f:if condition="{caption}">
<figcaption class="op-vertical-bottom">
<h1 class="op-vertical-bottom">{caption}</h1>
</figcaption>
</f:if>
</figure>
Fusion für Multi-Channel Rendering
In Fusion muss nun für jeden Channel bzw. jedes Newsreader-Format das jeweilige Template ausgegeben werden – dank dem prototypenbasierten, objektorientierten Ansatz ein Kinderspiel:
Resources/Private/Fusion/NodeTypes/Image.fusion
prototype(Medienreaktor.NodeTypes:Image) {
templatePath = 'resource://Medienreaktor.NodeTypes/Private/Templates/NodeTypes/Image.html'
width = 1200
height = 800
image = ${q(node).property('image')}
title = ${q(node).property('title') ? q(node).property('title') : q(node).property('image').title}
caption = ${String.trim(String.stripTags(q(node).property('caption'))) ? q(node).property('caption') : q(node).property('image').caption}
}
Resources/Private/Fusion/Root.fusion
include: NodeTypes/*
prototype(Medienreaktor.Site:Page) < prototype(Neos.Neos:Page) {
# Standard-Seitendefinition
}
prototype(Medienreaktor.Site:InstantArticlePage) < prototype(Medienreaktor.Site:Page) {
# Änderung der Prototypen-Definition der NodeTypes
prototype(Medienreaktor.NodeTypes:Image) {
templatePath = 'resource://Medienreaktor.NodeTypes/Private/Templates/NodeTypes/FacebookInstantArticles/Image.html'
}
}
Dieses Beispiel zeigt, wie einfach eine Ausgabe von Facebook Instant Articles oder Google AMP Pages mit Neos ist. In unterschiedlichen Seitenkonfigurationen können dank der Vererbung in Fusion channelspezifisch einzelne Merkmale unterschiedlich parameterisiert werden.
Manchmal ist es gar nicht nötig, das komplette Template zu ändern – der Austausch einer oder weniger Klassennamen über Fusion kann bereits genügen.