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 Auswahlfeder findest Du im Tab "Erscheinungsbild".
Mit dem Auswahlfeld "Border color", kannst Du dem Rand eine Kontext-Farbe zuweisen.

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.

Unter "Number of Columns" befindet sich eine neue Option: "BOOTSTRAP: Carousel".

Standardbreite

Optionen und Settings für die gewünschte Bidgröße!

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

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"
Extra Class - img-tag: "img-transform"

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.