Listenansicht und Detailseite

• VidPly-Listenansicht (mpc_vidply_listview) – zeigt ein oder mehrere als „Regale“ bezeichnete Bereiche (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 Die 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 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 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) – das horizontale Regal 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 eine Paginierungsleiste. 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 Listenansichtszeilen 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 erscheinen auf den Karten in der Listenansicht 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 Weiterleitungsunklarheiten 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 Weg, um ihn zu lesen.

1.6 Titel und Breadcrumb der Detailseite

In 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 den HTML-Tag <title> -Tag über einen speziellen Tag auf den Titel des Mediums ein 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“ setzen (damit sie nicht in der Hauptnavigation erscheint), muss die Breadcrumb-Stammzeile versteckte Seiten enthalten. Das Site-Set registriert eine Stammzeile MenuProcessor als breadcrumb bei page.10.dataProcessing.70 mit includeNotInMenu = 1, sodass die Breadcrumb-Navigation weiterhin die ausgeblendete Seite und ihre übergeordneten Seiten auflistet (z. B. Startseite › Mediathek › …). Ohne diese Einstellung lässt das TYPO3-Standard-HMENU nav_hide Seiten aus der Breadcrumb-Navigation aus, und der Pfad kann falsch aussehen.

Wenn Ihre Site-Vorlage page.10.dataProcessing.70 einen anderen Prozessor verwendet, schalten Sie die Site-Einstellung „Breadcrumb-Menü-Prozessor registrieren “ (mpcVidply.registerBreadcrumbMenu) aus und stellen Sie includeNotInMenu = 1 stattdessen deinen eigenen Breadcrumb-Prozessor ein. Der Medientitel wird weiterhin in die breadcrumb Variable geschrieben.

Installationen, die anstelle des Site-Sets das veraltete statische TypoScript enthalten , erhalten denselben Prozessor. Dort erfolgt die Umschaltung über die gleichnamige TypoScript-Konstante (Konstanten-Editor, Kategorie „mpc_vidply“):

mpcVidply.registerBreadcrumbMenu = 0

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 clientseitige Paginierung pro Zeile
• 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 nach der Aktualisierung der Erweiterung einmalig, 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 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 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 der Link-Überlagerung 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 Anzeige „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).