Contao-Camp 2024
Ergebnis 1 bis 8 von 8

Thema: Responsive Images & Caption

  1. #1
    Contao-Nutzer Avatar von Der Astronaut
    Registriert seit
    20.07.2012.
    Ort
    Weltall
    Beiträge
    241

    Standard 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
    Angehängte Grafiken Angehängte Grafiken

  2. #2
    Wandelndes Contao-Lexikon Avatar von tab
    Registriert seit
    22.10.2013.
    Beiträge
    10.060
    Contao-Projekt unterstützen

    Support Contao

    Standard

    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.

  3. #3
    Contao-Fan Avatar von dackelchen
    Registriert seit
    24.05.2011.
    Ort
    Kiel
    Beiträge
    672
    User beschenken
    Wunschliste
    Grüße Edgar
    Dackelalarm

  4. #4
    Contao-Nutzer Avatar von Der Astronaut
    Registriert seit
    20.07.2012.
    Ort
    Weltall
    Beiträge
    241

    Standard

    Zitat Zitat von tab Beitrag anzeigen
    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 Beitrag anzeigen
    Danke. Das kenne ich bereits. Mein Problem mit dem Caption wird da jedoch nicht thematisiert.

  5. #5
    Contao-Fan Avatar von dackelchen
    Registriert seit
    24.05.2011.
    Ort
    Kiel
    Beiträge
    672
    User beschenken
    Wunschliste

    Standard

    Edit: gelöscht, weil überflüssig
    Grüße Edgar
    Dackelalarm

  6. #6
    Contao-Nutzer Avatar von Coda
    Registriert seit
    18.08.2010.
    Ort
    Am Schreibtisch
    Beiträge
    31

    Standard jQuery Caption

    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);
    Geändert von Coda (13.02.2015 um 15:00 Uhr)

  7. #7
    Contao-Nutzer
    Registriert seit
    19.06.2009.
    Ort
    Allgäu
    Beiträge
    92

    Standard Danke für die Lösung....

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

  8. #8
    Contao-Nutzer
    Registriert seit
    10.06.2015.
    Beiträge
    70

    Standard Danke auch für die Lösung

    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.

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Lesezeichen

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •