html5 picture und srcset tags verwenden

    Hallo miteinander,


    ich wollte wissen ob von euch jemand srcset und picture tag in Joomla verwendet und das problemlos möglich ist?


    Ich würde gerne unterschiedliche Bilder auf unterschiedlichen viewports laden und habe in einem benutzerdefinierten Modul (JCE und anderen Editoren) folgendes eingefügt
    (ohne Erfolg - bis auf das alt attribut kein Bild zu sehen).



    Code
    img {display: block; margin: 0 auto;}

    in meiner css.
    bg.png ist 940px und sm.png 556px groß.


    Danke!


    Viele Grüße

  • Zum hilfreichsten Beitrag springen

    Mit "generiert" meinte ich, dass der Abschnitt von irgendeiner extension erzeugt wird oder ob du in direkt einträgst, und wo.
    Das ist wieder einer dieser Fälle wo ein link zum Problem überaus nützlich wäre, damit man sich den Quellcode anschauen kann.


    Erste Frage: wo ist das Falllback-Bild?
    Das müsste in jedem Fall gezeigt werden, wenn keine der mdiea-Angaben greift.
    Wenn anstelle des Fallback-bildes, wie bei dir, ein alt-text kommt, dann wurde das Bild einfach nicht gefunden. Schau doch mal im Quelltext was da steht. Kopier dir dann den link direkt heraus und prüfe, ob der Pfad stimmt


    Aber das ist echt ein interessantes Thema - ich setze es gerade ein und bekomme auch nur das fallback bild zu sehen. Obwohl ich die media-Angaben auf realistische Werte gesetzt habe. ;)

    Mit realistischen Breitenangaben (und zwar max-width, nicht min-width) und korrekten Pfaden funktioniert es sehr gut. Schau dir diese kleine Testseite an. Verkleinere die Darstellung mit strg+shift+m und verändere die Breite.


    Ich werde die Testseite wieder deaktivieren. Daher hier mein code:

    Code
    <picture> 
        <source srcset="images/header/img-s.jpg" media="(max-width: 556px)"> 
        <source srcset="images/header/img-m.jpg" media="(max-width: 1200px)"> 
    <!---Fallback---> 
        <img src="images/header/img.jpg" alt="myimg"> 
    </picture>

    Hallo,


    hier der Link zur Seite. Funktioniert noch nicht mit den verwendeten Angaben.
    Habe zur Demozwecken die Standardbilder des Protostars verwendet.


    [
    an die administratoren bitte das löschen was in [] steht nachdem das thema gelöst ist


    firstlady: link entfernt


    ]


    Weiß woran es liegen könnte?


    Vielen Dank.


    Gruß

    Hallo knewbee,


    firebug zeigt mir:


    Code
    <picture> 
        <source media="(max-width: 556px)" srcset="images/headers/windows.jpg"></source> 
        <source media="(max-width: 1200px)" srcset="images/headers/maples.jpg"></source> 
        <img alt="myfallbackimg" src="/kunde2/images/headers/raindrops.jpg">
    </picture>


    und wenn ich media austausche mit: srcset - dann sind die Regentropfen da.

    Zitat von firstlady

    Du hast eine mehrsprachige Seite. Der request wird umgewandet in -- index.php/de/images/headers/maples.jpg
    und hier heisst es: Kategorie nicht gefunden.


    Hallo,


    vielen Dank. Hat das mit meiner ursprünglichen Frage zu tun und damit dass die Bilder nicht ausgetauscht werden, oder hast du das nur vollständigkeitshalber (auf den post von christine2) erwähnt? Die Regentropfen werden ja angezeigt auf der Seite, aber nicht die maples und die windows die mit srcset auf den vw geladen werden sollten.

    Es hat mit deiner ursprünglichen Frage zu tun.


    Denn diese Tags <picture> und <source> sind html5 und können in Joomla genau so verwendet werden wie sie gedacht sind.
    Was an dem von dir geposteten Code zweifelhaft war, das sind die min-width-Angaben, denn praktisch jede width ist größer als 280px. Daher mein kleiner Testbeitrag. Die Antwort auf deine Frage ist also: ja, diese tags sind verwendbar.


    Die zweite Frage ist: Warum kommen gerade bei dir die Bilder nicht oder nicht immer?
    Wie ich von Anfang an sagte: die endgültigen Pfade stimmen nicht. Dazu habe ich keine sichere Antwort. Für mich sieht es so aus, als ob es mit der Mehrsprachigkeit zusammen hängt.

    • Hilfreich

    EDIT: War ich bisserl verspätet. Seht es als zusammenfassendes Protokoll ;)


    Du fügst per Editor ein src bzw. srcset auf ein Bild ein.


    images/blubber.jpg


    Dieser Pfad ist relativ. Ohne leitenden Slash (was man auch tunlichst vermeiden sollte!).


    Die Startseite, die Root-URL deiner Joomla-Seite ist
    http://www.example.org/kunde2/


    Für das src-Attribut ist das SEF-Plugin so nett zu ermitteln, dass da vorne dran ein kunde2 gehört und erstellt den absoluten Pfad:


    /kunde2/images/blubber.jpg


    Der Browser lädt/prüft also erfolgreich auf
    http://www.example.org/kunde2/images/blubber.jpg


    Für das srcset-Attribut ist das aber nicht vorgesehen und der Pfad bleibt beim oben eingegebenen relativen Pfad.


    Wie firstlady schreibt, folgt daraus für den Browser der fehlerhafte Bild-Link
    http://www.example.org/kunde2/…php/de/images/blubber.jpg


    D.h. entweder baust du solche Konstrukte mit PHP auf. In diesem Fall sollte das ja bspw. per index.php gehen


    PHP
    <picture> <source srcset="<?php echo JUri::root(true); ?>/images/560-test.jpg" media="(min-width: 410px)">  <source srcset="<?php echo JUri::root(true); ?>/images/320-test.jpg" media="(min-width: 320px)"> <img src="images/headers/1024-test.jpg" srcset="<?php echo JUri::root(true); ?>/images/1024-test.jpg" alt="Panorama"> </picture>


    was in deinem Fall ergibt:


    Code
    <picture>
 <source srcset="/kunde2/images/560-test.jpg" media="(min-width: 410px)"> 
 <source srcset="/kunde2/images/320-test.jpg" media="(min-width: 320px)">
<img src="/kunde2/images/headers/1024-test.jpg" srcset="/kunde2/images/1024-test.jpg" alt="Panorama"> 
</picture>


    Oder du spickst dir das SEF-Plugin ab, machst ein eigenes draus und wickelst auch das srcset ab.


    Oder, du baust das per JQuery nach, dass dir das <?php echo JUri::root(true); ?> (er)setzt, wenn es dir nicht um Suchmaschinen geht, sondern nur um einen Effekt für besucher..



    Jedenfalls solltes Du die Geschichte auf
    https://github.com/joomla/joomla-cms
    oder
    http://www.joomla-bugs.de
    einreichen.


    Ich würde es sogar als Bug des SEF-Plugins einreichen. Wird dann aber wahrscheinlich ein Feature-Request draus gemacht ;) für Joomla 7 (nein, war jetzt fies. Da es aber mittlerweile doch viele moderne, aktuelle Browser unterstützen, sähe ich es halt doch als Bug, wenn Joomla das nicht kann und das SEF-Plugin srcset nicht behandelt.)