Text & Medien

Mit dem Content-Element "Text & Media" kannst Du auch nur Text oder nur Medien ausgeben. Somit können die Content-Elemente "Text", "Bilder" und "Text und Bilder"  entfernt werden. Infos dazu hier!

Ich habe (nur für Text & Media) ein neues Auswahlfeld - "Header Position" - für die Überschrift bereitgestellt. Hiermit kannst Du auswählen ob die Überschrift über den Bildern und dem Bodytext oder neben den Bildern und über dem Bodytext erscheinen soll.

Zwei weitere, neue Auswahlfeder findest Du im Tab "Erscheinungsbild". Mit dem Auswahlfeld "Border color", kannst Du dem Rand eine Kontext-Farbe zuweisen. Das Auswahlfeld "Gallery row width in %" dient dazu, die Breite für den Bildbereich in Prozent zu bestimmen.

Im Auswahlfeld "Position und Ausrichtung" befinden sich zwei neue Optionen: "Beside Text, Left (align-items-center)" und "Beside Text, Right (align-items-center)". Diese sind identisch mit "Neben dem Text links" bzw. "Neben dem Text rechts", jedoch wird der Text neben den Bildern vertical zentriert.

 

Bilder

Standardbreite

Wenn für die Bilder (bzw. Medien) keine Breite oder Höher angegeben wird, dann wird diese automatisch berechnet. Im Konstanten-Editor unter "Default Image Size" kann die max. Standardreite für "ColPos=1" bzw. "ColPos=2 oder 3" angegeben werden. Diese Werte sind nur für Seiten mit einem mehrspaltigen Backend-Layout.

Die max. Standardbreite für das einspaltige Backend-Layout kann (wie bisher) im Konstanten-Editor unter "Content" angegeben werden.

Abstände

Die Abstände zwischen den Bildern werden automatisch erstellt (ab Version 4.1.4).  Falls hier andere Abstände gewünscht werden, können diese mit CSS überschrieben werden.

/* media spacing */
.gallery .row {
	margin-right: -.5rem;
	margin-left: -.5rem;
}
.gallery .col-sm {
	padding-right: .5rem;
	padding-left: .5rem;
}
figure {
    margin: 0 0 1rem;
}

Extra Class

Für jedes Bild können z.B. Bootstrap Utility Klassen oder individuelle Klassen vergeben werden. Dieses ist für den "figure-tag" als auch für den "image-tag" möglich.

Für den "figure-tag" können z.B. individuelle Abstände "margin" (z.B. mb-5) oder "padding" (z.B. p-2) vergeben werden.

Die Extra-Class für den "image-tag" eignet sich z.B. für "Image thumbnails" oder individuelle Ausrichtungen (floats).

In dem "valuePicker" findest Du einige möglich Optionen für die entsprechende Extra-Class!

Die folgenden, nicht mehr benötigten Konstanten, habe ich aus dem Konstanten Editor entfernt:

styles.content.textmedia.columnSpacing
styles.content.textmedia.rowSpacing
styles.content.textmedia.textMargin
styles.content.textmedia.borderColor
styles.content.textmedia.borderWidth
styles.content.textmedia.borderPadding

Beispiele

Im Text rechts

Breite der Gallery 50%
Anzahl der Spalten = 2
"Extra Class" für den img-tag: "img-thumbnail"

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.

Beside Text, Left (align-items-center)

Breite der Gallery 50%
Anzahl der Spalten = 1
Header Position: "Beside the Image"

Neben dem Text rechts

Breite der Gallery 25%
Anzahl der Spalten = 1
Header Position: "Beside the Image"

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.

Neben dem Text links

Breite der Gallery 50%
Anzahl der Spalten = BOOTSTRAP: Carousel
Header Position: "Default"

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.