3.4.2 Figcaption ohne Breite

[reinweiss]

Hallo,

seit 3.4.1 wird ja für figcaption keine Weite mehr hartkodiert (https://github.com/contao/core/pull/7549).
Was machen wir denn nun um am Besten überlange Captions zu vermeiden?

Viele Grüße

[hofff]

Hallo,

die Breite im eigenen CSS auf max-width: 100%

fg
nicky


Gesendet von iPad mit Tapatalk

[reinweiss]

Hallo,

die Breite im eigenen CSS auf max-width: 100%

Und dann? 100% wovon? Da ist keine Bezugsgröße mehr.

-----
<figure class="image_container">
<a href="xxx.jpg" data-lightbox="lb11" title="">

<img src="xxx.jpg" srcset="xxx.jpg 1x, xxx.jpg 1.5x, xxx.jpg 2x" width="200" height="143" alt="xxx">
<script>
window.respimage && window.respimage({
elements: [document.images[document.images.length - 1]]
});
</script>
</a>
<figcaption class="caption">Hier steht ziemlich viel Text, deutlich mehr als 200px ...</figcaption>
</figure>
-----

[Spooky]

Hallo,

die Breite im eigenen CSS auf max-width: 100%

fg
nicky


Gesendet von iPad mit Tapatalk

Das alleine reicht nicht in Fällen wo der Container größer ist als das Bild.

Mit den neuen Responsive Images Set mag das Feature zwar nicht mehr so viel Sinn machen, finde es aber etwas seltsam, dass das einfach so weggelassen wurde. Ist ja quasi ein BC break.

[reinweiss]

Das alleine reicht nicht in Fällen wo der Container größer ist als das Bild.

Mit den neuen Responsive Images Set mag das Feature zwar nicht mehr so viel Sinn machen, finde es aber etwas seltsam, dass das einfach so weggelassen wurde. Ist ja quasi ein BC break.

So wie es aussieht, bleibt nur Klassen zu verteilen und diese im CSS zu stylen.
Da war es vorher aber bedeutend einfacher die hartcodierte width ggf. mit einer max-width: xxpx !important zu überschreiben.

[hofff]

Hallo,

also ich verstehe das gerade nicht. Warum sollte max-width=100% nicht reichen? Damit wird die caption nicht breiter als sein umgebender div. Und der umgebende div ist .image_container und dessen Breite wird durch das Bild bestimmt. In meinen Augen passend! Oder habe ich jetzt einen Denkfehler?

fg
nicky

edith sagt: fix a typo


Gesendet von iPad mit Tapatalk

[reinweiss]

Hallo,

also ich verstehe das gerade nicht. Warum sollte max-width=100% nicht reichen? Damit wird die caption nicht breiter als sein umgebender div. Und der umgebende div ist .image_container und dessen Breite wird durch das Bild bestimmt. In meinen Augen passend! Oder habe ich jetzt einen Denkfehler?

fg
nicky

edith sagt: fix a typo


Gesendet von iPad mit Tapatalk

In einer Galerie mit z.B. 4 Bildern nebeneinander ist die Galerie bzw. li der umgebende Container. Beide haben aber keine definierte Breite.
Bei max-width: 100% für figcaption darf die Caption maximal so breit werden wie die Galerie. Damit werden die folgenden Bilder nach rechts bzw. unten verdrängt.

Update: image_container hat keine festgelegte Breite und kann daher maximal ausgedehnt werden.

[hofff]

Hallo,

ahhh ... sorry ... Fehler gefunden ... ich weiß, warum es bei mir funktioniert mit max-width: 100% ... ich gebe dem li die jeweilige Grid-Klasse mit, somit wird die Breite eines li nicht durch das Bild bestimmt, sondern durch die verwendete Grid-Klasse und das Bild und auch .caption passen sich an die Breite an. Dann wäre das wahrscheinlich auch die Lösung für Dein Problem! :-)

fg
nicky

[Spooky]

Hallo,

also ich verstehe das gerade nicht. Warum sollte max-width=100% nicht reichen? Damit wird die caption nicht breiter als sein umgebender div. Und der umgebende div ist .image_container und dessen Breite wird durch das Bild bestimmt. In meinen Augen passend! Oder habe ich jetzt einen Denkfehler?

fg
nicky

edith sagt: fix a typo


Gesendet von iPad mit Tapatalk

Nein, das Bild kann kleiner sein als das Container Element
.Bilder haben eine (von CSS Definitionen abgesehen) fix definierte Breite. Das umgebende Eltern Element, im Fall von Contao entweder ein div oder figure, ist ein Block Level Element. Block Level Elemente nehmen by default 100% der verfügbaren Breite ein. Daher gibt es, nicht selten, Fälle wo das Bild kleiner als der Container ist. Durch die inline style Angabe der Breite der figcaption + max-width:100% konnte man sicher stellen, dass die figcaption nie Breiter als das eigentliche Bild ist. Jetzt geht das nur mehr mit JavaScript (oder Template Anpassung vielleicht).

[MacKP]

Ich hab hier mal ein paar Links zu einer reinen CSS Lösung gepostet: https://community.contao.org/de/show...l=1#post357445
Ist eventuell einen Blick wert ;-)

Viele Grüße

[reinweiss]

Ich hab hier mal ein paar Links zu einer reinen CSS Lösung gepostet: https://community.contao.org/de/show...l=1#post357445
Ist eventuell einen Blick wert ;-)

Viele Grüße

Vielen Dank, einen Blick ist es wert, aber keine Lösung.
Wie dort bereits eingewandt, ist die beschrieben Lösung nicht responsive.
Das Bild wird bei verringerter Fensterbreite abgeschnitten.

[reinweiss]

... Dann wäre das wahrscheinlich auch die Lösung für Dein Problem! :-)

fg
nicky

Leider nicht, da es nicht möglich ist dem einzelnen Bild in einer Galerie eine Grid-Klasse zuzuordnen.

[hofff]

Hallo,

naja ... doch schon. Mit ein paar php-Snippets im Template ist das kein Problem. Habe ich ja auch so gemacht!

fg
nicky

[Spooky]

(damit's auch hier steht)

Vielen Dank, einen Blick ist es wert, aber keine Lösung.
Wie dort bereits eingewandt, ist die beschrieben Lösung nicht responsive.
Das Bild wird bei verringerter Fensterbreite abgeschnitten.

Es gibt nun ein Update dazu.

[Andreas]

CSS-Lösung https://community.contao.org/de/show...l=1#post567232