Beiträge von Duplicate mbdesign

    Das mag so funktionieren ist aber nicht die ideale Lösung.

    Bei der Duplicate ID wird nicht von der Produkt ID gesprochen. Es geht um die id= im HTML Tag.
    Ich habe mir den Code jetzt nicht angeschaut, aber es müsste nur eindeutig identifiziert werden welceh Liste es ist.

    z.B. bei Produkt mit ID 4711
    Liste Zufallsprodukte <li id="zufall_products_4711" .....
    Liste Neue Produkte <li id="new_products_4711" .....

    Das ist nur ein Beispiel um den W3C Fehler Duplicate ID zu erklären.
    Admin weiss bescheid kann das fixen, bitte in den Bugtracker übernehmen.

    Retina pics fertig... schnell mit wenig Code um Änderungen.
    Den Quatsch oben in den Posts alles vergessen

    1) eine Zeile JS in den Header für Pixel Ratio zu ermitteln (evtl besser in SESSION schreiben als in ein Cookie)???

    Code
    echo "<script>(function(w){var dpr=((w.devicePixelRatio===undefined)?2:w.devicePixelRatio);document.cookie='devicePixelRatio='+dpr+'; path=/'})(window)</script>";

    2)


    3) xtc_image.inc.php 866 2014-03-17 12:07:35Z akausch $ ändern.

    Super schlanke Änderung mit 100% Fallback.

    OK sehr gut.

    Ich habe nich mal ein wenig getestet. retina.js fällt flach, bringt ein haufen 404 errors wenn die Bilder @x2 nicht vorhanden sind und es werden ale Bilder 2x gealden.

    Beste Lösung im Moment http://scottjehl.github.io/picturefill/#download

    Problme dabei ist das die ganzen <img> im Quellcode überarbeitet werden müssen. Im Prinzip werden alle Bildformate in einem array ausgegeben und picturefill.js macht den rest. Funktioniert wEinwandfrei aber leider müssen die Bildpfade dann so aussehen.

    Variante A mit neuem <picture> tag
    <picture>
    <source srcset="examples/images/extralarge.jpg" media="(min-width: 1000px)">
    <source srcset="examples/images/large.jpg" media="(min-width: 800px)">
    <img srcset="examples/images/medium.jpg" alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">
    </picture>

    Variante B mit neuem srcset und sizes attribut

    <img sizes="(min-width: 40em) 80vw, 100vw" srcset="examples/images/medium.jpg 375w, examples/images/medium.jpg 480w, examples/images/large.jpg 768w" alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">

    ich dachte schon an preg_repalce im outputfilter aber leider macht das kein Sinn, also den Code anpassen.

    Wobei Kategorien und auch Bilderpfade an nur ca. 4 Stellen angepasst werden müssen da wir ja bei commerce seo viele schöne Klassen verwenden :)
    Ich würde sagen wenn dies Bilder schon mal Retina Ready sind ist es viel Wert.

    Icons usw. kann man immer noch machen.
    Diese sehen auch gut aus wenn mann z.B. 48x48px einfach auch 24x24px runter skaliert im css und dann werden diese im Retina Dysplay perfect angezeigt.

    :thumbup:

    Bitte auch berücksichten das die Bilder beim hochladen bzw. anlegen einer Kategorie oder Prodokute gleich mit angelegt/erzeugt werden.

    Ich fülle mene Dazenbank und Bilderordner mit Shopsyn direkt aus der WAWI.

    Wobei mir das lieber wäre nur den Original Ordner zu füllen und dann über das Ajax Script alles erzeugen kann.
    Damit habe ich eine deutlich schnellere Übertragung der Bilder von der WAWI in den SHOP.

    Danke

    https://github.com/Retina-Images/Retina-Images (hat auch einen funktionierendes Fallback)

    hier müsste man für Produktbilder bzw. Kategoriebilder nur auf die neuen x2 Bildpfade umbiegen.

    Quick and dirty

    Ich dneke es ist an der Zeit commerceSEO die Bilder für Retina und High Res. Displays zu erweitern.

    Hier ein sehr gutes Modul für Wordpress als keiner Ansatz.
    https://wordpress.org/plugins/wp-retina-2x/

    Weitere infos zu css usw.

    http://blog.kulturbanause.de/2012/04/websit…ina-optimieren/

    http://brettjankord.com/2012/11/28/cro…-media-queries/

    https://signalvnoise.com/posts/3271-eas…ages-using-scss


    Idealerweise gleich beim Hochladen erzeugen und/oder vor allem in die Ajax Bild Processign Funktion einbauen. Habe da mal ein wenig rum gespielt, ist mit "Reltiv wenig Aufwand" erledigt.

    Danke