News System

List- & Detail-View für EXT:news

Für die List- und Detail-View der EXT:news, habe ich für Bootstrap 4 optimierte Templates erstellt.

Diese werden automatisch eingebunden, wenn die EXT:news installiert/aktiviert ist und unter "Statische Templates einschließen" vor der EXT:t3sbootstrap eingeschlossen wird (s. Screeshot). Danach stehen weitere "Template Layouts" (s. Screenshot) zur Verfügung.

Ajax Pagination: Wenn die EXT:typoscript_rendering installiert und aktiviert wurde!

BTW: Mit dem Plugin "Content Consent" kannst du auch in den News-Items unter "Content Elements" Youtube Videos datenschutzkonform einbinden!

Im Template "BS4: Detail view" wird der News-Titel mit einem h1-Tag ausgegeben!

Bildschirmfoto_2019-09-08_um_15 — Neue Template Layouts

Folgende Konstanten stehen im Konstanten-Editor zur Verfügung:

bootstrap.ext {
  # Info (list view): zeigt Info (Datum, Kategorien) in List-Ansicht.
  news.list.info = 0
  # Image ratio (list view): z.B.: 16:9, 4:3 - oder 0.
  news.list.imageRatio = 16:9
  # Utility class für den "more-button" in der List-Ansicht.
  news.list.buttonClass = primary
  # Image mobile overlay (list view): wenn < 576px nur für Card-Templates.
  news.list.imageOverlay = 1
  # Loading Spinner Position (list view): with ajax pagination.
  news.list.loadingSpinnerPosition = top
  # Info (detail view): zeigt Info (Datum, Kategorie, Tags, Autor) in Detail-Ansicht.
  news.detail.info = 1
  # Image ratio (list view): z.B.: 16:9, 4:3 - oder 0.
  news.detail.imageRatio = 4:3
  # Lightbox (detail view): aktivieren für Detail-Ansicht.
  news.detail.enableLightbox = 1
  # Utility class für den "back-button" in der Detail-Ansicht.
  news.detail.buttonClass = primary
  # Teaser class (detail view): z.B.: "lead" oder jede andere.
  news.detail.teaserClass = lead
  # Carousel (detail view): zeigt Bilder im Carousel, wenn aktiviert und mehr als ein Bild.
  news.detail.carousel = 1
  # Breite für linke Spalte (detail view):
  news.detail.leftGrid = 7
  # Media oben (detail view): zeigt Bild oder Video oben, über dem Text.
  news.detail.mediaOnTop = 0
}

Demo: