Contao-Camp 2024
Ergebnis 1 bis 32 von 32

Thema: 4.4.46 responsive images funktioniert nicht mehr

  1. #1
    Contao-Nutzer
    Registriert seit
    13.01.2012.
    Ort
    Ludwigsburg
    Beiträge
    70
    Partner-ID
    11284
    Contao-Projekt unterstützen

    Support Contao

    Standard 4.4.46 responsive images funktioniert nicht mehr

    Seit dem Update auf 4.4.46 funktioniert bei mindestens zwei Webauftritten (hab noch nicht alle durch) die responsive images Bildanpassung nicht mehr.
    Es wird auch in großen Fenstern das kleine Bild angezeigt.

    Das hab ich bei »Theme / Bildgrößen« eingetragen:

    Bildgröße: 760

    Sizes-Attribut:
    (max-width: 760px) 760px, (min-width:761px) 1140px

    Pixeldichte/Skalierungsfaktor:
    1x, 1.5x

    Das Image-Polyfill wird nach wie vor geladen.


    Wenn ich Bildgröße 1140 eingebe, bekomme ich zwar in großen Fenstern 1140px breite Bilder gezeigt, aber es wird in kleinen Fenster kein kleines Bild erzeugt. Somit werden immer die großen Bilddateien übertragen und das soll ja nicht sein.

    Weiß jemand Rat?

  2. #2
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    33.878
    Partner-ID
    10107

    Standard

    Poste einen Link zur Seite.

  3. #3
    Contao-Nutzer
    Registriert seit
    13.01.2012.
    Ort
    Ludwigsburg
    Beiträge
    70
    Partner-ID
    11284
    Contao-Projekt unterstützen

    Support Contao

  4. #4
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    33.878
    Partner-ID
    10107

    Standard

    Auf der Seite sehe ich kein Bild mit der von dir angegebenen Bildgröße.

  5. #5
    Contao-Nutzer
    Registriert seit
    13.01.2012.
    Ort
    Ludwigsburg
    Beiträge
    70
    Partner-ID
    11284
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Das Bannerbild ist jetzt 760px breit, sollte aber auf dem Desktop 1.5x 760px = 1140px breit sein.

  6. #6
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    33.878
    Partner-ID
    10107

    Standard

    Wie gesagt, so eines sehe ich nicht. Meinst du vielleicht das hier:
    HTML-Code:
    <img src="assets/images/7/TV-Vaihingen_Bildleiste-Mitgliedschaftneu-0b91a7bf.jpg" srcset="assets/images/7/TV-Vaihingen_Bildleiste-Mitgliedschaftneu-0b91a7bf.jpg 780w, assets/images/e/TV-Vaihingen_Bildleiste-Mitgliedschaftneu-f673835a.jpg 1170w" sizes="(max-width: 780px) 780px, (min-width:781px) 1170px" width="780" height="163" alt="" itemprop="image">
    ?

    Poste einen Screenshot deiner Bildgrößeneinstellung.

  7. #7
    Contao-Nutzer
    Registriert seit
    13.01.2012.
    Ort
    Ludwigsburg
    Beiträge
    70
    Partner-ID
    11284
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Ach stimmt, das ist das andere Projekt mit dem gleichen Problem
    Bildgröße 780px und 1170px sollte es sein

    bildgroesse-tvv.png

  8. #8
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    33.878
    Partner-ID
    10107

  9. #9
    Contao-Nutzer
    Registriert seit
    13.01.2012.
    Ort
    Ludwigsburg
    Beiträge
    70
    Partner-ID
    11284
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Danke, Fritz!
    Wenn ich das richtig verstehe, ist es eine Fehlfunktion und du hast sie jetzt bei Github gepostet.
    Stimmt's?

  10. #10
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    33.878
    Partner-ID
    10107

    Standard

    Ob es eine Fehlfunktion ist oder nicht ist noch offen. Auf GitHub kann das nun diskutiert werden.

  11. #11
    Contao-Nutzer
    Registriert seit
    06.09.2016.
    Beiträge
    125

    Standard

    Als schnellen Workaround würde folgender Code im Template "picture_default" alle width und height-Angaben löschen (deshalb unbedingt auf Nebenwirkungen testen, auf meinen Seiten habe ich jedoch keine festgestellt!) und damit das Problem beheben:

    PHP-Code:
    <?php if ($this->sources): ?>
      <picture>
        <!--[if IE 9]><video style="display: none;"><![endif]-->
        <?php foreach ($this->sources as $source): ?>
          <source srcset="<?= $source['srcset'?>"<?php if (!empty($source['sizes'])) echo ' sizes="' $source['sizes'] . '"'?><?php if (!empty($source['media'])) echo ' media="' $source['media'] . '"'?>>
        <?php endforeach; ?>
        <!--[if IE 9]></video><![endif]-->
    <?php endif; ?>

    <img src="<?= $this->img['src'?>"<?php if ($this->img['srcset'] !== $this->img['src']) echo ' srcset="' $this->img['srcset'] . '"'?><?php if (!empty($this->img['sizes'])) echo ' sizes="' $this->img['sizes'] . '"'?> alt="<?= $this->alt ?>"<?php if ($this->title) echo ' title="' $this->title '"'?><?php if ($this->class || !empty($this->img['class'])) echo ' class="' trim($this->class' ' $this->img['class']) . '"'?><?= $this->attributes ?> itemprop="image">

    <?php if ($this->sources): ?>
      </picture>
    <?php endif; ?>

    <?php if ($this->sources || $this->img['src'] !== $this->img['srcset']): ?>
      <script>
        window.respimage && window.respimage({
          elements: [document.images[document.images.length - 1]]
        });
      </script>
    <?php endif; ?>
    Interessanterweise erscheint das neue Verhalten bei mir nur bei Einzelbildern, nicht bei Bildergalerien...

  12. #12
    Contao-Nutzer
    Registriert seit
    13.01.2012.
    Ort
    Ludwigsburg
    Beiträge
    70
    Partner-ID
    11284
    Contao-Projekt unterstützen

    Support Contao

    Standard Klappt!

    Danke schön,

    bei dem oben genannten Projekt hat der Workaround mit dem veränderten picture_default-Template geholfen!

    Jetzt probiere ich ihn bei weiteren Projekten aus …

    Viele Grüße
    Holger

  13. #13
    Contao-Nutzer
    Registriert seit
    06.01.2014.
    Beiträge
    33

    Standard Kann den Bug bestätigen

    Auch bei mir auf einer Xampp-Installation seit Update auf 4.4.46 dasselbe Problem.
    Mit dem Workaround von Physiklehrer #11 klappt es auch bei mir. Mit der auf Github diskutierte Variante mit img {width:auto; height:auto;} wird einzig das kleinste Bild in die richtige Grösse resized (aufgebläht).

  14. #14
    Contao-Urgestein Avatar von Franko
    Registriert seit
    22.06.2009.
    Beiträge
    1.503
    Partner-ID
    6122

    Standard

    Eine Nachfrage:
    Angaben im Issue sind gültig für die 4.8 und auch für die 4.9 - Korrekt?
    Also mit erforderlichen CSS: img { width: auto; height: auto; }

    Zum Verständnis.
    Warum werden width/height überhaupt gesetzt?
    Hinsichtlich eines korrekten Aspect-Ratio habe ich dies bisher, sofern benötigt, via css gesetzt - Beispiel.

    Danke
    Freelancer, Digital Design Enthusiast, Contao Aficionado and Tutorial Junkie @MoinFranko - Carpe diem ...

  15. #15
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    33.878
    Partner-ID
    10107

    Standard

    Zitat Zitat von Franko Beitrag anzeigen
    Hinsichtlich eines korrekten Aspect-Ratio habe ich dies bisher, sofern benötigt, via css gesetzt - Beispiel.
    Das setzt du bei jedem Bild? Kann ich mir nicht vorstellen .

    Die width/height wird gesetzt, damit der Browser weiß, wie groß das Bild sein wird, ohne zu wissen, wie groß das Bild ist.

  16. #16
    Contao-Urgestein Avatar von Franko
    Registriert seit
    22.06.2009.
    Beiträge
    1.503
    Partner-ID
    6122

    Standard

    Zitat Zitat von Spooky Beitrag anzeigen
    Das setzt du bei jedem Bild? Kann ich mir nicht vorstellen .
    Nicht wirklich :-) halt sofern explizit benötigt ...

    Zitat Zitat von Spooky Beitrag anzeigen
    Die width/height wird gesetzt, damit der Browser weiß, wie groß das Bild sein wird, ohne zu wissen, wie groß das Bild ist.
    Ok, ich raffs dennoch nicht.
    Wenn ich die bisherige Intention richtig verstanden habe - s.: https://blog.kulturbanause.de/2014/0...zes-adaptive/:
    Man gibt mehrere Image Dateien/Bildgrößen vor (generiert Contao für uns).
    Abhängig von den vorgegebenen Media Queries entscheidet der Browser selbstständig (annähernd) welche Image Datei dann tatsächlich herangezogen werden soll.

    Letzteres wird doch über die gesetzte width/height Angabe quasi wieder ausgehebelt -
    um dann mit img { width: auto; height: auto; } wieder entgegenzuwirken???
    Freelancer, Digital Design Enthusiast, Contao Aficionado and Tutorial Junkie @MoinFranko - Carpe diem ...

  17. #17
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    33.878
    Partner-ID
    10107

    Standard

    Es geht hier einfach um die Attribute width/height am <img>. Der Browser weiß ja erst, wie groß das Bild ist, wenn er das Bild, das im src Attribut hinterlegt ist, heruntergeladen hat. Dadurch nimmt das <img> initial nicht den Platz ein, den es einnehmen sollte. Wenn du die richtige Bildgröße jedoch, wie vorgesehen, per width/height Attribut semantisch korrekt angibst, dann kann der Browser die richtige Größe für das DOM Element ermitteln, bevor das eigentliche Bild fertig geladen wurde.

  18. #18
    Contao-Urgestein Avatar von Franko
    Registriert seit
    22.06.2009.
    Beiträge
    1.503
    Partner-ID
    6122

    Standard

    Danke.
    Hm, ich muss es wohl mal genauer probieren :-)

    Bisher hatte ich nie Breitenangaben gesetzt.
    Mit img { width: 100%; height: auto;} wurde mir zusammen mit den srcset's dann im Chrome, passend zum aktuellen Viewport / übergeordneter container/div breite,
    die passenden und verfügbaren images ausgewählt/gesetzt (DevTools using currentSrc Info).

    Contao setzt mir jetzt aber doch immer feste width/height Werte - unabhängig vom tatsächlich Viewport???
    Freelancer, Digital Design Enthusiast, Contao Aficionado and Tutorial Junkie @MoinFranko - Carpe diem ...

  19. #19
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    33.878
    Partner-ID
    10107

    Standard

    Zitat Zitat von Franko Beitrag anzeigen
    Bisher hatte ich nie Breitenangaben gesetzt.
    Du meinst, Contao hat das bisher nie gemacht . Oder meinst du in eigenem, statischen HTML?


    Zitat Zitat von Franko Beitrag anzeigen
    Contao setzt mir jetzt aber doch immer feste width/height Werte - unabhängig vom tatsächlich Viewport???
    Das hat ja nichts mit dem Viewport zu tun? Hier geht es um reines HTML.

  20. #20
    Contao-Urgestein Avatar von Franko
    Registriert seit
    22.06.2009.
    Beiträge
    1.503
    Partner-ID
    6122

    Standard

    Nein, in den Bildgrößeneinstellungen habe ich nie Breite/Höhe gesetzt,
    lediglich "Pixeldichte/Skalierungsfaktur" und Queries in "Sizes-Attribut" ...
    Freelancer, Digital Design Enthusiast, Contao Aficionado and Tutorial Junkie @MoinFranko - Carpe diem ...

  21. #21
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    33.878
    Partner-ID
    10107

    Standard

    Du hast dort gar keine Größe angegeben? Das funktioniert?

  22. #22
    Contao-Urgestein Avatar von Franko
    Registriert seit
    22.06.2009.
    Beiträge
    1.503
    Partner-ID
    6122

    Standard

    Zitat Zitat von Spooky Beitrag anzeigen
    Du hast dort gar keine Größe angegeben? Das funktioniert?
    Naja in der 4.4.x. Die Ausgabe war entsprechend Kulturbanause/Rocksolid Blog dann wie erwartet - bzw.:

    Mit img { width: 100%; height: auto;},
    verschiedenen Image Dateien/Größen anhand der Contao "Pixeldichte/Skalierungsfaktur" Vorgaben (0.5x, 1x, 1.5x, 2x etc.)
    und den Media Queries aus "Sizes-Attribut"
    kann ich mit z.B. mit den Chrome DevTools nachvollziehen welche Image Datei der Browser, abhängig von der tatsächlichen Viewport Breite - korrekt - herangezogen hat.

    Jetzt funkt mir Contao immer das width/height mit rein -
    und mit den CSS Workaround aus dem Issue gehts ja - nur Wozu?
    Verhinderung eines Rerendern anhand der width/height Werte schön und gut - aber sollten die nicht dann passend den gesetzten Media Queries erfolgen...

    Wie gesagt - steh gerade vom Verständnis ein wenig neben mir ... :-)
    Freelancer, Digital Design Enthusiast, Contao Aficionado and Tutorial Junkie @MoinFranko - Carpe diem ...

  23. #23
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    33.878
    Partner-ID
    10107

    Standard

    Wie kann Contao verschiedene Bildgrößen ausgeben, wenn du gar keine Bildgröße angegeben hast? Verstehe dein Setup nicht ganz.

  24. #24
    Contao-Urgestein Avatar von Franko
    Registriert seit
    22.06.2009.
    Beiträge
    1.503
    Partner-ID
    6122

    Standard

    Zitat Zitat von Spooky Beitrag anzeigen
    Wie kann Contao verschiedene Bildgrößen ausgeben, wenn du gar keine Bildgröße angegeben hast? Verstehe dein Setup nicht ganz.
    Wieso Contao? Das bleibt doch dem Browser überlassen (unless with fixed width/height params)???
    Ich werde es mit einer frischen 4.8/4.9 zeitnah ausprobieren.
    Bis dato hatte ich mich z.B. strict an folgende Beispiele (rocksolid blog) gehalten:

    Unterschiedliche Auflösungen für verschiedene Pixeldichten (z. B. „Retina“) können eingerichtet werden, indem man in den Bildgrößen-Einstellungen die gewünschten Pixeldichten einträgt. Wenn Sie für eine Größe von 100x100 die Pixeldichten 0.5x, 1x, 2x vergeben, wird automatisch für jedes Bild, das dieser Größe zugeordnet ist ein 50x50, 100x100 und 200x200 großes Bild erzeugt.

    Um zusätzlich verschieden breite Bildschirme zu unterstützen, muss das sizes-Attribut in den Einstellungen vergeben werden. Diese Einstellung teilt dem Browser mit, in welcher Breite das Bild angezeigt wird.

    Wenn das Bild immer in voller Breite des Fensters angezeigt wird, tragen Sie 100vw ein. Wenn ein Bild z. B. auf kleineren Bildschirmen in voller Breite angezeigt wird und in größeren immer 500 Pixel breit ist, tragen Sie (max-width: 600px) 100vw, 500px ein. Auch mehrere Media-Queries können verwendet werden z. B. (max-width: 600px) 100vw, (max-width: 900px) 60vw, 500px.

    Die Einstellung folgt dem Schema: Media-Query in Klammern (optional), gefolgt von Wert und Einheit. Mehrere Angaben getrennt durch Komma.

    Wenn nun bei einer 100x100-Bildgröße unter Sizes 100vw und unter Pixeldichte 0.5x, 1x, 2x eingestellt ist, erzeugt Contao ein 50x50, 100x100 und 200x200 großes Bild und der Browser entscheidet anhand der Sizes-Einstellung und der Daten des Bildschirms welches dieser Bilder geladen wird.
    Freelancer, Digital Design Enthusiast, Contao Aficionado and Tutorial Junkie @MoinFranko - Carpe diem ...

  25. #25
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    33.878
    Partner-ID
    10107

    Standard

    Zitat Zitat von Franko Beitrag anzeigen
    Wieso Contao? Das bleibt doch dem Browser überlassen (unless with fixed width/height params)???
    Contao muss aber den entsprechenden HTML Output aber erst mal produzieren. Wenn du weder eine Breite noch eine Höhe angibst, aber dann so etwas wie 0.5x, 2x angibst, was genau gibt Contao dann aus? Contao hat ja dann keine Information darüber, welche Bildgrößen überhaupt generiert werden sollen. Oder nimmt Contao in diesem Fall die Größe des Originalbildes?

  26. #26
    Contao-Urgestein Avatar von Franko
    Registriert seit
    22.06.2009.
    Beiträge
    1.503
    Partner-ID
    6122

    Standard

    Zitat Zitat von Spooky Beitrag anzeigen
    Contao muss aber den entsprechenden HTML Output aber erst mal produzieren. Wenn du weder eine Breite noch eine Höhe angibst, aber dann so etwas wie 0.5x, 2x angibst, was genau gibt Contao dann aus? Contao hat ja dann keine Information darüber, welche Bildgrößen überhaupt generiert werden sollen. Oder nimmt Contao in diesem Fall die Größe des Originalbildes?
    Äh,
    Wenn nun bei einer 100x100-Bildgröße unter Sizes 100vw und unter Pixeldichte 0.5x, 1x, 2x eingestellt ist, erzeugt Contao ein 50x50, 100x100 und 200x200 großes Bild und der Browser entscheidet anhand der Sizes-Einstellung und der Daten des Bildschirms welches dieser Bilder geladen wird.
    Also der Browser entscheidet letztlich - hatte ich immer so verstanden.
    Wenn ich Images in einem 3 Spalten Grid darstelle, bei kleineren Bildschirmen ein 2 Spalten Grid und auf minimaler Breite eine 1 Spalten Grid -
    und dann dies entsprechend in den Media Queries vorgebe entscheidet der Browser welche zur Verfügung stehende Image Datei aus dem srcset der jeweiligen aktuellen Container/Grid Breite am nahesten kommt
    und zieht dann diese Datei heran ...
    Freelancer, Digital Design Enthusiast, Contao Aficionado and Tutorial Junkie @MoinFranko - Carpe diem ...

  27. #27
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    33.878
    Partner-ID
    10107

    Standard

    Dann hast du aber bei der Bildgröße 100x100 eingetragen. Ursprünglich hast du ja behauptet, du gibst keine Bildgröße an.

  28. #28
    Contao-Urgestein Avatar von Franko
    Registriert seit
    22.06.2009.
    Beiträge
    1.503
    Partner-ID
    6122

    Standard

    Zitat Zitat von Spooky Beitrag anzeigen
    Dann hast du aber bei der Bildgröße 100x100 eingetragen. Ursprünglich hast du ja behauptet, du gibst keine Bildgröße an.
    Hm, eigentlich nicht.
    Ich versuche es lokal mit versch. Bildgrößen Einstellungen nachzuvollziehen (z.B. ala https://jsfiddle.net/jmvq1sc8/) und melde mich dann gegebenenfalls ...
    Danke für die Geduld ...
    Freelancer, Digital Design Enthusiast, Contao Aficionado and Tutorial Junkie @MoinFranko - Carpe diem ...

  29. #29
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    33.878
    Partner-ID
    10107

    Standard

    Poste einen Screenshot deiner Bildgrößeneinstellung und poste den resultierenden HTML Code.

  30. #30
    Contao-Urgestein Avatar von Franko
    Registriert seit
    22.06.2009.
    Beiträge
    1.503
    Partner-ID
    6122

    Standard

    Zitat Zitat von Spooky Beitrag anzeigen
    Poste einen Screenshot deiner Bildgrößeneinstellung und poste den resultierenden HTML Code.
    Ok, mach ich dann -
    Danke Spooky
    Freelancer, Digital Design Enthusiast, Contao Aficionado and Tutorial Junkie @MoinFranko - Carpe diem ...

  31. #31
    Contao-Urgestein Avatar von Franko
    Registriert seit
    22.06.2009.
    Beiträge
    1.503
    Partner-ID
    6122

    Standard

    Sorry,
    alles Quatch - in den Bildgrößen hatte ich auch die Breitenangabe gesetzt - sonst wird ja gar kein srcset ausgegeben.
    (kam wohl durcheinander weil ich früher nur srcset mit x Werten gesetzt/ausgeben hatte)

    Klappt in der 4.8 zusammen mit eingetragenen Sizes-Attribut (zur Ausgabe: srcset mit w Angaben).
    Und dann auch noch mit der webp Konvertierung - Super...

    Nochmals Sorry
    Freelancer, Digital Design Enthusiast, Contao Aficionado and Tutorial Junkie @MoinFranko - Carpe diem ...

  32. #32
    Contao-Nutzer Avatar von Dillinja
    Registriert seit
    13.07.2009.
    Ort
    Dresden
    Beiträge
    109

    Standard

    Hallo Leute,
    ich würde dieses Thema gern noch einmal ausgraben, da es mir gerade untergekommen ist.

    Folgende Diskussion habe ich auch schon gelesen: https://github.com/contao/contao/issues/937

    Das Sizes-Attribut in den Bildgrößen verwende ich nicht, height und width: auto lösen auch mein Problem.

    Aber ich habe über die Media-Queries verschiedene Bildgrößen angelegt, welche sich auch im Seitenverhältnis unterscheiden. Klar ist mir auch die height und width Angabe im <img> Tag, die stehen ja auch richtig im Source-Set. Im <img> Tag stehen aber immer die Original-Abmessungen oder die Angaben aus der Bildgröße. Aber nicht die aus den Media-Queries.

    Bildschirmfoto 2021-06-23 um 11.53.01.png

    ohne CSS:
    HTML-Code:
    img{
      height:auto;
      width:auto;
    }
    wird das kleine Bild dann in die Dimensionen des Originals gezerrt... ist das so gedacht?

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
  •