Listenansicht und Detailseite

• VidPly-Listenansicht (mpc_vidply_listview) – zeigt ein oder mehrere benannte „Regale“ (als Raster oder horizontaler Bildlauf) mit Medienkarten an.
• VidPly-Detailansicht (mpc_vidply_detail) – zeigt den VidPly-Player sowie Metadaten für einen einzelnen Mediendatensatz an, 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 auf dieser Seite ein einzelnes VidPly-Detail-Inhaltselement ein. Das Element erfordert keine Backend-Konfiguration – es ermittelt den angeforderten Mediendatensatz lediglich zur Laufzeit anhand der URL.
3. Merken Sie sich die Seiten-UID; Sie werden in jedem Listenansichtselement 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 „Detailseite“ 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 bei Rasterlayout) – die horizontale Leiste verwendet immer das Scrollen innerhalb der Zeile und keine paginierten „Seiten“. Nur beim responsiven 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 Paginierungselement. Deaktivieren Sie die Paginierung, um stets den vollständigen Satz (bis zur maximalen Anzahl an Elementen) 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 (Einträge manuell auswählen) oder Automatisch (nach Kategorie). Das entsprechende Auswahlfeld wird darunter angezeigt.

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

Kategorien zuweisen: Öffnen Sie bei jedem VidPly-Mediendatensatz die Registerkarte „Kategorien“ und wählen Sie eine oder mehrere Kategorien aus. Diese werden auf den Karten in der Listenansicht angezeigt und steuern die automatische (nach Kategorie) Zeilenauswahl.

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 Weiterleitungs-Mehrdeutigkeiten zu vermeiden.

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

1.4 Übersetzte (verknüpfte) Listansichtszeilen

Bei mehrsprachigen Websites folgen die Definitionen der Listenansicht-Regale dem Inhaltselement der Standardsprache (Inline- tx_mpcvidply_listview_row Datensätze hängen am 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 – Kurztext.
• Lange Beschreibung – Rich Text (CKEditor) für die Detailseite; wird unterhalb der Kurzbeschreibung mit normaler HTML-Formatierung dargestellt.

Karten in Rasterzeilen zeigen die ausführliche Beschreibung ebenfalls an, ohne die Liste zu verlassen: Eine kleine Schaltfläche in der rechten unteren Ecke der Karte öffnet sie in einem Popover, das der Browser in der obersten Ebene darstellt – so wird der Text weder von der Karte abgeschnitten noch kann er die Höhe einer Rasterzeile ausdehnen. Regalzeilen lassen sie bewusst weg: Sie beschneiden vertikalen Überlauf und sind für schnelles horizontales Überfliegen ausgelegt.

Die Schaltfläche ist ein gleichrangiges Element des gestreckten Links der Karte, niemals ein untergeordnetes Element, sodass die Karte niemals zwei Steuerelemente verschachtelt. Das Umschalten, das leichte Schließen, die Escape-Taste und die Rückgabe des Fokus an die Schaltfläche werden nativ verarbeitet; es ist kein JavaScript erforderlich. Wo die Popover-API nicht verfügbar ist, verbirgt eine @supports not selector(:popover-open) Abfrage sowohl die Schaltfläche als auch das Panel aus, anstatt den Rich-Text in jede Karte zu kopieren, und die Detailseite bleibt der Ort, an dem man ihn lesen kann.

1.6 Titel und Breadcrumb der Detailseite

Bei einer gültigen Detailansicht führt die Erweiterung automatisch Folgendes aus:

• 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 Datensatz-Anbietern).

Beide Überschreibungen greifen nur dann, 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“ einstellen (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 Erweiterung lässt TYPO3s Standard- HMENU nav_hide Seiten aus der Breadcrumb-Navigation 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 Routen-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

werden auf die Detailseite aufgelöst und laden den referenzierten Mediendatensatz.

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 Installation 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.slug, und 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 — Listansicht, Karten, detailbezogenes Layout, Pager-UI
• Resources/Public/JavaScript/Listview.min.js (ES-Modul) — horizontales Scrollen im Regal und Pfeile, Sortierung <select> , clientseitige Paginierung (wenn eine Zeile für die Paginierung konfiguriert ist und mehr Elemente enthält als die Seitengröße) sowie optionales Einblenden von Karten

Beide Elemente 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 oberhalb des Link-Overlays der vollständigen Karte.
• Der Scroll-Container des Regals ist per Tastatur bedienbar (tabindex="0", Navigation mit den Pfeiltasten / Home / Ende). Die Pfeiltasten sind 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 Darstellung „Seite x von y“ umschalten.
• Posterbilder nutzen natives Lazy Loading (loading="lazy", decoding="async") und verfügen stets über einen alt Text, der aus dem Medientitel abgeleitet wird.
• schema.org JSON-LD (VideoObject / AudioObjectoder ein ItemList auf Galerieseiten) wird im Quellcode der Seite <head> für SEO / Rich-Results ausgegeben. Listenansichten werden automatisch eingebunden und verknüpfen jede Karte mit der konfigurierten Detailseite. Siehe Strukturierte Daten (JSON-LD).