Im Bakehouse-Core gibt es ein Set an Elementen, die für responsive Newsletter optimiert sind und leicht integriert und angepasst werden können.
Um sie leichter von anderen Elemente unterscheiden zu können, haben sie das Prefix nl-.
Folgende Elemente werden vom Bakehouse zur Verfügung gestellt:
- Text (nl-text)
- Bild (nl-picture)
- Inhaltsbox/Fiftyfifty (nl-box)
- Spalter (nl-columns)
- Button (nl-button)
- Trenner (nl-trenner)
Den Code der Elemente inkl. weiterer Informationen findest du hier:
Allgemeine Konfigurationen
Damit die Elemente richtig funktionieren können, sind gewisse Settings im TypoScript und auch gewisse Voraussetzungen im HTML nötig.
TypoScript:
Um die Konfiguration im TypoScript zu erleichtern, liegt im Core ein vorbereitetes Script, das in das bestehende File mit folgender Zeile integriert werden kann:
@import 'EXT:bh_newsletter/Configuration/TypoScript/CoreElements.typoscript'
Zu beachten ist hier die Stelle, an der der @import gesetzt wird, da natürlich aufgrund der Reihenfolge im TypoScript Werte wieder überschrieben werden können.
Zum besseren Verständnis und zur leichteren Integration des Scripts hier der Inhalt:
Typoscript
plugin.tx_bh.settings.contentElements >
# PARTIALS FOLDERS
plugin.tx_bh.view.partialRootPaths.90 = EXT:bh_newsletter/Resources/Private/Partials/
plugin.tx_bh.view.partialRootPaths.100 = EXT:bh_newsletter/Resources/Public/Elements/
## ELEMENTMAPPING
plugin.tx_bh.settings {
fileElementMapping {
textElement.element = nl-text
imageElement.element = nl-picture
}
}
## Responsive Images
element.options.responsiveImages = 1
## GLOBAL TEMPLATE SETTINGS
element.options.nlbgcolor {
transparent = keine Hintergrundfarbe
}
element.options.width >
element.options.width {
width-600 = normal (600px)
width-500 = schmäler (500px)
width-400 = schmal (400px)
width-300 = sehr schmal (300px)
}
element.options.paddingV {
0px = kein Abstand
15px = halber Abstand (15px)
30px = voller Abstand (30px)
60px = doppelter Abstand (60px)
}
## Back-End-State, damit die Back-End-Bilder-Properties nur im BE angezeigt werden
element.options.backendstate = 0
[backend.user.isLoggedIn]
element.options.backendstate = 1
[global]
## VIEWPORT & CSS
page {
meta {
viewport = width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no
}
includeCSS {
nl-default-css = EXT:bh_newsletter/Resources/Public/Css/nl-default.css
}
}
## INCLUDES FOR BACK-END
[backend.user.isLoggedIn]
page {
includeJS {
nl-backend-default = EXT:bh_newsletter/Resources/Public/Js/nl-backend-default.js
}
includeCSS {
iconset = EXT:bh/Resources/Public/Css/iconset-frontend.css
}
}
[global]
HTML:
Die Elemente sind generell für Newsletter-Templates, die einen Contentbereich ohne Einschränkung in der Breite haben, konzipiert. In Templates mit fix gesetzter Breite sind sie nur sehr bedingt einsetzbar.
Damit die Elemente auch responsive richtig funktionieren, muss im HTML des Templates folgende Zeile vor dem Beginn des Contents eingefügt werden:
<f:render partial="MediaQueries" arguments="{_all}" />
An dieser Stelle werden die Media Queries der Elemente gerendert. Um diese anzupassen wäre es sinnvoll, sie vor den eigenen Media Queries des Templates einzufügen, da diese dann bei Bedarf überschrieben werden können.
Global Template Settings
Beim Befüllen können manche Einstellungen bei allen Elementen gesetzt werden.
Diese sind einerseits die Hintergrundfarbe der Sektion, sowie der Abstand nach oben und der Abstand nach unten.
Die Optionen, die bei diesen Einstellungen dem User zur Verfügung gestellt werden, sind standardmäßig durch das oben genannte TypoScript CoreElements.typoscript bereits vordefiniert.
Sie können aber natürlich vom Integrator im TypoScript erweitert oder geändert werden.
Einbinden der Elemente
Die Elemente werden durch einen @import ihrer TypoScript-Dateien eingebunden:
Typoscript
@import 'EXT:bh_newsletter/Resources/Public/Elements/nl-text/nl-text.typoscript'
@import 'EXT:bh_newsletter/Resources/Public/Elements/nl-picture/nl-picture.typoscript'
@import 'EXT:bh_newsletter/Resources/Public/Elements/nl-box/nl-box.typoscript'
@import 'EXT:bh_newsletter/Resources/Public/Elements/nl-newsbox/nl-newsbox.typoscript'
@import 'EXT:bh_newsletter/Resources/Public/Elements/nl-columns/nl-columns.typoscript'
@import 'EXT:bh_newsletter/Resources/Public/Elements/nl-button/nl-button.typoscript'
@import 'EXT:bh_newsletter/Resources/Public/Elements/nl-trenner/nl-trenner.typoscript'
Tipp
Reihenfolge im TypoScript
Um die Elemente anpassen zu können, wird empfohlen, den include der Newsletter-CSS-Datei und die Konfigurationen der Elemente nach den @imports in der TypoScript-Datei einzufügen.
Anpassen der Elemente
Die Elemente können durch Konfigurationen im TypoScript, sowie durch Styling im CSS angepasst und modifiziert werden.
Wir werden hier auf die konfigurierbaren Optionen und die stylbaren CSS Klassen eingehen.
Um einen umfassenderen Überblick über den Aufbau und die Funktionen der Elemente zu bekommen, gibt es eine eigene Seite, die den Code der Elemente anzeigt:
Hinweis
Responsive CSS
Bei allen Anpassungen im CSS sollte an die Mobilversion gedacht werden.
Um auf diese Einfluss zu nehmen, kann in den Media Queries des Templates CSS ergänzt werden.
nl-text:
Das Text-Element hat an sich keine konfigurierbaren Optionen.
Die Schriftstile können - wie beim Bakehouse gewohnt - in der Template-CSS-Datei vorgenommen werden.
Überschriften und Schriftstile können hier entweder allgemein oder speziefisch durch Verwenden der jeweiligen Element-Klasse definiert werden.
nl-picture:
Auch das Bild-Elemente hat keine besonderen Konfigurationen. Spezielle Designs, wie z. B. Bilder mit abgerundeten Ecken, Schatten oder Rahmen, können im CSS umgesetzt werden.
Die Optik des Copyright bei Bildern kann ebenfalls durch CSS beeinflusst werden. Hierfür bitte auf folgende Selektoren stylen:
.nl-picture .nl-picture-copyrigh (Schrift)
.nl-picture-copyright-padding (Abstände)
nl-columns:
Welche Elemente in den Spalter abgelegt werden können, kann im Typoscript des Elements geändert werden.
Hierfür einfach folgende Zeile ins Typoscript kopieren und anpassen:
plugin.tx_bh.settings.contentElements.nl-columns.elementsAllowed = nl-text,nl-picture,nl-button,nl-box,nl-newsbox,nl-pauschalbox
nl-box & nl-newsbox:
Das Inhaltsbox-Element und dessen Bruder mit Daten aus dem Newsmodul haben viele konfigurierbare Optionen im TypoScript. So kann das Verhalten der Bilder in der Mobilversion beeinflusst werden, die Höhe des Bildes der kleinen Box vordefiniert werden und dem/der Redakteur:in auch die Möglichkeit geboten werden, selbst im Settingsformular des Elements zu entscheiden, wie sich das Bild in der Mobilversion verhalten soll.
Außerdem können weitere Farbschemas, die dann im Settingsformular ausgewählt werden können, definiert werden.
Bildverhalten in der Mobilversion - responsiveImages
nl-box in der Fiftyfifty-Optik namens große Box.
Bei der Fiftyfifty-Ansicht des Box-Elements (im Settingsformular als große Box bezeichnet) kann bei wachsendem Inhalt das Bild durchaus eine beachtliche Höhe erreichen. Um dann in der Mobilversion, in der Bild und Inhalt ja nicht mehr nebeneinander sondern untereinander dargestellt werden, kein unübersichtliches Design zu erhalten, gibt es die Option, dass die Bilder in der Mobilversion in halber Höhe dargestellt werden.
Der Befüller kann sich dann im Bearbeiten-Modus durch Klicken des smartphone Icons in der linken oberen Ecke des Bildes das kleine Bild der Mobilversion anzeigen lassen.
Diese Option ist bereits standardmäßig aktiviert, kann aber durch folgende Zeile deaktiviert werden:
element.options.responsiveImages = 0
Achtung! Diese Zeile muss im Typoscript vor dem @import des Elements gesetzt werden, damit sie auch greift.
Diese Einstellung wirkt sich auf nl-box und auf nl-newsbox aus!
Soll dies geändert werden, so muss direkt das im TS des Elements über folgenden Pfad geändert werden:
plugin.tx_bh.settings.contentElements.nl-newsbox.responsiveImages
Bildhöhe bei der Option "kleine Box" - smallBoxImgHeight
nl-box in der Inhaltsbox-Optik namens kleine Box.
Bei der Inhaltsbox-Ansicht des Box-Elements (im Settingsformular als kleine Box bezeichnet) , die nur im Spalter verwendet werden sollte, hat das Bild eine fixe Höhe in Pixel.
Diese Höhe ist standardmäßig auf 200 gesetzt, kann aber vom/von der Integrator:in im TypoScript wie folgt angepasst werden_
plugin.tx_bh.settings.contentElements.nl-box.smallBoxImgHeight = 320
bzw.
plugin.tx_bh.settings.contentElements.nl-newsbox.smallBoxImgHeight = 320
weitere Farbschemas im Settingsformular
Das Box-Element hat bereits 2 farbliche Optionen vordefiniert:
- ohne Farbe transparent - hier hat der Content keine Hintergrundfarbe
- weiß FFFFFF - hier hat der Content die Hintergrundfarbe weiß
Wenn eine der bestehenden Optionen nicht gewünscht ist, so kann diese im TypoScript wie folgt entfernt werden:
plugin.tx_bh.settings.contentElements.nl-box.styleOptions.boxColor.transparent >
plugin.tx_bh.settings.contentElements.nl-box.styleOptions.boxColor.FFFFFF >
Um weitere Optionen hinzuzufügen, kann unter dem selben TypoScript-Pfad eine Option hinzugefügt werden.
Hierbei muss der Key der Option der Hexacode der Farbe ohne Hashtag sein:
plugin.tx_bh.settings.contentElements.nl-box.styleOptions.boxColor.ff8a18 = orange
Für die Farbe des Hintergrunds muss nichts im CSS gemacht werden, da dies bereits im HTML des Elements gesetzt wird.
Um weitere Anpassungen an Überschrift, Text und dem Aussehen des Buttons zu machen, muss im CSS des Templates gearbeitet werden.
Hier ein Beispiel:
CSS
/* nl-box */
.nl-box .boxcolor-ff8a18 .buttonBG {
background-color: white;
}
.nl-box .boxcolor-ff8a18 .buttonLink,
.nl-box .boxcolor-ff8a18 .buttonLink span {
color: #ff8a18;
}
.nl-box .boxcolor-ff8a18 .boxHeadline,
.nl-box .boxcolor-ff8a18 .boxText,
.nl-box .boxcolor-ff8a18 .boxText p {
color: white;
}
/* nl-newsbox */
.nl-newsbox .boxcolor-ff8a18 .buttonBG {
background-color: white;
}
.nl-newsbox .boxcolor-ff8a18 .buttonLink,
.nl-newsbox .boxcolor-ff8a18 .buttonLink span {
color: #ff8a18;
}
.nl-newsbox .boxcolor-ff8a18 .boxHeadline,
.nl-newsbox .boxcolor-ff8a18 .boxText,
.nl-newsbox .boxcolor-ff8a18 .boxText p {
color: white;
}
nl-button:
Beim Button-Element hat der/die Redakteur:in die Möglichkeit zwischen 2 grundlegenden Designs, einer Auswahl an Farben und der Ausrichtung des Buttons, zu wählen. Außerdem gibt es die Möglichkeit, den Button auf die volle Contentbreite wachsen zu lassen.
Die 2 grundlegenden Designs sind bereits vorgegeben und sind:
- Button mit flächigem farbigem Hintergrund
- Button mit farbigem Rahmen
weitere Farbschemas im Settingsformular
Beim Button-Element sind bereits die Farbschemas "schwarz" und "weiß" vordefiniert. Diese können natürlich im TypoScript bei Bedarf gelöscht werden.
Die Farben können - so wie beim Box-Element - im TypoScript vom/von der Integrator:in vordefiniert werden. Der Pfad im TypoScript hierfür:
plugin.tx_bh.settings.contentElements.nl-button.styleOptions.btncolor
Als Key kann hier ein frei gewählter Klassenname verwendet werde, da das Design für den Button im Template-CSS angepasst muss.
Hier ein kleines Beispiel für das Hinzufügen eines grünen Buttons:
Konfiguration in TypoScript:
Typoscript
plugin.tx_bh.settings.contentElements {
nl-button {
styleOptions {
btncolor {
btn-color-green = green
}
}
}
}
Styling im CSS:
CSS
.nl-button.btn-type-bg.btn-color-green .buttonBG {
background-color: #afe63c;
}
.nl-button.btn-type-border.btn-color-green .buttonBG {
border: 2px solid #afe63c;
}
.nl-button.btn-type-bg.btn-color-green .buttonLink,
.nl-button.btn-type-bg.btn-color-green .buttonLink span {
color: #FFFFFF;
}
.nl-button.btn-type-border.btn-color-green .buttonLink,
.nl-button.btn-type-border.btn-color-green .buttonLink span {
color: #afe63c;
}
nl-trenner:
Im Grunddesign hat der Trenner folgende auswählbare Optionen, die im TypoScript vom/von der Integrator:in auch bei Bedarf durch Löschen einzelner Optionen reduziert werden können:
- Trenner ohne Strich
- Trenner mit horizontalem Strich
- Trenner mit vertikalem Strich
- Trenner mit Bild
Die Optionen sind im TypoScript wie folgt verortet:
Typoscript
plugin.tx_bh.settings.contentElements {
nl-trenner {
styleOptions {
line {
hor-line = horizontale Linie
ver-line = vertikale Linie
no-line = keine Linie
img = mit Bild
}
}
}
}
weitere Farbschemas im Settingsformular
Auch beim Trenner-Element sind bereits die Farbschemas "schwarz" und "weiß" schon vordefiniert. Diese können natürlich auch im TypoScript bei Bedarf gelöscht werden.
Die Farben können - so wie beim Box-Element - im TypoScript vom/von der Integrator:in vordefiniert werden. Der Pfad im TypoScript hierfür:
plugin.tx_bh.settings.contentElements.nl-trenner.styleOptions.linecolor
Hierbei muss der Key der Option der Hexacode der Farbe ohne Hashtag sein.
Trenner-Option "mit Bild"
Um die Option nutzen zu können, müssen im TypoScript der Pfad zum Bild und die gewünschte Breite des Bildes in Pixel konfiguriert werden.
Damit der Trenner immer die Mindesthöhe des Bildes (sonst wird es abgeschnitten), muss auch die Höhe des Bildes in Pixel angegeben werden.
Bei Angabe eines Prozentwertes muss die Höhe des Bildes bei einer Trennerbreite von 600px in Pixel angegeben werden.
Im folgenden Beispiel wollen wir das Bild logo_blau.png, das im images-Ordner des Newsletters liegt, mit einer Breite von 100 Pixeln im Trenner anzeigen:
Typoscript
plugin.tx_bh.settings.contentElements {
nl-trenner {
// Bild mit 100px Breite
trenner-img-src = /fileadmin/templates/ext/bh_newsletter/images/logo_blau.png
trenner-img-width = 100
trenner-img-height = 44
trenner-img-width-unit = px
// Bild mit 100% Breite
trenner-img-src = /fileadmin/templates/ext/bh_newsletter/images/line.png
trenner-img-width = 100%
trenner-img-height = 72
trenner-img-width-unit >
}
}
Sollte die Option "mit Bild" nicht gewünscht sein, kann diese im TypoScript gelöscht werden.
plugin.tx_bh.settings.contentElements.nl-trenner.styleOptions.line.img >