Instant Articles und Google AMP mit Neos

Der prototypenbasierte, objektorientierte Ansatz von Neos Fusion (ehemals TypoScript 2) eignet sich perfekt für Multi-Channel Publishing.

von

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.