Bildunterschrift umbrechen....

[RoGer]

Hallo zusammen,

normalerweise bricht ja der Bilduntertitel automatisch um - meine ich jedenfalls.

In einer älteren Installation (2.10.3) ist das aber leider nicht der Fall. Wie kann ich die Klasse "caption" automatisch an die Bildbreite anpassen.
Klar, mit CSS. Aber wie ?

Danke
Roland

[bekanntmacher]

Die Css-Klasse weiss ich jetzt nicht auswendig, aber kennst du Firebug für den Firefox

[RoGer]

ja klar. Das kam dabei raus:

Version 2.10.3:
.ce_text .caption {
background-color: #D6D6D6;
padding-left: 5px;

<div class="image_container float_right" style="padding:5px; float:right;">
<img width="300" height="400" alt="Becker Schulz" src="system/html/BeckerSchulz-d49d0e20.jpg">
<div class="caption">Martin Schulz, Präsident des Europäischen Parlaments und ...</div>
</div>

In der neueren Version steckt noch das style-Attribut

Version 2.11.8:

<figure class="image_container float_right" style="padding:5px; float:right;">
<a data-lightbox="1a3c24" title="Fotograf: Bastian..." href="tl_files/template/Bilder/29.jpg">
<figcaption class="caption" style="width:300px">Fotograf: Bastian...</figcaption>
</figure>

Muss ich vielleicht ein neues Template anlegen ? Ist mir wirklich ein Rätsel.

Danke
Roland

[bekanntmacher]

Das padding und float:right kommt aus dem Textelement wo du das Bild hinzugefügt hast: Eingabe "Bildausrichtung" bzw. "Bildabstand".
Da dein Bild 300px hat wird der div.caption auch 300px (style="width:300px") zugewisen.

[RoGer]

ja, is klar - aber nicht in der Version 2.10.3.
Hier beziehen sich die 300px nur auf das Bild und NICHT auf die Unterschrift. Es gibt kein style.

Als Redakteur möchte ich nur die Bildbreite festlegen. Die Unterschrift sollte sich automatisch anpassen.

Roland

[bekanntmacher]

ja, is klar - aber nicht in der Version 2.10.3.
Hier beziehen sich die 300px nur auf das Bild und NICHT auf die Unterschrift. Es gibt kein style.

Als Redakteur möchte ich nur die Bildbreite festlegen. Die Unterschrift sollte sich automatisch anpassen.

Roland

In V 2.10.3 war es noch nicht so.

Es funktioniert halt nur solage das Bild keinen Innenabstand hat (bei deinem aktuellen Fall müsstest du ja der Unterschrift 290px Breite zuweisen und nicht 300px). Schau mal hier: https://github.com/contao/core/issues/3517?source=cc wurde und wird über eine bessere Lösung disskutiert.

[bekanntmacher]

... oder entferne im Template das style beim div.caption bei ce_text und ce_image

[RoGer]

schonmal vielen Dank für deine Tipps.
Ich hab die Unterschrift erstmal "von Hand" mit CSS angepasst. Ist aber keine Dauerlösung.
Hätt ich nicht gedacht, das dieses Problem noch immer keine optimale Lösung hat.

Gruß
Roland

[Andreas]

In 2.10.04 ist die Galerie ja sogar noch ne Tabelle. Ich habe zwei Möglichkeiten, eine bei der du der Tabelle ne feste Breite geben musst, und eine ohne. Ich beziehe mich auf die Online-Demo.

Ohne feste Tabellenbreite

Zuerst div.image_container auf position:relative; denn wir werden nachher die Caption, die ein Kind von ihr ist, an ihr ausrichten.
Jetzt das Padding (inline style) für den Abstand entfernen, denn Padding ist hier nix, da es den Container größer macht als das Bild.
div.image_container {padding: 0 !important;}
Stattdessen benutzen wir Margin für den Abstand.
div.image_container { margin-right: 24px; margin-bottom: 24px; }
Werden die Captions 2, 3 od. n-zeilig, margin-bottom erhöhen von 24px auf z.B. 48px.
Jetzt die Caption absolut positionieren, sie positioniert sich intelligent am .image_container.
div.caption { position: absolute; }

Zusammenfassung:

div.image_container {
  position: relative;
  padding: 0 !important;
  margin-right: 24px;
  margin-bottom: 48px;
}
div.caption {
  position: absolute;
}

Mit fester Tabellenbreite

Wir geben der Tabelle die gewünschte Tabellenbreite
.ce_gallery table { width: 452px; }
Die Tabellenzellen haben eine Breite von 50% (inline style). sie können jetzt nicht mehr breiter werden als 226px, auch wenn die Caption länger wird.
Jetzt müssen wir den Inhalt der Zellen noch vertikal oben ausrichten.
td { vertical-align: top; }
Das ist prizipiell eine gute Idee für ein CSS reset.

Zusammenfassung:

.ce_gallery table {
  width: 452px;
}
td {
  vertical-align: top;
}

Übrigens ist es immer eine gute Idee, den IMGs und As in Image-Containern display block zu geben.
Das veraltete default display:inline; für Bilder ist ziemlich überholt und macht nur Sinn, wenn Bilder direkt in den Textfluss integriert werden sollen. Das vertical-align:middle; für Bilder aus der Contao-Demo erübrigt sich damit auch, kann man aber drin lassen, es hat keine Auswirkung mehr. Mit vertical-align können nur inline-Elemente (Text) und Tabellenzellen formatiert werden.
Das block für die As dehnt die As auf die Größe der Bilder aus und vergrößert so den klickbaren Bereich. Die Browser handeln das zwar auch so irgendwie, aber richtiger wäre es den As display:block zu geben. So sind sie dann auch nochmal formatierbar wie ein DIV.

div.image_container a,
div.image_container img {
  display: block;
}