Scrivito Teaser Referenzen

Lesen Sie hier, wie mit dem React CMS Scrivito, Teaser Referenzen eingesetzt werden.

Zu den wichtigsten Elementen auf Websites gehören Teaser. Jeder kennt Sie z.B. von Blog-Übersichtsseiten oder einem News-Bereich einer Website. Sie dienen dazu Inhalte anzuteasern und einen Link zu einem Artikel oder Blogbeitrag anzubieten. Teaser sind quasi eine aussagekräftige Art von Links.

In den meisten Fällen werden Teaserlisten von einem CMS, automatisiert, generiert. Solche Listen bietet auch Scrivito. Teaserlisten gibt es für das Blog, für Events, Jobs, Testimonials und Autoren. Entwickler können einfach neue Teaserlisten entwickeln. Dazu werden neue Inhaltstypen benötigt und Filter, die die Inhalte nach bestimmten Kriterien, z.B. Tags, durchsuchen und dann als Liste rendern.

Häufig benötigen Autoren, aber auch eine Möglichkeit Teaser manuell zu erfassen. Dadurch ist es möglich auf interessante oder sehr wichtige Artikel gezielt hinzuweisen. Unten sehen Sie ein Beispiel mit drei manuell angelegten Teasern. Der Inhalt eines Teasers wird dynamisch aus der referenzierten Seite geholt. Beim erstellen des Teasers wird, mit dem Scrivito Content Browser, einfach die gewünschte Seite ausgewält. Das Ergebnis ist sofort im Teaser-Widget zu sehen. Ohne Speichern und umständlichem Umschaten zwischen Back- und Frontend.

Ein neues Scrivito Widget: Page Reference

Ein Widget, welches es ermöglicht Verweise auf andere Inhalte, als Teaser anzulegen, bietet Scrivito zunächst nicht. Also habe ich so ein Widget entwickelt. Zur Erfassung wird lediglich ein Referenz-Feld benötigt. Ein Klick auf so ein Feld öffnet den Scrivito Content Browser. Dort kann ein Autor sehr einfach Inhalt auswählen, zu dem ein Teaser generiert werden soll. Der Code dazu ist sehr einfach.

import * as Scrivito from 'scrivito';

const TeaserReferenceWidget = Scrivito.provideWidgetClass('TeaserReferenceWidget', {
    attributes: {
        page: 'reference',
    },
});

export default TeaserReferenceWidget;

Auch der Code, der letztendlich einen Teaser rendert, ist überschaubar. Hier ein komplettes Beispiel.

import * as React from 'react';
import * as Scrivito from 'scrivito';
import InPlaceEditingPlaceholder from '../../Components/InPlaceEditingPlaceholder';

Scrivito.provideComponent('TeaserReferenceWidget', ({ widget }) => {
  const teaser = widget.get('page');
  
  if (!teaser) {
    return (
      
        <InPlaceEditingPlaceholder>
          Provide a reference to a page in the widget properties.
        </InPlaceEditingPlaceholder>
      
    );
  }

  return (
    <div className="text-center">
    <Scrivito.LinkTag to={ teaser } >
    <Scrivito.ImageTag content={ teaser } attribute="titleImage" width="320" className="img-top"/>
        <div>  
        <Scrivito.ContentTag tag="h3"  content={ teaser } attribute="title" />
          <Scrivito.ContentTag tag="h4"  content={ teaser } attribute="subtitle" />
    </div>
    </Scrivito.LinkTag>
    </div>
  );
});

Schwer getan habe ich mich damit, herauszufinden wie der Link zu der referenzierten Seite, in React und mit der Scrivito API programmiert wird. Letztlich stellte sich auch das als sehr einfach heraus. Hier der Code dazu.

<Scrivito.LinkTag to={ teaser } />

Mir war zwar die Scrivito Komponente LinkTag bekannt, aber nicht, dass ich der einfach das referenzierte Objekt übergeben kann. Damit steht mir jetzt ein Widget zur Verfügung, mit dem ich Teaser mit einem Klick erzeugen kann und welches ich innerhalb vieler meiner anderen Widgets einsetzen kann.

Kommentare

Melde dich bitte an, wenn du einen Kommentar schreiben möchtest.
Meinolf Droste schrieb am 11.11.2018

Kommentar vom Android

Fazit

Sind Sie an individuellen Widgets für Ihr Scrivito-Projekt interessiert?

Dann können Sie mich gerne kontaktieren: per Mail an m.droste@mdwp.de oder telefonisch unter +49 2331 62 85 27 3