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);
Lesezeichen