Ergebnis 1 bis 26 von 26

Thema: Bug in Responsive Images?

  1. #1
    Contao-Nutzer Avatar von denniserdmann
    Registriert seit
    10.04.2013.
    Ort
    Kiel
    Beiträge
    73

    Standard Bug in Responsive Images?

    Moin,

    ich habe gestern mal die neue Funktion der Responsive Images in Contao 3.4 getestet und bin
    dabei auf folgendes Problem gestoßen:

    Ich lasse ein Bild in unterschiedlichen Größen, gleicher Bildausschnitt von Contao generieren (also nicht art-directed).
    Wenn ich das Sizes-Attribut leer lasse, werden wie erwartet meine, meine Bilder mit Skalierungsfaktor (1x, 2x) aufgezählt. Wenn ich das Sizes-Attribut ausfülle, werden, ebenfalls wie erwartet, die Bilder mit einer empfohlenen Weite ausgegeben (200w, 300w).

    Allerdings kommt die im Sizes-Attribut angegebene Weite(z.B. 50vw) nicht zum Tragen. Das hängt nach ersten Versuchen damit zusammen, dass bei der Ausgabe mit empfohlenen Weiten keine width="" und height="" zugewiesen werden dürften, siehe auch Spezifikation bei whatwg.

    Da das Thema noch sehr neu ist, könnte es natürlich auch sein, dass ich vergessen habe ein Feld auszufüllen o.ä. Den Haken im Seitenlayout für die Verwendung des respimage.js habe ich aber gesetzt. Der Fehler tritt sowohl im aktivierten Zustand als auch im dekaktivierten Zustand unter Safari und Chrome auf.

    Kann jemand den Fehler nachvollziehen?

    Grüße,
    Dennis

  2. #2
    Contao-Nutzer Avatar von RockSolid Themes
    Registriert seit
    29.05.2012.
    Beiträge
    205
    Partner-ID
    8945

    Standard

    Hallo Dennis,

    auch mit dem Sizes-Attribut dürfen width und height angegeben werden. Das Sizes-Attribut sollte (ungefähr) widerspiegeln wie breit das Bild vom CSS der Website dargestellt wird. Die Breite des Bildes sollte also übers CSS definiert werden. Zitat aus der Spezifikation: „These sizes do not necessarily have to match up exactly with the actual image width as specified in the CSS.“.

    Herzliche Grüße
    Dein RockSolid Themes Team

  3. #3
    Contao-Nutzer Avatar von denniserdmann
    Registriert seit
    10.04.2013.
    Ort
    Kiel
    Beiträge
    73

    Standard

    Moin RockSolid Themes Team,

    aber das würde, wenn ich euch richtig verstehe, ja heißen, dass ich die gleichen (oder sehr ähnliche) Anweisungen, die ich in das Sizes-Attribut schreibe, auch noch mal in meine CSS schreiben müsste. Wenn ich also Änderungen vornehme, diese immer an beiden Stellen vornehmen müsste.

    In allen Beispielen, die ich zu dem Thema gefunden habe, wurde auf width="" und height="" verzichtet. Man könnte sagen, dass das daran liegt, dass es ja nur Beispiele sind, aber warum macht man sich dann die Mühe und trägt bei allen Beispielen ein ALT-Attribut ein?

    Welche CSS-Anweisungen schreibt ihr denn, um in der Spec erwähntes Beispiel zum Laufen zu bringen?
    Code:
    <img sizes="(max-width: 30em) 100vw, (max-width: 50em) 50vw, calc(33vw - 100px)"
         srcset="swing-200.jpg 200w, swing-400.jpg 400w, swing-800.jpg 800w, swing-1600.jpg 1600w"
         src="swing-400.jpg" alt="Kettlebell Swing">
    Grüße und vielen Dank für eure Mühen,
    Dennis

  4. #4
    Contao-Nutzer Avatar von RockSolid Themes
    Registriert seit
    29.05.2012.
    Beiträge
    205
    Partner-ID
    8945

    Standard

    Da die meisten Browser das Sizes-Attribut nicht verstehen, sollte die Bildgröße über das CSS angegeben werden. Und da laut Spezifikation die Angaben im Sizes-Attribut nicht genau mit der tatsächlichen Größe übereinstimmen müssen, kann man dort eine einfachere Variante wählen.

    Für den von Contao verwendeten Polyfill wäre ein Plugin nötig damit die Bildgröße anhand des Sizes-Attributs gesetzt werden würde.

    Die CSS-Anweisungen für das Beispiel könnten z. B. so aussehen wenn Sich das Bild innerhalb von #content befindet:

    Code:
    * {
        box-sizing: border-box;
    }
    img {
        width: 100%;
        height: auto;
    }
    #content {
        width: 33%;
        padding: 0 50px;
    }
    @media (max-width: 50em) {
        #content {
            width: 50%;
            padding: 0;
        }
    }
    @media (max-width: 30em) {
        #content {
            width: 100%;
        }
    }
    Dennoch hast du recht, dass die Attribute width und height eigentlich weggelassen werden könnten. Denn entweder sie werden sowieso vom CSS überschrieben oder sie passen eventuell nicht zum aktuell angezeigten Bild. Dafür gibt es jetzt auch ein Issue auf GitHub

  5. #5
    Contao-Fan
    Registriert seit
    04.03.2010.
    Beiträge
    367

    Standard

    Hallo zusammen

    Versuche mich momentan auch mit den neuen Responsive-Funktionen in der Version 3.4.

    Dazu habe ich eine Logografik erstellt, welche in der Desktopversion eine Grösse von 220x80px besitzt.
    Dafür habe ich in den Themes eine Bildgrösse von eben den 220x80px und eine Pixeldichte/Skalierungsfaktor von 1x,2x angegeben. Dazu noch diese Mediaqueries-Anweisung > (max-width: 989px) 193x70px Pixeldichte/Skalierungsfaktor 1x,2x erstellt.

    Wenn ich das Logo bzw. Bild nun als Inhaltselement in den Content einfüge, funktioniert dies einwandfrei. Unter 989px wird das Logo in der kleineren Version (193x70px) dargestellt.

    Nun wollte ich das Logo mit einem Modul (Eigener HTML-Code) erstellen. Dafür habe ich den Quellcode des im Inhaltsbereich eingefügten Logos kopiert und ins Modul eingefügt.

    Beispiel:
    Code:
    <div class="logo">
    <a href="./">
    <picture>
    <source media="(max-width: 989px)" srcset="assets/images/3/logo-33ff4bf3.png 1x, assets/images/6/logo-5823a9c6.png 2x"></source>
    <img alt="" srcset="assets/images/9/logo-0b865c49.png 1x, assets/images/4/logo-d4ac0304.png 2x" src="assets/images/9/logo-0b865c49.png">
    </picture>
    </a>
    </div>
    Klappt einwandfrei. Sobald ich aber die Grafik, welche ich im Inhaltselement eingefügt habe lösche, verschwindet das Logo. Hat jemand eine Idee woran es liegen könnte?

    Gandalf

  6. #6
    Contao-Nutzer Avatar von denniserdmann
    Registriert seit
    10.04.2013.
    Ort
    Kiel
    Beiträge
    73

    Standard

    Zitat Zitat von RockSolid Themes Beitrag anzeigen
    Dennoch hast du recht, dass die Attribute width und height eigentlich weggelassen werden könnten. Denn entweder sie werden sowieso vom CSS überschrieben oder sie passen eventuell nicht zum aktuell angezeigten Bild. Dafür gibt es jetzt auch ein Issue auf GitHub
    Klasse,
    das sollte es anderen Contao-Nutzern auch einfacher machen, die neue Funktion zu verstehen. Es hat auch bei mir eine Weile gedauert, bis ich verstanden haben, dass width und height der Grund waren, warum mein Bild nicht vergrößert wurde.

    Grüße,
    Dennis

  7. #7
    Contao-Nutzer Avatar von denniserdmann
    Registriert seit
    10.04.2013.
    Ort
    Kiel
    Beiträge
    73

    Standard

    Zitat Zitat von Gandalf Beitrag anzeigen
    Sobald ich aber die Grafik, welche ich im Inhaltselement eingefügt habe lösche, verschwindet das Logo. Hat jemand eine Idee woran es liegen könnte?
    Hallo Gandalf,

    liegt es vielleicht daran, dass die von Contao erstellten Varianten des Logos nach dem Löschen des Elements auch wieder gelöscht werden?
    Falls ja, dann könntest du dein Logo auch einfach selbst in den entsprechenden Größen anlegen und den Pfad zum assest-Ordner ersetzen.

    Je nachdem, ob dein Logo nur die Größe ändert, oder ob sich auch das Motiv (bzw. der Bildausschnitt) ändert, kannst du dabei auch auf das PICTURE-Element
    verzichten und nur mit IMG + SRCSET arbeiten.

    Grüße,
    Dennis

  8. #8
    Contao-Fan
    Registriert seit
    04.03.2010.
    Beiträge
    367

    Standard

    Zitat Zitat von denniserdmann Beitrag anzeigen
    liegt es vielleicht daran, dass die von Contao erstellten Varianten des Logos nach dem Löschen des Elements auch wieder gelöscht werden?
    Falls ja, dann könntest du dein Logo auch einfach selbst in den entsprechenden Größen anlegen und den Pfad zum assest-Ordner ersetzen.
    Gute Idee! Danke! Nun funktioniert es wie gewünscht :-)

  9. #9
    Contao-Fan
    Registriert seit
    04.03.2010.
    Beiträge
    367

    Standard

    Hallo zusammen

    Habe für Thumnails eine Grösse von 300px x 220px als Bildgrösse definiert und dies beim Bild zugewiesen. Wo kann ich dann z.b. ein Exaktes Format (Mitte oben) definieren?
    In den Einstellungen kann ich wohl > Größenänderungsmodus > Exaktes Format auswählen, die Position aber nicht bestimmen. Fehlt da nicht die Auswahlmöglichkeit?

    Gandalf

  10. #10
    Contao-Fan
    Registriert seit
    04.03.2010.
    Beiträge
    367

    Standard

    Habs nun wohl selber herausgefunden. Dies geht wohl über das markieren des Bildes ;-)

  11. #11
    Contao-Nutzer Avatar von denniserdmann
    Registriert seit
    10.04.2013.
    Ort
    Kiel
    Beiträge
    73

    Standard

    Zitat Zitat von Gandalf Beitrag anzeigen
    Habs nun wohl selber herausgefunden. Dies geht wohl über das markieren des Bildes ;-)
    Ja genau.

    Für alle, die vor dem gleichen Problem stehen hier noch mal der Hinweis auf den sehr ausführlichen Artikel bei rocksolidthemes. Unter „Der Zoom-Faktor und der bedeutende Bereich von Bildern“ wird beschrieben, wie man den wichtigen Bereich eines Bildes direkt über die Dateiverwaltung auswählt.

  12. #12
    Contao-Fan
    Registriert seit
    04.03.2010.
    Beiträge
    367

    Standard

    Zitat Zitat von denniserdmann Beitrag anzeigen
    Je nachdem, ob dein Logo nur die Größe ändert, oder ob sich auch das Motiv (bzw. der Bildausschnitt) ändert, kannst du dabei auch auf das PICTURE-Element
    verzichten und nur mit IMG + SRCSET arbeiten.
    Was muss ich den machen um auf dieses PICTURE-Element zu verzichten? Ich habe unter den Einstellungen kein Bildgrössen-Media-Query eingetragen.
    Nur ein Bildformat welches folgendermassen aussieht:
    Breite=220 Höhe=80, Sizes-Attribut= (max-width: 989px) 193px 220px, Pixeldichte/Skalierungsfaktor=1x,2x

    Ziel wäre es, dass bis zu einer Viewportbreite von 989px das Logo 193px breit ist, drüber 220px.

    Eine Idee?

    Gandalf

  13. #13
    Contao-Nutzer Avatar von denniserdmann
    Registriert seit
    10.04.2013.
    Ort
    Kiel
    Beiträge
    73

    Standard

    Moin Gandalf,

    das hat bei mir auch ein wenig gedauert, bis ich die Zusammenhänge verstanden habe. Die Responsive Images kann man sich ja wie einen Artikel oder eine News vorstellen. Es gibt ein einen Umschlag (eine Bildgröße) und darin kannst du neue Bildgrößen-Mediaqueries anlegen. Diese Bildgrößen-Mediaqueries sind für das Picture-Element gedacht. Wenn du nur IMG + SRCSET verwenden willst, dann machst du alle Angaben über den Umschlag (also die Bildgröße, die du anlegst), mithilfe des SIZES-Attribut und Pixeldichte/Skalierungsfaktor.

    EDIT: Und wie von Rocksolid weiter oben erwähnt mithilfe von CSS.

    Grüße,
    Dennis

  14. #14
    Alter Contao-Hase Avatar von kischd
    Registriert seit
    25.06.2009.
    Ort
    Karlsruhe
    Beiträge
    1.128

    Standard

    Hallo Dennis,
    danke für deinen Artikel auf rocksolidthemes. Hat mir die Sache schon bisschen klarer gemacht.

    Trotzdem sind bei mir noch Fragen offen:

    Ich hab das Logo auf meiner Seite über ein hmtl-modul eingepflegt. Das bedeutet nun, dass ich srcset hier selbst im html schreiben und auch die einzelnen Bilder selbst erstellen muss oder?

    Ich hab mal ein Bild definiert: 100vw und 1x, 1,5x, 2x
    was ja bedeutet immer 100% und 3 Bildgrößen wurden erzeugt !?
    Query hab ich noch keine angelegt weil ich hier noch auf dem Schlauch stehe.

    Die stelle ich nur ein wenn ich es bei einer bestimmten max-width das Bild in ner anderen Größe haben will?

    Dabei verwirrt mich dieses Beispiel:
    (max-width: 600px) 100vw, (max-width: 900px) 60vw, 500px

    Heißt???
    bei 600px breite ist das Bild 100% breit; bei 900px Breite 60% breit alles größere 500px ?
    richtig verstanden?
    Gruß Mark

  15. #15
    Contao-Nutzer Avatar von denniserdmann
    Registriert seit
    10.04.2013.
    Ort
    Kiel
    Beiträge
    73

    Standard

    Zitat Zitat von kischd Beitrag anzeigen
    Hallo Dennis,
    danke für deinen Artikel auf rocksolidthemes. Hat mir die Sache schon bisschen klarer gemacht.
    Moin!
    Der Artikel ist gar nicht von mir ;-)

    Zitat Zitat von kischd Beitrag anzeigen
    Trotzdem sind bei mir noch Fragen offen:

    Ich hab das Logo auf meiner Seite über ein hmtl-modul eingepflegt. Das bedeutet nun, dass ich srcset hier selbst im html schreiben und auch die einzelnen Bilder selbst erstellen muss oder?
    Ja. Bisher habe ich das auch immer so gemacht, dass ich das Logo per HTML-Modul eingebunden habe. Durch Responsive Images könnte man jetzt mal darüber nachdenken, ob man das entweder über eine Erweiterung löst (gibt soweit ich das gesehen habe aber momentan noch keine) oder aber, ob man das Logo als Bild-Element in einer nichtsichtbaren Ressourcen-Seite anlegt und dann im Seitenlayout referenziert. Dann musst du Dir auch weniger Gedanken über die korrekte Schreibweise machen.

    Zitat Zitat von kischd Beitrag anzeigen
    Dabei verwirrt mich dieses Beispiel:
    (max-width: 600px) 100vw, (max-width: 900px) 60vw, 500px

    Heißt???
    bei 600px breite ist das Bild 100% breit; bei 900px Breite 60% breit alles größere 500px ?
    richtig verstanden?
    Fast. Bis 600px Viewport soll das Bild 100% breit sein, bei 601 - 900px soll das Bild 60% breit sein. Soweit richtig.
    Der letzte wert, die 500px greift für alle Viewports, die breiter als 900px sind.

    Wichtig: Immer dran denken, das Respimage-Script im Seitenlayout zu aktivieren!

    Grüße,
    Dennis

  16. #16
    Contao-Fan Avatar von Grossvater
    Registriert seit
    20.02.2013.
    Beiträge
    509

    Standard

    Warum wird das Fallback image (<img>) eigentlich nciht auf die vorgegebene Größe gerendert?

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

    Standard

    Erkläre dein Problem genauer. Wie so oft ist es bei deinen Posts so, dass man alles aus dir heraus kitzeln muss. Selbständigkeit ist wohl etwas fremdes für dich.

  18. #18
    Community-Moderatorin & Contao-Urgestein Avatar von mlweb
    Registriert seit
    10.07.2011.
    Beiträge
    7.080
    Contao-Projekt unterstützen

    Support Contao

    Standard

    @Spooky Ich glaube nicht, dass das mit fehlender Selbständigkeit zu tun hat.

    Es ist wohl mehr ein gewisses Maß an Betriebsblindheit, dass sich bei Fragenden und Helfenden gleichermaßen gelegentlich einschleicht.
    Ich habe Dir mit meinen Hinweisen geholfen und Du möchtest Dich bedanken?
    Unterstütze bitte das Contao-Projekt (Button Links)
    Weitere Spendenmöglichkeiten
    ------------------------------------------------------------------------------------------------------
    Contao-Dokumentation: Contao-Handbuch und Contao-Entwickler-Doku
    Contao-Online-Video-Kurse: Contao Academy
    Funktionalität erweitern: Contao-Erweiterungen

    Für Dinge die man mit html5 und css3 lösen kann, braucht man kein javascript.




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

    Standard

    Naja, lies mal seine anderen Posts. Die meisten sind einzelne Sätze, wo man nie den Eindruck hat, als würde er hinterfragen, was das Problem ist, wie man das Problem beschreiben kann, welche Informationen notwendig sein könnten etc.

  20. #20
    Contao-Fan Avatar von Grossvater
    Registriert seit
    20.02.2013.
    Beiträge
    509

    Standard

    Ich setze irrtumlich zu viel vorraus, sorry. Ich gelobe Besserung.

    Ich habe eine Bildgröße angelegt. Dort setze ich Breite von 480px und Höhe 320px. Unabhängig ob ich jetzt weitere "Bildgrößen-Media-Query"-Sources anlege, wird die Bildgröße des Fallbackimage nicht runtergerechnet.

    Siehe Bild:err.jpg
    Geändert von Grossvater (27.07.2016 um 13:07 Uhr)

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

    Standard

    Das, was du da im Screenshot zeigst ist das "currentSrc" aufgrund des x1200 Media Queries (vermutlich), nicht das src des img.

  22. #22
    Contao-Fan Avatar von Grossvater
    Registriert seit
    20.02.2013.
    Beiträge
    509

    Standard

    Ist es ok, wenn ich hier das Thema etwas ausweite? Oder soll ich ein neues Thema aufmachen?

    Aktuell habe ich das Problem, dass Bilder nicht Art-Directed (gezoomt) werden.
    Also der Browser will einfach nicht auf das gezoomte Bild wechseln.

    Die Bilder wurden alle korrekt resized.

    respimage.js ist im Seitenlayout aktiviert.

    Getestet in Chrome Version 51.0.2704.106 (64-bit), Safari Version 9.1.2 (11601.7.7)
    Geändert von Grossvater (24.08.2016 um 18:02 Uhr)

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

    Standard

    Poste einen Link zur Seite und alle relevanten Einstellungen.

  24. #24
    Contao-Fan Avatar von Grossvater
    Registriert seit
    20.02.2013.
    Beiträge
    509

    Standard

    Ich kann leider keinen Link senden, da das Projekt für die Öffentlichkeit zu sensibel ist.

    Kann ich dir per PM einen Link senden?

  25. #25
    Contao-Fan Avatar von Grossvater
    Registriert seit
    20.02.2013.
    Beiträge
    509

    Standard

    Hier schon einmal der HTML Output.
    Die Quellen sind alle richtig resized.
    Contao 3.5.15

    HTML-Code:
    <figure class="image_container">
      <picture>
        <!--[if IE 9]><video style="display: none;"><![endif]-->
              <source srcset="assets/images/1/bild-fe746a81.png" sizes="100vw" media="(max-width:992px)">
              <source srcset="assets/images/7/bild-e1969687.png" sizes="100vw" media="(max-width:768px)">
              <source srcset="assets/images/e/bild-5e359fee.png" sizes="100vw" media="(max-width:544px)">
            <!--[if IE 9]></video><![endif]-->
    
    <img src="files/static/Slider/bild.png" alt="">
      </picture>
    Ich habe das Bootstrap Framework dahinter eingebunden. JS Console wirft keine Fehler.
    Es ist seltsam, die gleichen Einstellungen habe ich auf anderer Seite erfolgreich am laufen.

    EDIT: Nachdem ich es mithilfe des Network Tab im Chrome Browser durchdebuggt habe, konnte ich sehen, dass die Einstellung ...
    Code:
              <source srcset="assets/images/1/bild-fe746a81.png" sizes="100vw" media="(max-width:992px)">
    ... die anderen Einstellungen irgendwie überschreibt. Diese habe ich deaktiviert, dann gings auch!
    Geändert von Grossvater (27.08.2016 um 09:21 Uhr)

  26. #26
    Contao-Nutzer Avatar von RockSolid Themes
    Registriert seit
    29.05.2012.
    Beiträge
    205
    Partner-ID
    8945

    Standard Source-Reihenfolge beachten

    In deinem HTML-Code sind die <source>-Elemente in der falschen Reihenfolge angeordnet, denn der Browser geht diese Liste von oben nach unten durch und nimmt den ersten Eintrag mit passendem Media-Query. In deinem Fall werden also die Media Queries (max-width:768px) und (max-width:544px) immer ignoriert da das erste <source>-Element mit (max-width:992px) vorher greift.

Aktive Benutzer

Aktive Benutzer

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

Berechtigungen

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