Icon für Bildposition bei "Bild einfügen" im Inhaltselement Text funktioniert falsch

[grashalm]

Ist dieser Bug schon bekannt?

Wenn ich in 5.3.0 ein Inhaltselement vom Typ "Text" anlege und dann unter dem Text auf "Bild einfügen" gehe, platziert mir das vierte und letzte Icon das besagte Bild über dem Text und nicht darunter, wie es eigentlich der Fall sein sollte. Ist das wirklich ein Bug, oder habe ich etwas übersehen?
Falls das ein Bug ist: Wo genau melde ich den?

Grüße, grashalm

[cliffparnitzky]

Es wird die CSS Classe "media--below" gesetzt ... ggf. muss das angepasst werden?

[Bennie]

Ich meine das wäre in Slack auch schon mal angesprochen worden und ist wohl kein Bug.
Du musst dir dafür ein CSS schreiben, mit order z.B. bzw. für rechts und links die floatings anlegen sofern gewünscht.
Vielleicht wäre es sinnvoll wenn das in der Contao Demo exemplarisch eingerichtet würde

Oder in der Doku ein Hinweis dazu
https://docs.contao.org/manual/de/ar...deinstellungen

[grashalm]

Danke für Eure Antworten.
Ja, dass media--below gesetzt wird, habe ich gesehen, aber welche Attribute und Werte muss ich dieser Klasse zuweisen, damit das Img-Element unter den Text geschoben wird?
Mit "order"lege ich ja nur die Reihenfolge in Flex-Boxen fest, und die wird ja hier nicht gesetzt...

[Spooky]

Das musst du alles selbst in deinem CSS setzen. Alternativ kannst du auch das Template entsprechend anpassen.

[grashalm]

Ich bevorzuge die Anpassung über CSS. Muss /sollte ich hiewr also tatsächlich eine Flexbox setzen oder wie löse ich das anders? Bin leider kein CSS-Profi...

[mlweb]

Ja Flexbox ist die eine Variante. CSS-Grid kann man dafür auch nutzen.

[mdoll]

Moin,

wahrscheinlich ist die einfachste Lösung mit CSS-Grid:

.media--below {
    display: grid;
    justify-items: center; /* zentriert das Bild, ggf. kann die Anweisung auch weggelassen werden  */
 }

/* Bild unter den Text */
.media--below > figure {
    order: 5;
}

Gruß
Mathias

[grashalm]

Habe es jetzt mit Grid probiert und ziemlich lange rumgedoktort.

Aber bevor ich jedesmal, wenn ich in einem Artikel ein Bild unter dem Text platzieren will, folgenden Code eingeben muss,

#article-887 .media.media--below.content-text {
	display: grid;
}

#article-887 h1 {
	grid-row: 1/2;
}

#article-887 .rte {
	grid-row: 2/3;
}

#article-887 img {
	grid-row: 3/4;
}

dann setze ich doch lieber ein Bild als eigenes Inhaltselement unter den Text.

Früher war das so schön einfach. Diese Verkomplizierung kann ich nicht nachvollziehen.
Kann mir jemand erklären, warum das geändert wurde? media--above funktioniert doch auch noch normal...

[Bennie]

Es ist doch einfach - siehe den Post vor deinem
Was du jetzt gemacht hast ist natürlich extrem umständlich.

Ich sag ja das muss wohl in die Doku oder Demo

[grashalm]

Hallo mdoll,

vielen Dank für Dein Code-Beispiel. Dein CSS ist natürlich wesentlich kürzer und eleganter!
Damit lässt sich noch recht bequem arbeiten, zumal man dieses CSS nicht für jeden Artikel neu schreiben muss.
Vielen Dank!

[mdoll]

Man müsste sich mal Gedanken machen, wie man das in der Doku erklärt, oder ob das tatsächlich ein Issue bei Github wert ist.

Es war ja in Contao 4 so, dass bei "Bildausrichtung unterhalb" die Reihenfolge im Quelltext im Template geändert wurde. Linksbündig und rechtsbündig haben nur funktioniert, wenn man im Seitenlayout unter CSS-Framework den Layout-Builder aktiviert hat oder seine eigenen CSS-Anweisungen geschrieben hat.

In der CSS-Datei vom Layout-Builder steht mittlerweile folgendes:

.float_left,
.media--left>figure {
  float:left
}
.float_right,
.media--right>figure {
  float:right
}

Eine Anweisung für .media--below fehlt.

D.h., Bild einfügen oberhalb/linksbündig/rechtsbündig geht mit dem Layout-Builder in Contao 5, unterhalb nicht, da die geänderte Elementreihenfolge im Template nicht mehr greift.

Gruß
Mathias

[herr rilke]

Moin,

wahrscheinlich ist die einfachste Lösung mit CSS-Grid:

.media--below {
    display: grid;
    justify-items: center; /* zentriert das Bild, ggf. kann die Anweisung auch weggelassen werden  */
 }

/* Bild unter den Text */
.media--below > figure {
    order: 5;
}

Gruß
Mathias

hallo mathias,

danke für den anstoß!

mein beitrag wäre, die zentrierung in der ersten klasse zu entfernen, weil dann bspw. auch andere element (überschriften usw) zentriert dargestellt werden.
stattdessen zentrierung nur auf das figure element anwenden:

.media--below {
    display: grid;
    /* justify-items: center; zentriert das Bild, ggf. kann die Anweisung auch weggelassen werden  */
 }

/* Bild unter den Text */
.media--below > figure {
  justify-self: center;
    order: 15;
}

just in case ... es läse noch mal jemand nach


viele grüße

karsten

[grashalm]

hallo karsten,

vielen lieben dank für deine ergänzung! mir ist die automatische mit-zentrierung zum beispiel der überschriften auch schon unangenehm aufgefallen. deswegen hätte ich hier in kürze noch mal nachgefragt.
aber jetzt bist du mir zuvorgekommen und hast den code noch mal optimiert, vielen dank!
eine frage habe ich aber trotzdem noch: was bewirkt "order"? und wo ist der unterschied zwischen dessen werten von 5 und 15?

[mdoll]

Moin,

mit order bestimmst Du die visuelle Reihenfolge von Elementen innerhalb eines flex oder grid containers. Niedrige Werte werden zuerst dargestellt, höhere danach. Bei gleichem Wert entscheidet die Reihenfolge im Quelltext.

Der Standardwert für order ist 0.

Der Unterschied zwischen 5 und 15 ist erstmal keiner, und man könnte auch 1 nehmen. Wenn aber weitere Elemente dazu kommen sollten, dann ist es ganz angenehm, wenn man das nicht in Einerschritten angelegt hat, weil man einfach Elemente dazwischen packen kann, ohne allen Elementen einen neuen order Wert zu geben.

Siehe auch: https://developer.mozilla.org/en-US/...tiredLocale=de

Gruß
Mathias