Einleitungsbild mit umfließendem Text

Mit Jommla 3 konnte der Beitragstext um das Einleitungsbild herum fließen.

Das geht mit Joomla 4 nicht mehr. Es bleibt unter dem Einleitungsbild freier Raum, wenn der Text länger ist als die Bildhöhe.

Oder kenne ich da was nicht?

Danke für den Hinweis. Ich habe da aber leider nichts finden können, was mich weiter bringt.

Vielleicht wurde meine Frage aber auch falsch verstanden. Daher anbei ein Bild, das vielleicht klarer darstellt was gewünscht ist.

Template ist übrigens Cassiopeia und figure-Klasse ist .float-end.item-image.

Vielen Dank an euch beide.

Zunächst hatte ich allerdings gedacht, dass Eure Hinweise nicht zum Ziel führen, denn float: right wird bereits durch .float-end automatisch festgelegt und width war über flex: 1 0 390px definiert (Ich habe hier auf Prozentangaben verzichtet, um bei kleiner werdenden Displays wie z.B. Tablets das Schrumpfen der Bilder zu verhindern.).

Habe also alle Bootstrap5-Klassen in Zusammenhang mit Flexbox durchgesehen und nichts passendes gefunden bis mir aufgefallen ist, dass der über figure und div.item-content liegende Container div.blog-item festgelegt ist mit display: flex. Die Änderung in display:block war dann die Lösung.

Dazu muss gesagt werden, dass die Festlegung von div.blog-item auf display:flex eine Standardeinstellung des Cassiopeia-Templates ist. Weshalb das getan wurde ist mir allerdings unklar. Klar sind mir dann aber alle Empfehlungen, die Breite von figure zu reduzieren und float:right (bzw. float:left) zu definieren., denn offenbar haben andere Templates diese Voreinstellung nicht.

Ich hoffe daher, dass meine Beschreibung zu diesem Thema auch anderen weiterhilft, die mit Cassiopeia vergleichbare Probleme haben.

Die Lösungsbeschreibung unter #5 hat sich leider als unzureichend erwiesen: der leere Raum unter dem Bild war immer noch da.

Am Ende bin ich dann auf folgenden Lösung gekommen:

.blog-items .blog-item figure.right.item-image,
.blog-items .blog-item figure.float-end.item-image {
margin: 0.4em 0 0.2em 1em !important;
display: block;
}
.blog-items .blog-item figure.left.item-image,
.blog-items .blog-item figure.float-start.item-image {
margin: 0.4em 1em 0.2em 0 !important;
display: block;
}
.blog-items .blog-item,
.blog-items .blog-item .item-content {
display: inline;
}
.blog-items .blog-item .item-content h2 {
display: flex;
}

Unter CSS-Klasse Bild des Einleitungsbildes ist dazu je nach Wunsch float-start oder left und float-end oder right einzutragen. Der Eintrag für CSS-Klasse Beitrag im Blog-Layout des zugeordneten Menüs hat also nur den Charakter einer Voreinstellung.

Die margin-Werte sind natürlich individuell anzupassen.

Als entscheidend hat sich herausgestellt, h2 auf display: flex zu setzen. Anders gesagt: hilfreich war in diesem Fall, nicht nur die übergeordnete, sondern auch die untergeordnete Struktur zu betrachten. Weshalb das so ist, kann ich mangels tieferer Kenntnisse aber nicht erklären.

Das Ergbnis ist übrigens zu sehen unter https://www.tsg-dacapo.de/index.php , jetzt endlich unter Joomla 4.1.4 mit Cassiopeia als Template und TinyMCE als Editor.

Doch, die sind so gewollt: das sind die Autorenkürzel - manche schreiben auch den vollen Namen und setzen noch ein Datum dazu.

Im Impressum sind die Kürzel und die zugeordneten Namen aufgeführt (fällt mir dabei gerade auf: nicht mehr ganz aktuell)