Bei längerer Bildunterschrift wird Text nicht rechts neben Bild angezeigt!

Hallo Leute,

irgendwas stimmt nicht, wenn man zu einem Text ein Bild einbaut und eine etwas längere Bildunterschrift dazu hat.

Ich hab einen Text mit einem Bild und einer längeren Bildunterschrift. Das Bild ist links angeordnet, so dass der Fließtext rechts oben beim Bild beginnen soll

Da aber jetzt die Bildunterschrift länger ist, beginnt der Text erst unter der Bildunterschrift. Ich hab das seit dem Update so. Zuvor hatte ich Contao 3.3.2 verwendet. Da war dies nicht so. Die Bildunterschrift war gleich lang, wie das Bild.

Zu sehen >hier<

Kann mir jemand sagen, wie ich das jetzt lösen kann?

LG, Andi

Das Problem ist, dass seit Contao 3.4.x die Breite des Bildes nicht mehr als inline-style für die figcaption ausgegeben wird. Dadurch nimmt die figcaption jetzt den maximal verfügbaren Platz ein. Siehe auch: https://community.contao.org/de/show...on-ohne-Breite

Ich wüsste dazu momentan nur eine Lösung mit JavaScript, etwa in dieser Art:

PHP-Code:

---

(function($)
{
    "use strict";

    var resizeCaption = function()
    {
        $('.image_container').each( function()
        {
            var $c = $(this);
            $c.find('figcaption').css('max-width',$c.find('img').width()+'px');
        });
    };

    $(document).ready( resizeCaption );
    $(window).load( resizeCaption );

})(jQuery); 


---

Danke für die Antwort. Der Code funktioniert jetzt.

Ich versteh nicht, warum das jetzt geändert wurde. Somit macht das Positionieren des Bildes keinen Sinn mehr, wenn die Bildunterschrift länger ist.

Wird hoffentlich wieder rückgängig gemacht.

LG, Andi

Habt ihr es mal hiermit versucht? -> https://gist.github.com/MoritzBuetze...da1e15745cf2b0

Hier noch mal mit ein paar mehr Infos dazu: http://stackoverflow.com/questions/1...ly-sized-image

Viele Grüße

Danke MacKP.

Ich hab jetzt auch die CSS-Lösung verwendet. Gefällt mir eh besser als Javascript.

Funktioniert gut, allerdings ist es jetzt nicht einwandfrei responsive, soweit ich das getestet habe... dadurch, dass figure display:table ist wird dann irgendwann das Bild abgeschnitten, wie habt ihr das gelöst? Ab einer bestimmten Größe kann man natürlich das display:table auch wieder aufheben, aber ist das der "optimale" Weg?

LG
Bennie

Ja, das stimmt, der von MacKP gepostete fix bzw. der von Stackoverflow ist eigentlich für responsive images ungeeignet. Siehe http://jsfiddle.net/xvcLknr2/ - max-width auf dem figure hat bei display:table keine Auswirkung.

Hm ja, passt nicht für alle Belange.. hier vllt noch eine Anregung (ganz unten) -> http://stackoverflow.com/questions/6...the-img-inside
Ich selber mache das für Bilder eher so, das ich da das Template anpasse und dann ein Spaltenset einbaue. Dann umfließt der Text das Bild zwar nicht (sondern ist entweder rechts oder links), man hat dadurch aber nicht solche Probleme. Und je nach dem, wie man dann Content Elemente nutzt (pro Absatz zum Beispiel) sieht das auch noch recht Ordentlich aus.

Viele Grüße

Der Author der original geposteten Lösung hat ein Update gemacht, jetzt funktioniert es auch unter FireFox und Internet Explorer :). Die Änderung ist, dass man width:100%; statt max-width:100%; beim img nimmt. Insgesamt und reduziert auf das Wesentlichste:

PHP-Code:

---

figure {
   display: table;
}

figure img {
    display: block;
    width: 100%;
}

figcaption {
    display: table-caption;
    caption-side: bottom;
} 


---

http://jsfiddle.net/a195rfqu/

Spooky,

danke für die Lösung die funktioniert bei mir schon mal halbwegs, dieses ganze responsive Thema geht mir langsam auf die Nerven.

Hab noch ein kleines Problem mit meiner zu langen Caption, diese wird nicht direkt am Ende des Bildes in der Zeile umgebrochen sondern ehr Wort für Wort.

Hast du da vielleicht eine Idee, Danke ?Anhang 15247

Habe den CSS Code wie oben eingegeben.

Gruß
Zwergenmeister

Link zur Seite?

Beim nächsten mal einfach mit den Developer Tools deines Browsers überprüfen, ob alles richtig ist ;).

PHP-Code:

---

figure {
    display:block;
} 


---

in deinem Standard.css überschreibt dein

PHP-Code:

---

figure {
    display:table;
} 


---

weil du es ganz am Anfang hingegeben hast.

Aber selbst wenn du das behebst, wirst du nicht glücklich werden. Habe gerade bemerkt, dass durch dieses CSS die figcaption keine Höhe des Elternelements mehr einnimmt. figure ist dadurch nur exakt so groß wie das img, aber nicht so groß wie img + figcaption...

Eine CSS only Lösung gibt es also noch immer nicht.

Danke Spooky,

ich werde Montag mal ein bisschen Zeit Opfern und mich wohl doch mit dem Thema auseinander setzen.
Habe jetzt erstmal ne Lösung mit der ich übers WE leben kann, danke.

Gruß
Zwergenmeister

Ich lege in meinen Templates die Breite des Bildes zusätzlich in figcaption mit rein, zusätzlich auch gern in figure selbst. Dadurch kann die Bildunterschrift nie breiter als das Bild werden:

Code:

---

<figcaption class="caption" style="width:<?php echo $this->arrSize[0]; ?>px"><?php echo $this->caption; ?></figcaption>

---

Zitat:

---

Zitat von Samson1964

Ich lege in meinen Templates die Breite des Bildes zusätzlich in figcaption mit rein, zusätzlich auch gern in figure selbst. Dadurch kann die Bildunterschrift nie breiter als das Bild werden:

Code:

---

<figcaption class="caption" style="width:<?php echo $this->arrSize[0]; ?>px"><?php echo $this->caption; ?></figcaption>

---

---

Dass das mit der neuen Image Size problematisch wird, weißt Du sicherlich, siehe auch 7351

Die englischen Tickets überlese ich meistens (mangels guter Sprachkenntnisse). Bisher habe ich keine Probleme, zumindest in der 3.2er Serie. An der halte ich fest bis die nächste LTS mit 3.5 kommt.

In Contao 3.2 musst du das nicht extra machen, da ist es von Haus aus noch drin. Es wurde mit 3.4 entfernt, wegen den Responsive Images.

Hier ist eine Lösungsmöglichkeit mit jQuery für das responsive Captionbreiten-Problem in Contao 3.4.

Für CSS-Lösung siehe hier https://community.contao.org/de/show...l=1#post567232