Herunter­ladbare Bilder mit WordPress generieren

Den Block Editor für mehr als nur Websites nutzen

Ich glaube seit langem daran, dass man ein System richtig kennenlernt wenn man es auch regelmässig nutzt. Man sieht nicht nur die üblichen Funktionen sondern auch weitere Möglichkeiten. In meinem Fall bedeutet die seit 2018 tägliche Verwendung des Block-Editors, dass ich Einsatzmöglichkeiten sehe, die über eine einfache Website hinausgehen.

Anstatt eine andere Software wie zum Beispiel Powerpoint erlernen zu müssen, hat eine Entwicklerin ein eigenes Plugin für WordPress entwickelt, mit dem sie die Slides für ihre State of the Word-Präsentation 2019 im WordPress-Block-Editor erstellt hat. In 2019 und in 2022 haben wir bei Say Hello eigene Lösungen für Kundenprojekten entwickelt, die es den Seitenbesucher ermöglichen, ein generiertes PDF der gewünschten Inhalte zu generieren und herunterzuladen.

Die Idee von generierten Medien hat mich immer wieder inspiriert und ich wollte schon länger eine Lösung bei einem Projekt integrieren, wo man Bilder aus dem Inhalt generieren könnte. Im Rahmen meiner Arbeit für das diesjährige WordCamp Schweiz (das am 1. April in Murten stattfindet) sollte ich Social-Media-Bilder für jede Phase der Vorbereitung erstellen. Anstatt eine bestimmte Desktop-Software zu verwenden, beschloss ich, dass eine WordPress-basierte Lösung am einfachsten wäre. Vor allem, weil jeder im Team WordPress kennt und den Block-Editor bereits in diversesten eigenen Projekten verwendet.

Der Redakteur verwendet den WordPress-Cover-Block mit einem vordefinierten Layout und mit der Möglichkeit, den Text und das Hintergrundbild auszutauschen. Die Textgrösse kann mit Hilfe der Voreinstellungen, die ich für den Block-Editor definiert hatte, geändert werden. Das Farb- und Schriftschema wurde durch ein einfaches WordPress-Theme vordefiniert. Obwohl man eigene Farben nutzen könnte, bleiben diese hier unverändert, um ein konsistentes Erscheinungsbild zu garantieren.

Um das Bild zu erstellen, habe ich der Website ein eigenes Stück JavaScript hinzugefügt, das es dem Besucher ermöglicht, auf das Bild zu klicken. Ein Klick auf den Cover-Block auf der Website erstellt aus den HTML ein neues Bild, das auf dem Inhalt des Blocks basiert, und lädt es als JPEG in den richtigen Proportionen auf den Computer des Besuchers herunter.

Dank eine Eigenentwicklung und dank der Macht des Block-Editors hat das Team nun die Möglichkeit, eigene Bilder für den sozialen Medien zu generieren… und dies ohne bei einer Grafikerin oder einen Grafiken (oder mir!) nachfragen zu müssen.

Work smart, not hard.

GDE Summit 2023 Nächster Post