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!
Hierfür muss die EXT:news muss unter "Statische Templates einschließen" vor t3sbootstrap eingeschlossen werden.
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!
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 =
# 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 =
# 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:
Beispiel: List Group
Carousel
