Bootstrap Package: Ausgeblendete Layouts für Text & Images reaktivieren
In dieser Anleitung wird beschrieben, wie die mit dem Bootstrap-Package ausgeblendeten Einstellungen zur Bildausrichtung (insbesondere In text, left und In text, right) wieder aktiviert werden können. Laut Kommentar in den Templates und PageTS-Dateien werden diese ausgeblendet, weil sie nicht für responsive Designs geeignet sind. Bei vernünftiger Umsetzung stellt dies aber keine Einschränkung dar. Diese Anleitung zeigt, wie ich es umgesetzt habe.
1. Reaktivieren der Auswahlmöglichkeiten
Im ersten Schritt müssen die im PageTS des bootstrap_packages ausgeblendeten EInträge reaktiviert werden. Diese Einstellungen sind in der Datei EXT:bootstrap_package/Configuration/PageTS/TCEFORM.txt definiert. Dort wird zum Beispiel festgelegt, welche EInstellungen ausgeblendet werden. Dies betrifft auch die Änderung der Bildgröße und andere EInstellungen.
Zunächst werden folgende Einträge im Page TSConfig der root-Seite eingetragen:
TCEFORM.tt_content.imageorient.removeItems >
Der EIntrag TCEFORM.tt_content.imageorient.removeItems > sorgt dafür, dass die ausgeblendeten EInstellungen wieder erscheinen. Ausgeblendet werden die Werte 1,2,9,10,17 und 18. 17 und 18 stehen hierbei für In text, left und In text, right.Die anderen Werte für die Bildausrichtungen links und rechts jeweils unter oder über dem Text. Alternativ könnte (wenn nur 17 und 18 benötigt werden) daher auch
TCEFORM.tt_content.imageorient.removeItems = 1,2,9,10
geschrieben werden.Jetzt werden die EInstellungen wieder angezeigt:
Wird eine dieser Einstellungen jetzt gewählt, dann wird das Bild zwar angezeigt, allerdings immer über dem Text und zentriert, da im TypoScript des bootstrap_packages die Werte 17 und 18 (ebenso wie 1, 2, 9 und 10) nicht definiert sind und daher einfach nichts passiert.
2. Rendering
Als nächstes müssen nun folgende Einstellungen analog zu den reaktivierten Optionen im TS des Templates vorgenommen werden:
tt_content.textpic.templateName.stdWrap.cObject {
1 = TEXT
1.value = TextpicAboveRight
2 = TEXT
2.value = TextpicAboveLeft
9 = TEXT
9.value = TextpicBelowRight
10 = TEXT
10.value = TextpicBelowLeft
17 = TEXT
17.value = TextpicIntextRight
18 = TEXT
18.value = TextpicIntextLeft
}
Mit diesen EInstellungen wird dafür gesorgt, dass der entsprechende Templatename an das Frontend-Rendering in den Fluid-Templates übergeben wird. Allerdings bewirkt diese Einstellung noch immer nichts, da in den Fluid-Templates diese Namen (noch) nicht erkannt werden.
Hinweis: In den weiteren Ausführungen wird nur auf die Typen 17 und 18 Bezug genommen.
3. Fluid Templates
Die vorhandenen Fluid-Templates unterstützen das Rendering noch nicht. Damit das klappt müssen die Templates ergänzt werden. Im Moment habe ich keine bessere Möglichkeit gefunden, als die gesamten Templates zu kopieren und dann zu ändern und zu ergänzen. Dies ist notwendig, da zwar zusätzliche Templatepfade angegeben werden können, aber beim Rendern von Partials die bestehenden Pfade herangezogen werden. Im Moment kann ich nicht sagen, ob dies ein Fehler oder ein gewünschtes Verhalten von Typo3 ist.
Zunächst werden das Verzeichnis EXT:bootstrap_package/Resources nach fileadmin/bootstrap_package/Resources kopiert.Das macht man am besten direkt am Server, Für das Rendering der ContentElements müssen nun im Verzeichnis fileadmin/bootstrap_package/Resources/Private/Templates/ContentElements die fehlenden Dateien ergänzt werden. Für die In text, right und In text, left EInstellungen sind das zumindets die Dateien TextpicIntextRight,html und TextpicIntextLeft.html. Die Namen entsprechen den Bezeichnungen im TypoScript.
Die Datei TextpicIntextLeft.html sieht so aus:
<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
<f:layout name="Default" />
<f:section name="Header" />
<f:section name="Main">
<div class="row textpic-intext-left">
<div class="col-xs-12 textpic-intext-left-header">
<f:render partial="Header/All" arguments="{_all}" />
</div>
<div class="col-xs-12 textpic-intext-left-media">
<f:render partial="Media/Gallery" arguments="{_all}" />
</div>
<div class="col-xs-12 textpic-intext-left-body">
<div class="content-body">
<f:format.html>{data.bodytext}</f:format.html>
</div>
</div>
</div>
</f:section>
</html>
Im Grunde werden hier nur die Bild- und Textelemente mit entsprechenden DIVs gewrappt. Als zusätzliche Klassen wurde textpic-left-<section> zugefügt, damit das Ganze über CSS leichter formatieren lässt. Die Datei TextpicIntextRight.html sieht genauso aus, nur dass "left" durch "right" ersetzt wird.
4. TS Settings
Wird ein Content-Element mit diesen EInstellungen angelegt, dann wird eine Fehlermeldung (Oops an error occured) auftauchen, da das Fluid Template nicht gefunden wird. Dazu muss man nun dem bootstrap_package mitteilen, dass es auch alternative Templatepfade berücksichtigt:
lib.contentElement {
templateRootPaths.10 = fileadmin/bootstrap_package/Resources/Private/Templates/ContentElements/
}
Da für diesen Fall lediglich zusätzliche Templates geladen werden müssen, müssen die EInstellungen für Layouts und Partials nicht angepasst werden.
Jetzt wird das Inhaltselement dargestellt, aber das Layout passt noch nicht. Dafür ist jetzt noch CSS erforderlich.
5. CSS
Um die Contentelemente korrekt anzuzeigen ist noch eine Fomatierung via CSS nötig. Das kann auf verschiedene Arten geschehen (eigenes CSS oder LESS file). Ich habe es derzeit in ein custom.css geschrieben, das über TS eingebunden wird und folgendes enthält:
/*** intext left and right BEGIN ***/
@media (min-width: 480px) {
.textpic-intext-left .textpic-intext-left-header,
.textpic-intext-right .textpic-intext-right-header {
margin-bottom: 12px;
}
.textpic-intext-right .textpic-intext-right-media,
.textpic-intext-left .textpic-intext-left-media {
display: block;
min-width: 100px;
max-width: 40%;
width: inherit;
}
.textpic-intext-left .textpic-intext-left-media {
float: left;
}
.textpic-intext-right .textpic-intext-right-media {
float: right;
}
.textpic-intext-left .textpic-intext-left-body,
.textpic-intext-right .textpic-intext-right-body {
display: block;
float:none;
width: 100%;
}
}
@media (min-width: 992px) {
.textpic-intext-left .textpic-intext-left-media {
max-width: 600px;
width: 15vw;
}
}
/*** intext left and right END ***/
Erklärung
Ich habe die Breakpoints manuell definiert. Über ein LESS-file könnten jene Werte benutzt werden, die direkt im bootstrap_package konfiguriert werden. Entscheidend ist eigentlich, dass das float erst ab einer gewissen Monitorgröße greift, denn sonst werden die BIlder zu klein. Umgekehrt muss ab einer gewissen Größe die Breite des Bildes beschränkt werden, sonst sieht es auch wieder nicht gut aus. Deshalb wird die maximale Breite mit 600 Pixel beschränkt. Das kann natürlich jeder individuell einstellen.
Beispiel
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.