ACHTUNG! - TEST

Dies ist eine Testumgebung!

Den aktuellen Online-Blog findet man hier.

UTF8-Emoji-Test

😀

🤣

.jp2 und .webp Bilder

Gemäss "Google PageSpeed Insights" sollte man modernere Dateiformate als .jpg hochladen. Vorgeschlagen wird:

Bildformate wie JPEG 2000, JPEG XR und WebP bieten oft eine bessere Komprimierung als PNG oder JPEG, was schnellere Downloads und einen geringeren Datenverbrauch ermöglicht.

Ich habe nun ein Testbild in jp2 und webp abgespeichert und hochgeladen. jp2 wird in der Mediendatenbank nicht richtig angezeigt. webp wird angezeigt. Von beiden werden keine Vorschaubilder (Thumbnails) erzeugt.

webp-Testbild

webp-Testbild

jp2-Testbild

jp2-Testbild

webp-Thumbnail
webp-Thumbnail

nun der Versuch, diese als Vorschaubild mit Lightbox einzubauen.

Child-Theme

Im S9Y-Forum bin ich eher zufällig über das Thema Child-Theme gestolpert. Die Idee dahinter ist, dass man alle Änderungen, die man an einem vorinstallierten Theme vornimmt in ein eigenes Verzeichnis einträgt. Dieses Verzeichnis referenziert dann auf ein sogenanntes Mother-Theme, wo alle übrigen Daten herkommen. Das finde ich eine sehr gute Idee. So kann man quasi update-sicher ein Theme den eigenen Wünschen anpassen.

Ich habe bisher das ganze Theme mit allen Dateien kopiert und umbenannt. Darin habe ich meine gwünschten Änderungen vorgenommen und den Verzeichnisnamen geändert (hier zu next_beat). Sollten sich zukünftig Dateien im Next-Theme ändern (Update), so kriegt das mein next_beat-Theme nicht mit.

Für einen Versuch habe also alle Dateien, die ich im Next-beat-Theme äbgeändert habe in einen eigenen Ordner kopiert und diesen next_2019 genannt. In der info.txt habe ich dann als Engine:Next eingetragen (als Mother-Theme).

Soweit sieht eigentlich alles recht gut aus. Nur am unteren Seitenende werden die Pfeil-Buttons zu den älteren oder neueren Beiträgen nicht angezeigt. Das ist aber bisher der einzige Makel, den ich feststellen konnte. Mal sehen, obe ich herausfinde, woran das liegt.

Wobei: Diese Buttons machen mich eh nicht glücklich. Ich weiss nie auf welcher Seite ich klicken muss. Ein herkömmlicher Button, mit der Aufschrift "älter" oder "neuer" würde mir besser passen.

Bild-Kommentar

TREK 1120 mit Gepäckträgern (ALT)
TREK 1120 mit Gepäckträgern (Kommentar)

Ich will hier ein Bild einfügen und im Kommentar-, ALT-, und TITLE-Feld immer den gleichen Text mitgeben. Auf grossen Bildschirmen (über 768px) soll kein Kommentar sichtbar sein (dafür wird der TITLE-Eintrag mit Mouse-Over angezeigt). Auf Displays mit weniger als 767px (Mobiles) soll jedoch der Kommentar gezeigt werden, da Mouse-Over ohne Maus halt nicht funktioniert.

Dafür mache ich in der style.css ab Zeile 1230 folgende Änderungen:

@media screen and (max-width: 768px) {
    .serendipity_imageComment_txt {
        display: none;
        visibility: hidden;
    }
}

:applaus: SUPER! Das funktioniert! :applaus:

ALT oder TITLE?

Test um zu sehen, wann ALT- und TITLE-Attribute angezeigt werden. Dem folgenden Bild wurde nur ein ALT-Attribut mitgegeben.

Text im ALT-Attribut

Also das "ALT-Attribut" wird bei Mouse-Over nicht angezeigt und bleibt generell verborgen.

ALT-AttributLinks nun ein Bild mit Link, mit ALT aber ohne TITLE... Nöö, kein Mouse-Over und keine Anzeige in der Lightbox.

Rechts das gleiche Bild, ohne Link, ohne ALT, aber mit TITLE-Eintrag... jetzt mit Mouse-Over-Anzeige.

Das entspricht soweit alles meinen bisherigen Erfahrungen. "Mein Problem" ist, dass die Mouse-Over-Texte auf dem Handy nicht dargestellt werden. Oder halt eben nur, wenn das Bild per Lightbox angezeigt wird. Schön wäre, wenn bei einem Fingertipp auf ein Bild ohne Lightbox-Link, der Mouse-Over-Text (TITLE) angezeigt würde.

Das ALT-Attribut wird von Screenreadern vorgelesen und auch Suchmaschinen verwerten die ALT-Attribute von Bildern. Seit ein paar Wochen fülle ich deshalb den gleichen Text in die Felder "ALT" und "TITLE". "TITLE" als Mouse-Over und als Bildbeschreibung in der Lightbox. Das hat dann halt den Nachteil, dass ein Screenreader den Text zweimal vorliest (zuerst ALT und dann TITLE). Doch ist das relevant? Lässt sich überhaupt irgend jemand meinen Blog vorlesen???

Kommentar zum Bild
Kommentar zum Bild

Eigentlich liesse sich das ziemlich einfach lösen. Nämlich indem ich einem Bild ohne Link statt ein TITLE-Attribut einen Kommentar mitgebe. Dieser wird dann unterhalb des Bildes eingeblendet. Mit etwas CSS könnte man die Anzeige auf grossen Displays wohl auch ausblenden.

Link auf JAlbum-Bild

Wenn ich im aktiven Blog einen Link auf ein Foto in JAlbum mache (URL aus dem Browserfenster kopiert), springt die Lightbox an, findet aber das Bild nicht. Die Lightbox kann das Bild nicht darstellen, weil die JAlbum-Funktionalität fehlt.

Tags/Stichworte in einem Beitrag

Ich will einen Beitrag erstellen, der alle Tags/Stichworte anzeigt, die mehr als 3x verwendet wurden. Dafür konfigurierte ich das Seitenleisten-Plugin dementsprechend. Dann zeigte ich mir die Blog-Hauptseite in Firefox an un wählte über die rechte Maustaste "Seitenquelltext anzeigen". Diese Seite durchsuchte ich nach "Stichwort" und durchsuchte die Ergebnisse, bis ich die Daten des Seitenleisten-Plugins fand. Von da kopierte ich den gesuchten Abschnitt und fügte ihn in diesen Beitrag via Quellcode ein. Hier das Ergebnis:

, , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ,

Das passt. Die zugrundeliegende Idee ist, dass ich einen Menüpunkt "Stichworte" erstellen kann und wenn man dieses Menü anwählt, soll die oblige (klickbare) Liste erscheinen.

Mehrere Fotos

Es scheint eine neue Funktion gegeben zu haben. Scheinbar kann man in einem Zug mehrere Fotos einbinden und so höchst einfach eine kleine Galerie erstellen. Mal ausprobieren.

Na ja. Man kann zwar X Bilder auf einmal auswählen und einfügen, diese werden dann jedoch als Liste, senkrecht untereinander dargestellt.

Hab jetzt einiges versucht, doch nebeneinander kriege ich die Bilder nicht hin.

Bildbeschreibungen, die dann in der Lightbox angezeigt werden, müssten zudem schom beim Hochladen des jeweiligen Bildes festgelegt werden. In dieser Sammel-Einfüge-Aktion hat man dafür keine Möglichkeit.

Hmm... für mich ist das so nicht wirklich brauchbar. :-( -> in der Styx-Edition sieht das gleich viel besser aus.

erste Farbanpassungen

Also: Als erstes ein paar einfache Farbanpassungen. Um Farben zu bestimmen und HEX-Codes für Farben zu erhalten, nutze ich oft folgende Webseite (hier am Beispiel meiner Lieblingsfarbe #060689).

Zuerst erstellte ich (die zuvor erwähnte) user.css-Datei. Da hinein schreibe ich folgende Änderungen:

Die Hintergrundfarbe ändere ich auf ein helles grau (#fcfcfa). Das finde ich für die Augen angenehmer als reines weiss. Dann änderte ich die Textfarbe auf ein sehr dunkles blau (#04045f). Das ergibt einen guten Kontrast. Nachfolhend die entsprechenden Einträge:

body{
    background-color: #fcfafa;
    color:#04045f;
    }

Danach wollte ich die Navigationsleiste in meiner Hauptfarbe (#060689). Dazu "vergewaltigte" ich die Voreinstellung "dunkel". D.h. damit diese Einstellung wirksam ist, muss man danach unter Themes > Konfiguration > Nav-Stil auf dunkel umschalten. In die user.css kam folgender Befehl:

.bg-dark{
    background-color:#060689!important;
     }

Den Blog-Titel in der Navigationsleiste hätte ich gerne fett darstellt. Das ging so:

.navbar-brand {
    font-weight: bold;
    }

Dann sollten die Menütexte in der Navigation beim Überfahren mit der Maus in weiss darstellt werden (ohne Transparenz).

.nav-link:hover {
    color: #fff!important;
    }

Ganz generell machen mich die !important-Aufforderung nicht wirklich glücklich. Eigentlich möchte ich das vermeiden, doch ich wusste mir nicht anders zu helfen. :-|

Demnächst mehr...