Zum Inhalt springen

Listenansicht & Detailseite

Die Erweiterung enthält zwei zusätzliche Inhaltselemente, die ein Browsing-Erlebnis im Mediathek-Stil auf der Grundlage der bestehenden VidPly-Medienbibliothek ermöglichen:

VidPly TYPO3 Extension Logo
  • VidPly-Listenansicht (mpc_vidply_listview) – rendert ein oder mehrere benannte „Regale“ (Raster oder horizontaler Scroller) mit Medienkarten.
  • VidPly-Detail (mpc_vidply_detail) – rendert den VidPly-Player sowie Metadaten für einen einzelnen Mediendatensatz, der anhand des URL-Slugs ermittelt wird.
Editor picks media/categories
      │
      ▼
 mpc_vidply_listview (Content Element)
   ├── row 1  (headline, layout, selection)
   ├── row 2
   └── row n
      │           each card: <a href="/mediathek/{slug}">
      ▼
 mpc_vidply_detail (Content Element, on routed page)
      │
      ▼
 Reuses VidPlyProcessor + VidPly.html player
 

1. Anleitung für Redakteure

1.1 Detailseite vorbereiten

  1. Erstellen Sie eine Standardseite (z. B. Mediathek Detail) an einer beliebigen Stelle im Seitenbaum.
  2. Fügen Sie ein einzelnes VidPly-Detail-Inhaltselement auf dieser Seite ein. Das Element hat keine Backend-Konfiguration – es ermittelt den angeforderten Mediendatensatz erst zur Laufzeit anhand der URL.
  3. Merken Sie sich die Seiten-UID; Sie werden in jedem Listview-Element darauf verweisen, damit die Kartenlinks wissen, wohin sie verweisen sollen.

1.2 Erstellen der Übersichtsseite

  1. Fügen Sie auf Ihrer Landingpage (z. B. /mediathek ) ein VidPly-Listview -Inhaltselement ein.
  2. Wählen Sie unter „Detail Page“ die in 1.1 erstellte Seite aus.
  3. Fügen Sie unter „Listview-Zeilen“ eine Zeile pro Regal hinzu und konfigurieren Sie diese:
    • Zeilenüberschrift – wird über der Zeile angezeigt.
    • Link „Alle anzeigen“ (optional) – wird neben der Überschrift angezeigt.
    • Layout – Horizontales Regal oder responsives Raster.
    • Kartenstil – Poster (16:9), Kompakt (3:4) oder Querformat.
    • Max. Elemente – Obergrenze der für die Zeile geladenen Elemente.
    • Clientseitige Paginierung (optional, nur Rasterlayout) – das horizontale Regal verwendet immer Inline-Scrolling, keine paginierten „Seiten“. Nur für das responsive Raster können Sie die Paginierung aktivieren und die Anzahl der Elemente pro Seite festlegen (Standard 12); wenn mehr Elemente vorhanden sind als diese Anzahl, erscheint ein Pager. Deaktivieren Sie die Paginierung, um immer den vollständigen Satz (bis zur Anzahl der maximalen Elemente) anzuzeigen. Jede Zeile ist unabhängig, auch wenn ein Inhaltselement mehrere Listview-Zeilen umfasst.
    • Sortierreihenfolge (Backend-Standard beim Laden von Elementen) – manuelle/MM-Reihenfolge, neueste zuerst oder Titel A–Z. Das Frontend kann ein Sortiersteuerelement anbieten, damit Besucher die Reihenfolge im Browser ohne Neuladen ändern können.
    • Auswahlmodus – Manuell (Datensätze manuell auswählen) oder Automatisch (nach Kategorie). Das entsprechende Auswahlfeld erscheint unten.

Karten zeigen Titel, optional eine Künstlerzeile und Kategorie-Chips (aus den eigenen Kategorien des Mediendatensatzes), sofern verfügbar.

1.3 Slugs

Jeder Datensatz in tx_mpcvidply_media erhält automatisch einen URL-freundlichen Slug, der aus seinem Titel generiert wird. Redakteure können den Slug auf der Registerkarte „Metadaten“ überschreiben. Slugs werden pro Website auf Eindeutigkeit geprüft, um Routing-Unklarheiten zu vermeiden.

Datensätze ohne Slug bleiben erreichbar: Die Listenansicht greift automatisch auf ?media=<uid>&cHash=… automatisch zurück, sodass Redakteure einen Datensatz zuerst veröffentlichen und später eine schönere URL hinzufügen können, ohne bestehende Links zu unterbrechen.

1.4 Übersetzte (verbundene) Listview-Zeilen

Bei mehrsprachigen Websites folgen die Definitionen der Listview-Regale dem Inhaltselement „default-language“ (Inline tx_mpcvidply_listview_row Datensätze hängen an der Quell- tt_content uid), sodass eine Übersetzung nicht mit leeren Platzhalterzeilen „überlagert“ wird. Konfigurieren Sie die Regale einmalig in der Standardsprache; übersetzte Seiten verwenden dieselben Zeilen, sofern Sie keine separaten Zeilendaten pflegen. Weitere Informationen finden Sie in der ListviewProcessor und TCA der Erweiterung.

1.5 Medien: Kurz- und Langtext auf der Detailseite

In jedem VidPly-Mediendatensatz können Redakteure Folgendes verwenden:

  • Beschreibung – kurzer Text.
  • Lange Beschreibung – Rich Text (CKEditor) für die Detailseite; wird unterhalb der Kurzbeschreibung mit normaler HTML-Formatierung angezeigt.

1.6 Titel der Detailseite und Breadcrumb

In einer gültigen Detailansicht ersetzt die Erweiterung automatisch:

  • den Titel des aktuellen Breadcrumb-Elements durch den Titel des Mediums, sodass der Breadcrumb lautet: Startseite › Mediathek › Meine großartige Folge;
  • setzt das HTML-Tag <title> -Tag über einen speziellen PageTitleProvider (Priorität: vor den SEO- und Datensatzanbietern).

Beide Überschreibungen greifen nur, wenn die aktuelle Seite ein VidPly Detail CE enthält und die URL einen auflösbaren media Parameter enthält. Auf normalen Seiten bleibt das Standardverhalten unverändert.

Wenn Sie die Detailseite auf „Im Menü ausblenden“ setzen (damit sie nicht in der Hauptnavigation erscheint), aktivieren Sie den TypoScript-Zusatz des Site-Sets page.10.dataProcessing.70.includeNotInMenu = 1 — sie ist im Lieferumfang enthalten mpc-vidply damit die Breadcrumb-Stammzeile weiterhin die ausgeblendete Seite und ihre übergeordneten Seiten auflistet (z. B. Startseite › Mediathek › …). Ohne diese Funktion lässt TYPO3s Standard- HMENU nav_hide Seiten aus dem Breadcrumb aus, und der Pfad kann falsch aussehen.

2. Administratorhandbuch

2.1 Automatischer Routen-Enhancer (TYPO3 14.1+)

Die Erweiterung enthält ein Site-Set (Configuration/Sets/mpc-vidply/route-enhancers.yaml), das einen Simple Route-Enhancer sowie den MpcVidplyMediaRoute Aspekt (Slug optional, Abfrage-Fallback) im slug Feld von tx_mpcvidply_media. Wenn Ihre Website das mpc-vidply Site-Set verwendet, wird der Enhancer automatisch übernommen – URLs der Form

 
example.com/mediathek/my-great-episode
 

auf die Detailseite und laden den referenzierten Medien-Datensatz.

2.2 Manueller Fallback (TYPO3 < 14.1 oder benutzerdefinierter Geltungsbereich)

Wenn Sie den Enhancer auf eine bestimmte Seite beschränken müssen oder eine ältere TYPO3-Version verwenden, fügen Sie Folgendes in config/sites/<site>/config.yaml:

 
routeEnhancers:
  VidPlyDetail:
    type: Simple
    routePath: '/{media}'
    limitToPages:
      - 42   # UID of the detail page
    defaultController: 'VidPly::detail'
    requirements:
      media: '[a-z0-9\-]+'
    aspects:
      media:
        type: MpcVidplyMediaRoute
        tableName: tx_mpcvidply_media
        routeFieldName: slug
 

2.3 DB-Struktur analysieren

Führen Sie nach der Bereitstellung der Erweiterung die Funktion „Datenbankstruktur analysieren“ über das Installations-Tool (oder typo3 database:updateschema). Das Update fügt unter anderem folgende Felder hinzu:

  • tx_mpcvidply_media.slugund im Laufe der Zeit z. B. long_description (RTE) für Detailtext
  • tx_mpcvidply_listview_row (Tabelle) und Spalten wie enable_pagination / pagination_per_page für die zeilenweise clientseitige Paginierung
  • tx_mpcvidply_listview_row_media_mm (MM für manuelle Auswahl)
  • tt_content.tx_mpcvidply_listview_rows und tt_content.tx_mpcvidply_detail_page

2.4 Cache leeren

Leeren Sie den TYPO3-Cache einmalig nach der Aktualisierung der Erweiterung, damit die neuen TypoScript-, TCA- und Icon-Registrierungen übernommen werden.

3. Frontend-Assets

Das Listview-Inhaltselement lädt immer (Raster und Regal):

  • Resources/Public/Css/listview.min.css — Listview, Karten, detailbezogenes Layout, Pager-UI
  • Resources/Public/JavaScript/Listview.min.js (ES-Modul) — horizontales Shelf-Scrollen und Pfeile, Sortieren <select> , clientseitige Paginierung (wenn eine Zeile für die Paginierung konfiguriert ist und mehr Elemente als die Seitengröße enthält) sowie optionales Einblenden von Karten

Beide Assets berücksichtigen prefers-reduced-motion und stellen benutzerdefinierte CSS-Eigenschaften für das Theming bereit (siehe listview.css für die vollständige Liste).

4. Barrierefreiheit

  • Jede Karte ist ein echtes <a> Element (kein reines JS-Klickziel) mit einem sichtbaren Fokusring; Kategorie-Chips und Beschriftung befinden sich aus Gründen der Lesbarkeit über der Vollbild-Karten-Link-Überlagerung.
  • Der Scroll-Container des Regals ist per Tastatur zugänglich (tabindex="0", Pfeil- / Home- / End-Navigation). Die Pfeiltasten sind sichtbar aria-controls und sind an den Enden deaktiviert.
  • Die Sortiersteuerung und die Paginierung <nav> verwenden native <select> und <button> mit zugehörigen Beschriftungen; der Pager kann bei vielen Seiten auf eine kompakte Anzeige „Seite x von y“ umschalten.
  • Posterbilder nutzen natives Lazy Loading (loading="lazy", decoding="async") und haben immer einen alt Text, der vom Medientitel abgeleitet ist.
  • Die Detailvorlage gibt schema.org JSON-LD (VideoObject oder AudioObject) für SEO / die Eignung für Rich Results.

Seite teilen