Microblog Seite nochmals angepasst

Nachdem ich meine Microblog Artikel Liste noch mit einer Einleitung versehen habe, gab es jetzt noch ein wenig Arbeit am entsprechenden HTML.

Das Ganze (vergleicht es mit dem früheren Code) schaut jetzt so aus:

// BEGIN Tootpress: nureinblog/microblog um eine Einleitung ergänzen
// 
function tootpress_preamble_add( $preamble ) {

    // Add your filter code here
    // Example: $preamble='<p>Hello World.</p>';

$preamble='<div style="background-color: #e6f7ff; padding: 10px; border-radius: 5px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;"><div style="flex: 1; min-width: 200px;"><p>Nachfolgend findest du die Beiträge, die ich in meinem Microblog (microblog.at) als <a href="https://microblog.at">@roblen@microblog.at</a> schreibe. Die Beiträge werden hier nochmals zum Nachlesen gespiegelt.</p><p>Ein Klick auf das Mastodon-Symbol neben jedem Artikel führt zum Originalartikel.</p></div><img src="https://nureinblog.at/wp-content/uploads/2024/06/Logo-01.jpg" style="width: 100%; max-width: 300px; height: auto; margin-top: 10px;" alt="Logo"></div>';
	
    return $preamble;

}
add_filter( 'tootpress_preamble_filter', 'tootpress_preamble_add', 10, 1 );

// END Tootpress

Es gibt jetzt einen leicht blauen Hintergrund, um den Einleitungstext von den Artikeln abzuheben. Außerdem habe ich das Logo von microblog.at integriert.

Update 16. Juni 2024: Ich wurde darauf hingewiesen, dass das Logo auf Smartphone abgeschnitten wird bzw. nicht richtig skaliert. Daher habe ich obigen Code nochmals erweitert. Jetzt sollte es auch auf Smartphone Bildschirmen gut aussehen.

Ich muss sagen, dass mir ChatGPT als Laie sehr geholfen hat. Nur ein paar Anweisungen und die KI generiert mir den Code ganz einfach. Dabei habe ich die KI auch auf Barrierefreiheit (WCAG) hingewiesen und so wurde auch der Kontrast von ChatGPT getestet. Zumindest nach Meinung der KI sollte er in Ordnung sein. Ich werde noch manuell nachtesten.

Was das jetzige HTML auch zeigt ist, dass die Einleitung doch aufwendiger gestaltet werden kann. Somit ist das Update von Tootpress eine wirkliche Bereicherung für mich.