Responsive Images & Caption

Tach zusammen,

ich habe das Problem, dass sich bei der Verwendung des Polyfills (Responsive Images) das dazugehörige "Caption" (ce_text) nicht an die dynamischen Bildgrößen anpasst.

Das Ausgangsbild hat die Maße 300px für die Desktop-Version bzw. ab 960px. Als Stufen für das Polyfill habe ich folgende Einträge:

(max-width: 320px) 150x0
(max-width: 640px) 200x0
(max-width: 959px) 250x0

Ist es möglich, dass sich Caption stets den Maßen der dynamischen Bilder anpasst? Also in meinem Fall 150px, 200px und 250px. Stattdessen bleiben stets die 300px für das Caption des Haupteintrags im Quelltext stehen. Das Bild passt sich an und übrig bleibt dann eine weiße unschöne Lücke .

Die beiden angehängten Screenshots zeigen das Problem:
2015-01-04_polyfill-caption_01.jpg = Desktop Version (korrekt)
2015-01-04_polyfill-caption_02.jpg = mobile Version (Fehler)


Gebt bitte Bescheid, wenn ihr weitere Infos benötigt.

Vielen Dank im Voraus!


Beste Grüße
Sebastian

Ich habe zwar diese neuen Funktionen in 3.4 noch nicht benutzt, aber ich gehe davon aus, dass man alles - ausser den Bildern - selbst per CSS (mit media-queries) anpassen muss.

http://rocksolidthemes.com/de/contao...picture-contao

Da wird das ganz gut erklärt.

Zitat:

---

Zitat von tab

Ich habe zwar diese neuen Funktionen in 3.4 noch nicht benutzt, aber ich gehe davon aus, dass man alles - ausser den Bildern - selbst per CSS (mit media-queries) anpassen muss.

---

Das ist die Lösung! Danke :)

Zur Info für andere: Man muss das style="width:<?php echo $this->arrSize[0]; ?>px" im figcaption-Tag (ce_text) entfernen und dann im CSS die Media-Queries angeben, die man in Contao für die Responsive-Bilder angelegt hat.

Zitat:

---

Zitat von dackelchen

http://rocksolidthemes.com/de/contao...picture-contao

Da wird das ganz gut erklärt.

---

Danke. Das kenne ich bereits. Mein Problem mit dem Caption wird da jedoch nicht thematisiert.

Edit: gelöscht, weil überflüssig

Das gleiche Problem hatte ich auch gerade (Contao 3.4.3). Da ich allerdings bei meinem Layout die Anpassung der Caption nicht einfach durch Media Queries lösen konnte, habe ich eine Lösung mit jQuery gebastelt.

Das Script arbeitet alle vorhandenen image_container mit einer figcaption durch, schnappt sich die Breite vom jeweiligen Bild und verpasst der dazugehörigen Bildunterschrift die ermittelte Breite.

Je nach Layout müsste die Zeile 12 geändert werden. Der Wert innerWidth() kann auch durch outerWidth() oder width() angepasst werden.

Das Script kann im Seitentemplate (fe_page.html5) am Seitenende eingefügt werden (umgeben von <script></script>) oder als externes Script geladen werden (z.B. mit <script src="files/js/jquery.caption.js"></script>).
jQuery sollte natürlich im Backend aktiviert sein.

Sollte die Bildunterschrift ein padding-left und/oder padding-right haben, müssten hier Pixelwerte verwendet werden. Der Padding-Wert wird dann berücksichtigt.

HTML-Code:

---

(function($) {


function caption() {

        var captionImgWidth = 0;
        var captionPadding = 0;

        $('figure.image_container figcaption').each(function(){
               
                captionPadding = parseInt($(this).css('paddingLeft')) + parseInt($(this).css('paddingRight'));
                captionImgWidth = $(this).parent().find('img').innerWidth() - captionPadding;
                //innerWidth(), outerWidth() or just width() - depends on your layout
               
                //alert(captionImgWidth);
               
                $(this).css('width',captionImgWidth + 'px');
               
        });

}


$(window).load(caption);

$(window).resize(caption);


})(jQuery);

---

Im Browser habe ich bei der Berechnung der richtigen Breite beim Resize manchmal eine Abweichung von 1px. Ansonsten klappt das damit ganz gut.

Aus diesem Grund, hier eine weitere Version:

Mit diesem Script gibt es den 1px-Versatz in der Breite zwischen Bild und Bildunterschrift nicht mehr. Bild und Bildunterschrift haben optisch immer die gleiche Breite, allerdings wird das gesamte Element 1px schmaler.

HTML-Code:

---

(function($) {


function caption() {

        var captionImgWidth = 0;
        var captionPadding = 0;

        $('figure.image_container figcaption').each(function(){
       
                var img = $(this).parent().find('img');
       
                // reset img width
                img.css('width', '');
               
                captionPadding = parseInt($(this).css('paddingLeft')) + parseInt($(this).css('paddingRight'));
                captionImgWidth = img.innerWidth() - captionPadding -1;
                //innerWidth(), outerWidth() or just width() - depends on your layout
               
                //alert(captionImgWidth);
               
                $(this).css('width',captionImgWidth + 'px');
                img.css('width',captionImgWidth + captionPadding + 'px');
               
        });

}


$(window).load(caption);

$(window).resize(caption);


})(jQuery);

---

habe mir gerade die Finger wund gesucht!
Passt perfekt. Merci!

Dank an Coda. Vor allem auch der einfache klare Hinweis, wo und wie das hingehört. Das bekomme ich bei allen guten Tips im Forum leider oft nicht. Ich bin quasi Contao-Neuling ohne Programmierkenntnisse und zimmere gerade meine zweite Contao-Seite zusammen (diesmal mit der 4.4LTS). Es scheint also auch im 4er zu funktionieren. Muss das dann final mit meinem Theme noch querprüfen.