Styx Media Gallery

beats TEST blog

Freitag, 11. August 2023

Styx Media Gallery

Habe nun nachträglich in der Mediathek den Bildern die Eigenschaften Kommentar, TITLE und ALT einiger Bilder nachgetragen. Nun will ich sehen, welche Auswirkungen dies auf die Gallery und die Lightbox hat.

meine Spuren im Sand...
meine Spuren im Sand...
am Meer, bei Ereclea Minoa
am Meer, bei Ereclea Minoa
oftmals in einsamen Gegenden
oftmals in einsamen Gegenden
runter vom Castello in Agira
runter vom Castello in Agira
morgens, im Hintergrund der Ätna
morgens, im Hintergrund der Ätna
in Paterno, im Hintergrund Centuripe
in Paterno, im Hintergrund Centuripe

Etwas verwirrend das Ganze...

Das wird mir beim ersten Bild, oben-links, in den Media-Eigenschaften angezeigt:

und das im Quelltext dieses Beitrags:

Weil ich keine Vorschaubilder zu sehen bekam, änderte ich die Eigenschaften des letzten Bildes weil ich dachte, dass die Verknüpfung über den Bildtitel erfolgt.

Dann löschte ich die bestehende Galerie und fügte sie neu ein. Leider immer noch Fehlanzeige. Hier der Quellcode des letzten Bildes:

🤔

Nachfolgend nun noch drei Bilder, die ich nicht angefasst habe (um zu sehen, ob die Gallery überhaupt angezeigt wird).

025_1024_unten-ohne.jpg024_1024_vorSyracusa.jpg023_1024_Pantalica.jpg

Immer noch: 🤔 (Browser-Cache leeren hat auch nichts gebracht).

Neuer Versuch (12.08.2023)

meine Spuren im Sand...
meine Spuren im Sand...
am Meer, bei Ereclea Minoa
am Meer, bei Ereclea Minoa
oftmals in einsamen Gegenden
oftmals in einsamen Gegenden
runter vom Castello in Agira
runter vom Castello in Agira
morgens, im Hintergrund der Ätna
morgens, im Hintergrund der Ätna
in Paterno, im Hintergrund Centuripe
in Paterno, im Hintergrund Centuripe

Ist wirklich eigenartig. Wieso funktioniert es heute und gestern nicht?

Trackback-URL für diesen Eintrag

Dieser Link ist nicht aktiv. Er enthält eine kopierbare Trackback-URI, um manuell ein Ping- und Trackback zu diesem Eintrag für ältere Blogsysteme zu generieren; zB (immer noch valide) über das zur Verfügung gestellte Eintragsfeld des serendipity_event_trackback Plugins. Serendipity und andere Blogsysteme erkennen die Trackback-URL heutzutage aber automatisch anhand der Artikel-URL. Die Trackback-URI für ihren Link des Sender-Eintrages lautet daher wie folgt: »https://www.blog.dokumenzi.ch/2690-Styx-Media-Gallery.html«

Kommentare

Ansicht der Kommentare: Linear | Verschachtelt

  1. Ian Styx am :

    Ich wollte dir nicht hineinpfriemeln, deshalb habe ich ich meinen test mit deinem Entry nicht gespeichert.

    Komischerweise werden ja die Bilder nicht angezeigt. Also muss man den Source untersuchen um die Ursache zu erkennen. Suche mit F3 im Editor Source nach source srcset="null", also besser nach allen Vorkommen von srcset="null" und nehme das null weg. Das darf da nicht sein! Sonst interpretiert dein Browser HTML das als Bildurl.

    Damit werden die Bilder wieder angezeigt.

    Die Frage ist wie hast du diesen Quellcode so erstellt, denn er ist ja offensichtlich irgendwie "bearbeitet"... ⁉

    Wenn wir das geklärt haben ist eine weitere Frage ob die webp Images um die es sich da handelt größer (in Kb) sind als die original jpgs ⁉ Siehe in der Mediathek im Bild Info layer.

    Es ist also die Frage zu klären wie der string "null" da hinein kommt. Das kann sehr wohl ein Bug sein, denn mit der ganzen Verschärfung der Typisierung von PHP kann mir da sehr wohl ein NULL type durchgerutscht sein, der dann in der weiteren Behandlung irgendwo zu einem STRING type wird... Die Frage ist nur WO ? oder WER ? dafür letztendlich verantwortlich ist.

  2. Ian Styx am :

    Übrigens: Wenn man zusätzlich ein öffentliches image comment setzt, ist es ratsam dem image ALT Attribut eher den image Namen incl extension zu geben. Grundsätzlich ist ALT ja dafür da als eine Art Platzhalter zu fungieren damit der Besucher weiß was da eigentlich sein/erscheinen sollte. ( Möglichst kurz! ) Das ist die eine Ursache des ALT, die andere und viel gewichtigere Aufgabe ist die für sehbehinderte Besucher. Ihnen wird das ALT vorgelesen, meine ich, damit sie wissen worum es sich hier eigentlich handelt. Grundsätzlich also eher für Letzteres, denn niemand wird kaputte Imagelinks absichtlich implementieren oder wenn, dann wenigstens schnell reparieren. Und es gibt für ALT noch die Aufgabe als SEO für Suchmaschinen. Für beide letzteren aber ellenlange alt Texte zu verfassen damit Maschine oder Mensch überhaupt versteht was da gezeigt wird (oder einen Nutzen davon trägt) scheint mir auch etwas schwierig, deswegen würde ich die Kürze favorisieren. Also vielleicht "Bild aus Sizilien, Strand" oder so.

  3. Ian Styx am :

    Verschiedenste Klärungen sind meinerseits bereits erfolgt:

    Also " bearbeitet " ist da nix. Mea culpa. Die Umbrüche etc sind der Kommentarfunktion in styx js geschuldet.

    Aber all deinen Sizilien Photos fehlt die WebP-Vorschau, also das thumb. Wahrscheinlich hast du diesen image Ordner von beatblog geklaut und hier eingefügt und jene fehlten dort überhaupt oder sind auf dem Transport (FTP?) verlorengegangen. Somit existieren sie nicht und deswegen wird vom System null geworfen. Das muss natürlich korrigiert werden. Aber eigentlich sollte so ein Fall ja auch gar nicht vorkommen. Denn jeder upload produziert webP Variationen entweder ganz oder eben gar nicht.
    (Aber "gibts nicht",  gibts nicht, wie man sieht! 😁)

    Wie man nun genau vorgeht muss man an den Gegebenheiten abwägen. Ist es ein Fehler im System, war es ein unvorhersehbarer User Fehler beim Übertrag, wie reagiert das System auf unvollständige Variationen wenn man die Variationen neu erstellen läßt? Kann man vielleicht die große Variation löschen und dann jedes Bild einzeln per + neu erstellen lassen. Kann man auf diesem Test Blog überhaupt mit Styx Boardmitteln regieren, da womöglich noch andere versteckte Eigenarten zu finden sind? Fragen über Fragen...🙂

  4. Beat on the toaf am :

    Das ist komisch, denn hier https://www.blog.dokumenzi.ch/2632-Sizilien-Fotos,-die-Top-25.html werden die Bilder korrekt angezeigt. Das sind die gleichen Bilder.

  5. Ian Styx am :

    "on the toaf" ist auf dem Berge (irgendwo)? 🚵‍♂️

    Nein. Sind sie nicht!

    <div class="c3 col serendipity_image_block">
<a  class="serendipity_image_link" data-fallback="/uploads/2020/Sizilien/025_1024_unten-ohne.jpg"  rel="lightbox[2632]" href="/uploads/2020/Sizilien/025_1024_unten-ohne.jpg" title="025_1024_unten-ohne.jpg">
<!-- s9ymdb:9489 -->
<img alt="025_1024_unten-ohne.jpg" class="serendipity_image_left" src="/uploads/2020/Sizilien/025_1024_unten-ohne.styxThumb.jpg" style="width:400px" />
</a>
<a  class="serendipity_image_link" data-fallback="/uploads/2020/Sizilien/024_1024_vorSyracusa.jpg"  rel="lightbox[2632]" href="/uploads/2020/Sizilien/024_1024_vorSyracusa.jpg" title="024_1024_vorSyracusa.jpg">
<!-- s9ymdb:9488 -->
<img alt="024_1024_vorSyracusa.jpg" class="serendipity_image_left" src="/uploads/2020/Sizilien/024_1024_vorSyracusa.styxThumb.jpg" style="width:400px" /></a>
....

    Es fehlen dort alle Variationen bzw ist es eine Galeriezusammenstellung ohne dieselben, denn es fehlt der komplette media picture container. 😀

  6. Beat on the road am :

    Ich werde mir das abends nochmals ansehen.

    "on the toaf" ist meinen dicken Fingern auf dem Smartphone geschuldet. Bin mit der Rikscha "on the road". 😁

  7. Ian Styx am :

    😂 ... hätte ja auch "on the töff" sein können...
    Na dann, bis dahin!

  8. Ian Styx am :

    Ich habe übrigens im Vorgriff schon mal das null insert in den styx javascripts gefixt. Damit wird null zu nix und damit greift das fallback auf das original thumb wieder. Ohne den "Fehler" hattest du aber deinen eigentlichen "Fehler" gar nicht gemerkt, denn wer checkt schon so genau den produzierten Code wenn scheinbar alles korrekt angezeigt wird... 🙄🙂

  9. Beat Post author am :

    DOCH! Das sind die gleichen Bilder! Hier habe ich die Bilder 001...-006... eingefügt. Wenn Du in Deinem Code-Schnipsel weiter nach unten scrollst, dann kommen diese Bilder im Eintrag /2632-Sizilien-Fotos,-die-Top-25.html ganz unten (weil die Nummerierung von 024... bis 001... rückwärts läuft).

    Ich komme nicht umhin um anzunehmen, dass Du an der Gallery-Funktion etwas verändert hast, denn in beiden Einträgen habe ich diese benutzt und nun kommen sie Code-mässig anders daher. Wenn ich jetzt nur das einzelne Bild "001_1024_vor_Centuripe.jpg" betrachte dann baut sich der Code im Eintrag /2632-Sizilien-Fotos,-die-Top-25.html wie folgt auf:

    EDIT: codeblock gelöscht weil falsch und so kaputt das das ganze Gerüst in Mitleidenschaft geriet. Machs nochmal, Sam!
             Mo., 14. Aug. In deinem Sinne überarbeitet bzw ergänzt

    <div class="c3 col serendipity_image_block">[.....]<a  class="serendipity_image_link" data-fallback="/uploads/2020/Sizilien/001_1024_vor_Centuripe.jpg"  rel="lightbox[2632]" href="/uploads/2020/Sizilien/001_1024_vor_Centuripe.jpg" title="001_1024_vor_Centuripe.jpg"><!-- s9ymdb:9465 --><img alt="001_1024_vor_Centuripe.jpg" class="serendipity_image_left" src="/uploads/2020/Sizilien/001_1024_vor_Centuripe.styxThumb.jpg" style="width:400px" /></a></div>

    In diesem Beitrag baut sich der Code jedoch so auf:

    <div class="c3 col serendipity_image_block">
	[.....]

	<div class="serendipity_imageComment_left" style="width:400px">
	<div class="serendipity_imageComment_img"><a class="serendipity_image_link" data-fallback="/uploads/2020/Sizilien/001_1024_vor_Centuripe.jpg" href="/uploads/2020/Sizilien/.v/001_1024_vor_Centuripe.webp" title="001_1024_vor_Centuripe.jpg "><!-- s9ymdb:9465 --><picture><source srcset="null" type="image/webp" /><img alt="in Paterno, im Hintergrund Centuripe" class="serendipity_image_left" loading="lazy" src="/uploads/2020/Sizilien/001_1024_vor_Centuripe.styxThumb.jpg" style="width:400px" /></picture></a></div>

	<div class="serendipity_imageComment_txt">in Paterno, im Hintergrund Centuripe</div>
	</div>
</div>

    Sämtliche .webp und .styxThumb.jpg und .jpg Dateien sind in der Mediathek vorhanden. Daran kann es also nicht liegen.

    Achtung! Habe heute nochmal die gleiche Galerie in den Beitrag eingefügt und oh Wunder: Nun funktioniert es so, wie es soll. Keine Ahnung woran es lag/liegt.

  10. Ian Styx am :

    Auseinanderklamüser....

    1. Es geht/ging um den ganzen Sizilien Ordner mit all seinen Bildern, deshalb kann/konnte mein Beispiel auf eine andere Bildnummer zeigen ohne an der Aussage etwas zu verändern.

    2. Es gibt zwei Arten eine Gallery zu erzeugen. Mit picture container, also unter Nutzung von AVIF (optional) und WEBP Variationen und als simple IMG tag gallery mit den Original Bildern.

    3. Die ehemals hier erzeugte Galerie auf die du dich beriefst ist eine ohne die zusätzlichen Variationen.

    4. Wenn du in der Mediathek auf den info button eines dieser Sizilien Bilder klickst wird dir ja angezeigt:

    006_1024_vorTorreSalsa.jpg

    • MIME-Typ: image/jpeg
    • Originalbild: 1024x768
    • Vorschaubild: 400x300
    •  
    • Dateigröße: 398,06 KB
    • Vorschau-Dateigröße: 22,73 KB
    • WebP-Dateigröße: 111,31 KB
    • WebP-Vorschau-Dateigröße: 15,42 KB
    •  
    • Pfad: "2020/Sizilien/"
    • Datum: 10.03.2020 15:31

    Wie du richtig bemerkst ist heute alles vorhanden. Gestern als ich dieses schrieb fehlte überall die WebP-Vorschau-Dateigröße: x,y KB . Und der Variations Button wurde deshalb auch nicht angezeigt. Ich nehme also mal an du hast inzwischen das Media Wartungstool und/oder dein FTP Programm benutzt, denn ich habe nichts gemacht außer einmal das Problem nachzustellen und in diesem entry die null herauszunehmen (alles ohne speichern). Und solch ein Zauberkram gibts nicht wie wir schon mal feststellten. 😀 Überprüfe mal per FTP im Sizilien/.v/ Ordner, wann die diesbezüglichen webp THUMB Dateien produziert (last modified) wurden.

    5. Wie du außerdem wahrscheinlich bereits festgestellt hast sind deine beiden code Felder leer bzw werden nicht angezeigt. Ich kann also nicht sehen auf was du dich da beziehst. Das ist ein merkwürdiger BUG des codesnippet mit CKE an dem ich auch schon herumfummele seit ich es bemerkt habe. Denn der switch zwischen Source und RT mode funktioniert tadellos, nicht aber der Umweg über abspeichern und Neuaufruf desselben Eintrags im RT Editor der den inneren Teil des codes entfernt und wenn man diesen dann erneut abspeichert weil man es auf die Schnelle nicht bemerkt hat ist alles diesbezügliche weg. Wenn man aber das erste abspeichern sozusagen untouched beläßt wird in der Ausgabe (hier als Kommentar) auch alles korrekt ausgegeben. Ich denke also du hast den Kommentar nochmals bearbeitet und dir ist dieselbe Unaufmerksamkeit passiert wie mir als ich das zum ersten Mal feststellte. (Seitdem passe ich immer auf und kopiere mir sicherheitshalber den Teil bevor ich nochmals editiere.)

    Es betrifft auch nur code mit tag Elementen. sonstiger code bleibt erhalten. Insofern glaube ich einfach an einen dicken bug im leider nicht mehr weiter entwickelten CKE 4 Editor.

    Edit: Inzwischen habe ich herausgefunden dass das eventuell an einer Sicherheitsmaßnahme von mir liegt und somit Styx-seitig zumindest "verbessert" werden kann. Da ich an dieser Stelle schon länger nichts mehr gefummelt habe muss dieses Verhalten schon ein bisschen länger bestehen. Wenn ich mir dann einigermaßen sicher bin, mache ich mal einen diesbezüglichen Vorschlag. 😅

  11. Ian Styx am :

    Habe gerade deinen https://www.blog.dokumenzi.ch/2690-Styx-Media-Gallery.html#c8461 Kommentar repariert der in/durch seinen ersten code Block so kaputt war, dass Frontend und Backend in Mitleidenschaft gerieten. Bevor ich das WIE erklärt hätte wäre zu viel Zeit vergangen, deshalb habe ich kurz eingegriffen. Der Kommentar konnte im Backend zB nicht mehr über die Buttons bearbeitet werden deshalb musste ich cheaten und einen anderen Kommentarlink kopieren; ihn aber mit den richtigen IDs belegen. Dann ging es. Es ging darum dass ein Teil des Code Blocks plötzlich außerhalb desselben zu finden war und das ganze HTML Gerüst verbog.

    Wie du siehst ist der zweite code Block auch nicht das was du da hineingestellt hast. Also auch der müsste im Zuge der Reparatur repariert werden.

    EDIT:  Mo., 14. Aug. habe nun verstanden welche code Blöcke gemeint waren und sie in deinem Kommentar eingefügt.

  12. Ian Styx am :

    Nur zur Ergänzung. Ich habe gestern im Vorgriff die Null Geschichte schon repariert, weil ich das genau so bei mir lokal nachstellen konnte. Ich habe also bereits vorhandenen Bildern mit Variationen kurzfristig das Variations Thumb entfernt und hatte dann genau das gleiche Galerie Ergebnis wie du - ebenso auch meine Mediatheks Feststellungen. Insofern bin ich mir auch ziemlich sicher, dass das gestern bei dir auch noch der Fall war. Und deshalb zwischenzeitlich etwas geschehen ist das die Thumbs repariert hat.

  13. Ian Styx am :

    Bist du schon soweit gekommen das noch mal durchzulesen und dem auf den Grund zu gehen?
    Das mit dem Wasserglas kann ich immer noch nicht recht glauben...

  14. Beat Post author am :

    Ich habe Deine Kommentare gelesen, jedoch nicht wirklich verstanden 😏. Ich bin auch ein schlechter Fehlersucher und wenn etwas (wieder) so funktioniert wie ich es mir erhoffe (oder wie es soll), dann bin ich eigentlich zufrieden...

    Was ich aber bestätigen kann, ist folgendes:

    Bei den ersten (missglückten) Versuchen fehlten im Verzeichnis /uploads/2020/Sizilien/.v alle Dateien mit der Endung *.styxThumb.webp. Diese habe ich mir dann vom Live-Blog hierhin kopiert und danach hat es funktioniert.

    Worum es diese Dateien hier nicht gegeben hat und warum die Vorschaubilder im Beitrag /2632-Sizilien-Fotos,-die-Top-25.html auch zuvor schon richtig dargestellt wurden, entzieht sich meinem Verständnis.

    🤔 Vielleicht braucht es kein *.styxThumb.webp, wenn die Bildeigenschaften für Kommentar, TITLE und ALT leer sind? Im Quellcode von /2632-Sizilien-Fotos,-die-Top-25.html gibt es nämlich Null Treffer bei der Suche nach *.webp

  15. Ian Styx am :

    ... Diese habe ich mir dann vom Live-Blog hierhin kopiert und danach hat es funktioniert.

    Yepp. Das war die fehlende Information! 👏

    Die Variationen dienen nur dazu einem Browser, der einen picture container gesendet bekommt, aufgrund seiner Möglichkeiten auswählen zu lassen, welches Format er darstellen kann. Da AVIF besser komprimiert als WebP und damit noch kleiner (in KB) ist, steht es on top. Danach WebP und als letztes da original image (format). Mit irgendwelchen Atributen haben sie überhaupt nichts am HUT ⛑, denn diese stehen und werden auch immer von anderen Stellen ausgelesen, entweder im img tag oder außerhalb des eigentlichen picture containers. So kann auch ein Attribut, gesetzt oder nicht, keinerlei Bedeutung für das Vorhandensein der Bild-Variationen haben. So eine Schrumpfung auf bis zu ~10% des Originals beschleunigt Webseiten Ausgaben aber ungemein. Die einzige Kondition für die Einfügung von Variationen ist, dass sie 1. existieren und 2. kleiner sind als das nächstfolgende fallback image.

  16. Beat Post author am :

    Mir erklärt das aber immer noch nicht, weshalb ich hier 2020 eine Gallery ohne .webp-Thumbs erstellen konnte, wenn dies aktuell nicht mehr möglich ist.

  17. Ian Styx am :

    warum die Vorschaubilder im Beitrag /2632-Sizilien-Fotos,-die-Top-25.html auch zuvor schon richtig dargestellt wurden, entzieht sich meinem Verständnis.

    Zur Sicherheit erkäre ich das nochmal en Detail. Dieser alte Beitrag arbeitet mit einer Bilder Galerie OHNE picture container. Das was du siehst sind also die Original jpg Dateien durch das img tag ( thumb oder nicht spielt keine Rolle ). Dein Auge sieht ja nicht ob es ein avif/webp/jpg Format ist. Das kann man nur an der URL erkennen.

    Obige Galerie mit dem null Fehler arbeitet aber MIT picture container, hatte aber durch den ungeklärten Unfall (wahrscheinlich per FTP) der fehlenden webP (thumbs) keine solchen File URLs zum einfügen und nahm dann durch eine bis dahin nicht abgefangene javascript Eigenheit ein NULL Typ, also NULL für nicht existent, als einen "null" string stattdessen. Der Browser suchte also einen string wie "https//blog.dokumenzi.ch/null" als angegebenes webp file. Die URL ist existent, aber eben nix dahinter. Deshalb wurde das Bild leer angezeigt und du sahst bzw siehst stattdessen die ALT Attribute. Hättest du das null im schon gespeicherten entry Source (per CKE) entfernt, so wäre auch das Bild (scheinbar) angezeigt worden, allerdings nur der fallback, also das jpg thumb file, da ja dann die eigentliche webp url leer gewesen wäre. Auch jetzt würde durch die Wegnahme des null nur das fallback wirken. Ansonsten müsstest du, wie dann noch mal am 12. Aug. gemacht, die Galerie nochmal erstellen. Diese hatten/haben aber Zugriff auf die nun übertragenen WebP und nun kompletten thumb files und konnten/können nun alles korrekt darstellen.

    Ah ich sehe gerade deine Folgefrage. Sie wird durch das hier beantwortet! 😀

  18. Ian Styx am :

    Hmmmm. Vielleicht aber auch nicht, denn du hakst an der Sache "..nicht möglich wenn nicht existent", oder?

    Das ist grundsätzlich richtig, aber trifft diesen Fall nur bedingt. Denn die "full size" webp Variationen existierten ja, nur ihre thumbs nicht. Deshalb lief alles seinen gewohnten Gang, bis es auf die geschilderte javascript Eigenheit traf und damit ein Fall aufdeckte der bisher nicht bedacht war.

    EDIT: Im Zuge dessen habe ich deinen Kommentar mit den vermurksten code Blöcken gerade eben nochmal überarbeitet. Hoffentlich in deinem Sinne. Jetzt können wir uns wenigstens zur Klärung verschiedenster Tatbestände darauf berufen. 🤗

  19. Ian Styx am :

    Ich habe dir was hinterlassen (bzgl. des re-edit bugs mit den code Blöcken).

  20. Beat Post author am :

    Gemacht.

  21. Ian Styx am :

    Danke. Text zur Info ergänzt.

  22. Ian Styx am :

    Edit2 und neu

  23. Beat Post author am :

    unklar

  24. Ian Styx am :

    schau nochmal...

  25. Ian Styx am :

    ping

  26. Beat Post author am :

    Einzig logische Antwort: pong! 😉

  27. Ian Styx am :

    p😁ing

  28. Beat Post author am :

    Ich bin da noch eine Antwort schuldig.

    Der besagte Kommentar wurde von mir im Backend zerschossen. Das merkte ich aber erst nach dem Speichern. Und dann nahm ich mir nicht die Zeit um das zu korrigieren.

Kommentar schreiben

Die angegebene E-Mail-Adresse wird nicht dargestellt, sondern nur für eventuelle Benachrichtigungen verwendet.
▲