Kommentare von

beats TEST blog

Weblog Kommentare

Anmerkungen zu V3.1.0

Beat Post author am |

Danke für die Info, doch ich bleibe bei Lightbox 2j Query. Wenn das schon der "Master" besser findet, bestärkt mich das zusätzlich in meiner Meinung... ?

Ian Styx am |

Huch, völlig falsch. Gleicher Ort, selbe Anweisung, anderer selector - oder ausgekoppelt in die user,css.

.mfp-figure figure {
    margin: 0;
    border: 0 none;
}

Das mit dem rechten button ist komisch... Wahrscheinlich gibt es irgendeine Indifferenz mit dem pure theme.
Hiermit ginge es (augenblicklich) - aber ich weiß nicht, ob sich das mit verschiedenen image Größen nicht doch wieder verschiebt... Im Original stand margin-left: 39px; glaube ich...

.mfp-arrow-right::after {
    border-left: 17px solid #FFF;
    margin-left: -55px;/*ungefaehr*/
}

 

Ian Styx am |

Dann dürften vor lightbox Anwendung aber mit Safari gar keine Bilder zu sehen sein... (nicht wahr?!), oder?
Außerdem hast dort selbige ja überhaupt gar nicht... ?

Eher passt, dass es dort einfach auch nicht geht... als Bestätigung der originalen Vermutung.

Beat Post author am |

Ähm... Jetzt wird's kompliziert.

Ich drücke es anders aus:

  • Mit Original-S9Y wird am iPad/Safari die Lightbox richtig angezeigt (dort gibt es ausschliesslich jpg-Bilder)
  • Mit Styx-Edition werden die Lightbox-Bilder nicht richtig geladen ("The image could not be loaded". Wenn ich auf The image klicke/tippe, wird erfolglos versucht, ein webp-Bild zu laden).

Ian Styx am |

Ah sorry, dann hatte ich das mißverstanden.

Kleiner Test. Mache mal ein Bild oder kleine Galerie (muss ja nur temporär sein und kann ruhig hier stattfinden) ohne picture element. Das müsste zeigen ob es tatsächlich daran liegt.

Beat Post author am |

Ich hatte da noch so eine Idee... (und die entspricht ziemlich genau Deinem vorgeschlagenen Testszenario):

Hier, auf blog,dokumenzi.ch, läuft Styx-Edition (meist) ohne webp-Bilder. Wenn ich mit dem iPad/Safari nun diesen Beitrag (https://www.blog.dokumenzi.ch/2643-+1-Std.-Zeitversatz.html) ansehe, dann funktioniert auch die Lightbox. Sprich die jpg-Bilder werden geladen.

Es erhärtet sich also der Verdacht, dass beim Einsatz des Lightbox-Plugins unter Safari das Fallback von webp auf jpg nicht richtig funktioniert.

Beat Post author am |

Nun ist es eindeutig.

Auf www.beatsblog.ch funktioniert die Lightbox auch mit Safari-Browser, bis und mit dem Eintrag vom 16.01.2020 (bis dahin betrieb ich Original-S9Y mit jpg-Bildern).

In neueren Beiträgen (mit Styx-Edition) fügte ich Bilder immer als picture-element ein und somit als webp. Vorschaubilder und grosse Bilder werden in Safari angezeigt (da funktioniert der jpg-Fallback).

Wenn Vorschaubilder jedoch auf grosse Bilder verlinkt werden und via Lightbox-Plugin angezeigt werden sollen, bleibt die Lightbox beim Bild-Ladevorgang hängen und scheint kein jpg-Fallback-Bild zu finden.

Ian Styx am |

Ah. Super! ?

Das grenzt das dann tatsächlich darauf ein. Vielleicht kann ich da was basteln... wenn mal wieder etwas Ruhe ist.

Wie war das noch, reine webp images in einem img tag zeigt Safari an oder nicht?!? zb

https://img.zeit.de/politik/ausland/2020-10/brexit-wirtschaft-2/wide__820x461__desktop

(das müsste ein webp Bild sein wenn sie nicht irgendetwas hinterhältiges mit der Auslieferung machen...)

Beat Post author am |

Ja, das verlinkte Bild wird in iPad/Safari angezeigt. (Zwei Fischer auf einem Kutter)

Ian Styx am |

.. jetzt müsste man nur noch wissen was Safari da wirklich interpretiert... Wenn man unter Safari den "Speichern Unter" Dialog (bzw dessen Apple Analogon) benutzt, müsste man eigentlich sehen ob webp oder nicht.

Aber egal. Nimm dies Javascript und wirf es in dein oder das pure.js, gleich am Anfang

function checkWebP(callback) {
    var webP = new Image();
    webP.onload = webP.onerror = function () {
        callback(webP.height == 2);
    };
    webP.src = 'data:image/webp;base64,UklGRjoAAABXRUJQVlA4IC4AAACyAgCdASoCAAIALmk0mk0iIiIiIgBoSygABc6WWgAA/veff/0PP8bA//LwYAAA';
};

checkWebP(function(support) {
    if (!support) {
        $('a.serendipity_image_link').each(function() {
            var $currentA = $(this);
            var  dataHref = $currentA.attr('data-fallback');
            $currentA.attr('href', dataHref);
        });
    }
});

Das müsste es eigentlich tun für den Safari, so dass dieser gar nicht erst webp images verlinkt.

Das wäre sicher noch weiter tunebar aber vielleicht reicht es schon und ist performant genug.

Man muss natürlich sicher gehen das der Browser das pure.js wirklich updated und nicht eine Cache version benutzt.

Beat Post author am |

? YES ! :applaus: Funktioniert.

Ian Styx am |

Klasse! ?

Aber muss ich mir jetzt wegen dämlicher Safaris Gedanken machen wie ich das in alle themes hinein ? teleportiere ... ⛳ oder genügt das in pure only ❔❓

Laut https://caniuse.com/webp soll Safari 14 vom September 2020 unter MacOS 11 Big Sur partiellen bzw Support anbieten. IOs Safari 14 bereits vollen Support.

Beat Post author am |

? Da kann ich Dir leider nicht weiterhelfen... für mich genügt es, doch wer bin ich schon. ?

Zudem sei gesagt, dass meine Frau Ihre Geräte nicht oder nur sehr ungern updatet. Kann also durchaus sein, dass aktuelle Safaris dieses Problem gar nicht (mehr) haben. Ich finde irgendwie auch nicht raus, welche Version auf ihrem iPad überhaupt drauf ist. Ich sehe nur iOS 10.3.3, doch der Safari-Browser... keine Ahnung.

Rausgefunden: Safari 10 on iOS 10.3

:think: kann ja mal einen Update-Versuch unternehmen...

Ian Styx am |

? Und da kann ich nicht helfen... außer mit den bisherigen Verbesserungen. ?

Habe mich für pure entschieden!

Ian Styx am |

Abgesehen von sicherlich verbesserter Sicherheit ist das bestimmt eine gute Idee. Apple hat ja mehrere Baustellen! ?

Aber wenn ich so nachdenke, meine ich letztens auf einem Mac Big Sur getestet zu haben als mir das auffiel. Beschwören kann ich es aber nicht.

Beat Post author am |

? Das iPad hat mir 26 Apps zum Update vorgeschlagen. Safari befindet sich jedoch nicht darunter... ? ich sag's ja: ? Teufelszeug ?. Neee... da mach ich mir nicht die Finger schmutzig... am Schluss funktioniert etwas nicht mehr so, wie Madame es wünscht und dann bin ich definitiv der Depp. ?

Beat Post author am |

Vielen Dank für die Problemlösung! Habe dazu gleich noch einen Blogeintrag geschrieben: https://www.beatsblog.ch/2794-Mobile-Duopol.html

Ian Styx am |

Nur zur Info. Ich habe zwei Fehler bezüglich Mediatheks WebP actions gefunden und für 3.2 gefixt.
Der eine handelt von Änderungen des Dateinamens und beim anderen ging es um bulk move Aktionen in andere neue Ordner.
Vermeide solange beides, wenn es irgend geht. Das erspart möglicherweise nachträgliche Arbeit. Man kann es aber selber fixen! ..., oder kopiere dir die functions_images.inc.

Beat Post author am |

Danke für den Hinweis. Die beiden angesprochenen Funktionen/Aktionen nutze ich nicht und daher kann ich problemlos auf 3.2 warten. ?

Beat Post author am |

Habe gerade einen Knopf in der Leitung. Ich wollte heute anstatt eines Eingangsbilds ein Video anzeigen. Nun wird mir das Video statt in voller Grösse in 50% mit Fliesstext rechts angezeigt.

Das habe ich im Beitrag vom 13. August so gewollt und damals haben wir das in diesem Beitrag besprochen: https://styx.beatsblog.ch/2634-Video-mit-Fliesstext-rechts.html

Damals habe ich folgendes in meine user.css geschrieben:

@media screen and (min-width: 480px) {
    .media_object_container {
        margin-right: 1em;
        width: 50%;
        float: left;
    }
    .media_object_container::after {
        clear: left;
    }
}

Verunmöglicht mir dieser Eintrag nun, dass ich das Video in voller Breite anzeigen kann? Und falls JA, kann ich das irgendwie mit inline-styling umgehen?

Nachtrag: Habe mir auf dem Live-Blog nun mit einer Notlösung geholfen. Das Eintragsbild (jpg) linkt nun auf das Video (mp4). Funktioniert soweit, ist jedoch sicher nicht so schön, wie die direkte Einbindung des Video. Und man muss im Browser "back" um wieder auf den Blog zu gelangen.

Ian Styx am |

Ja der Eintrag halbiert die Breite generell. Du könntest jetzt wohl entweder

<div class="media_object_container" style="margin-right: initial; float: none; width: 100%;">

benutzen, oder nett sein und den begangenen Weg beschreiten, aber statt eines einfachen links, ein image popup link benutzen. Das müsste doch gehen, oder?!

Beat Post author am |

Ja, image popup link funktioniert. Habe das nun so gemacht. Danke für den Hinweis. Hätte auch selbst drauf kommen können, doch manchmal sieht man die Bäume vor lauter Wald nicht mehr...?

Nicht verstanden habe ich, weshalb diese Lösung nun "netter" ist, als das Video direkt einzubinden und auf 100% zu stylen. Natürlich ist mir klar, dass das webp-Bild viel weniger Ladezeit braucht als das direkt eingebundene Video. Aber sonst? ?

Ian Styx am |

wg dem Augenkrebs natürlich... ?

picture-Element

Ian Styx am |

Ja, sollte es womöglich da PHP 7x +. Das muss aber aufgrund des "veralten" Gesamt Server OS nicht sein.
Augenblick, du postest das aber hier auf Manitu..!

Hattest du eigenlich den letzten Kommentar auf styx..doku gelesen?