Breite der Bildunterschrift

[zoom]

Hallo zusammen,
wieso wird eine Bildunterschrift (Contao 4.4 und EclipseX) )nicht nur so breit dargestellt, wie das dazugehörige Bild?

Was muss ich tun, damit sich das ändert?

Vielen Dank für entsprechende Hinweise.

[Tom]

Hi,

die Breite der Bildunterschrift richtet sich nach dessen Inhalt.
Du kannst es auf display: block setzten, dann erstreckt es sich über die gesamte verfügbare Breite:

.image_container .caption {display: block}

[zoom]

Hi,
danke für den Hinweis. Leider zeigt sich jedoch keine Änderung. Im Contao Forum wurde dieses bei einem User empfohlen:

figure { display:table; margin:0; } .figure img { max-width:100%; } figcaption { display:table-caption; margin-top:8px; font-size:14px; line-height:18px; caption-side: bottom; }
Ginge das bei Eurem Theme auch?

[Tom]

Ich habe den oben genannten Code mit display: block nochmals getestet. Funktioniert hier. Hast du einen Link zur Website? Ein Screenshot von dem gewünschten Vorhaben wär auch noch hilfreich.

[zoom]

hier ist der Link: https://neu2020pct.vethis.de/150-jah...ekongress.html

Screenshot ist angefügt.

[Tim]

Bildunterschrift Element und Bild sind getrennte paar Schuhe. Wichtig ist auch wie sich weitere Texte ausrichten sollen. Ohne eine Skizze gibt es viele Wege, die hier möglich bzw. gewünscht sind. Ich denke es soll ein geschlossener Block werden.

Folgende Lösungen:
1. Das Bild sollte ohne Links-Ausrichtung angelegt sein, damit die responsive Funktion wieder gegeben ist und Bild und Unterschrift nach der Größe umschließenden Containers laufen.
2. Die Größe kann dann über die Abstands-Regelung des Bildes erfolgen. Siehe Beispiel mit 500px Rechter Abstand

[zoom]

Genauso sollte sich eine Bildunterschrift immer verhalten. So breit wie das Bild unter dem sie steht, und dann eben die Anzahl an Zeilen. Im Prinzip ist das dann so wie von Dir aufgezeichnet.
Und wie bringe ich Euer Theme dazu, das so zu lösen?

[Tim]

Textelemente arbeiten mit einem Textfluss, der sich ggf. um das Bild und Bildunterschrift fließt. Diese gewünschte Darstellung ist sauberer mit einem reinen Bild-Element erzielt. Der aufgezeigte Weg ist Theme-Standard.

Um ein Block-Element auch sauber responsive zu setzen, würde man mit einem Grid arbeiten. In diesem Fall z.B. eine Grid-Vorlage 30% | 70%. In den 30er das Bild und den 70er einfach leer.