Ein WordPress-Plugin um Bilder in Abhängigkeit von URL-Parametern auszuliefern
Um insbesondere bei Print-Medien nachvollziehen zu können, aus welcher Aktion ein Klick auf die Webseite generiert wurde, kann man den Weg gehen, dort Links insbesondere in QRCodes aufzubringen, die einen URL-Parameter beinhalten. Also statt einfach auf https://vaya-consulting.de zu verweisen würden der QRCode dann die URL https://vaya-consulting.de?q=DID enthalten.
Die ganz eiligen Leser können direkt zu den Beispielen springen.
Insbesondere im Umfeld der Spendengewinnung fehlt dann noch der letzte Schritt auch auf eine Überweisung sehen zu können, über welche Aktion der Anstroß kam. Dazu kann man in den entsprechenden Spendenformularen diesen URL-Parameter weitergeben, aber es ist auch möglich, diesen in einen Banking-QR Code zu integrieren. Dazu wird dann die Kennung einfach in den Verwendungszweck übernommen. Nach dem Scan des QR Codes mit der Banking-App würde dann der Verwendungszweck z.B. „DID Spende“ lauten. Der Bezug bleibt also über den Weg vom Papier-Flyer und die Webseite bis zum Überweisungseingang erhalten.
Genau dafür wurde das WordPress Plugin „Dynamic Image Display“ entwickelt. Es prüft ob ein URL-Parameter vorhanden ist und sucht dann ein passendes Bild aus einem Verzeichnis aus. Wenn es keinen Parameter gibt oder kein passenedes Bild, wird ein Standard-Bild ausgeliefert. Die Bilder können über entsprechende Funktionen in den Einstellungen hochgeladen und auch wieder gelöscht werden.
Beschreibung der Short-Code Parameter
Der Shortcode lautet [dynamic-image] und kann eine ganze Reihe von Parametern haben, die die Voreinstellungen überschreiben. So ist es einfach auf einer Seite sehr unterschiedliche QRCodes anzubieten. In der folgenden Tabelle werden die Parameter beschrieben.
| Parametername | Beschreibung | ||||||||
|---|---|---|---|---|---|---|---|---|---|
| type | Art des QRCodes images, qr_url oder qr_giro. | ||||||||
| width | Breite des erzeugten QRCodes in Pixel. Hier kann nur eine Zahl angegeben werden. Diese bestimmt dann auch die Höhe, die immer identisch ist. | ||||||||
| fg_color | Vordergrundfarbe als gültiger HTML-Ausdruck, wobei rgba(r,g,b,a) und #rrggbbaa die separat angegebene oder von den Einstellungen übernommene Transparenz überschreiben. | ||||||||
| fg_transparency | Prozentsatz der Transparanz von 100%, was unsichtbar bedeutet, bis 0% was keine Transparenz bedeutet. Dies kann über einen Farbwert mit 4 Einträgen überschrieben werden. | ||||||||
| bg_color | Hintergrundfarbe – siehe Vordergrundfarbe | ||||||||
| bg_transparency | Transparenz der Hintergrundfarbe – siehe Transparenz der Vordergrundfarbe | ||||||||
| qrcode_variation | Anpassung des Aussehens der Blöcke im QR-Code.
|
||||||||
| image_template | Muster für die Dateinamen bei der Bildauswahl. Er sollte ein einziges %q enthalten und keine Leerzeichen. Dieses wird dann durch den Inhalt des Parameters ersetzt. Für die Parameterwerte sollten möglichst URL-fähige Werte gewählt werden ohne Umlaute und Sonderzeichen. | ||||||||
| image_template_none | Wert für die Dateinamen, falls kein Parameter übergeben wurde. | ||||||||
| url_template | Wie bei image_template nur wird dieses bei qr_url verwendet und direkt in den QRCode gepackt. | ||||||||
| url_template_none | Wert, falls kein Parameter übergeben wurde. | ||||||||
| giro_bic | Wert der BIC des Empfängers ohne Leerzeichen und in Großbuchstaben. | ||||||||
| giro_recipient | Name der Empfängerin, so wie er für SEPA-Überweisungen verwendet werden darf, also ohne Sonderzeichen und Umlaute. | ||||||||
| giro_iban | IBAN der Empfängerin – es wird nicht geprüft ob diese gültig ist. | ||||||||
| giro_ammount | Betragsvorschlag, dieser kann in der Banking-App dann geändert werden. Dieses Feld kann man auch komplett leer lassen, dann wird kein Betrag vorgegeben. | ||||||||
| giro_template | Muster für den Verwendungszweck, wie bei den anderen Mustern kann hier ein %q verwendet werden, es sollten aber nur Zeichen benutzt werden, die auch in SEPA-Überweisungen erlaubt sind. Der Text sollte auch nicht zu lang werden, da ansonsten der QRCode sehr groß werden kann. | ||||||||
| giro_template_none | Fester Wert für den Verwendungszweck, wenn kein Parameter übergeben wurde. |
Beschreibung der Einstellungen
Die Einstellungen finden sich im WordPress Hauptmenü unter Einstellungen/Dynamic Image und sind selbsterklärend. Wirklich relevant ist nur die Verwaltung der Bilder für die dynamische Anzeige. Dazu wird ein Verzeichnis manuell angegeben, wer sich nicht gut mit WordPress auskennt, sollte dieses immer auf der Vorbelegung stehen lassen.
In den Einstellungen kann man auch Bilder hochladen oder löschen, ohne dass man dazu ein spezielles Werkzeug benötigt.
Beispiele
Unten sind drei Beispiele zu sehen, wie unterschiedliche Nutzungen ausehen können. Wenn Sie möchten können Sie mir eine Freude bereiten und beim Test des GIRO-QRCodes direkt eine Spende an die CFI Kinderhilfe schicken – die sehen dann an dem Verwendungszweck, was der Anlass für die Spende war. Wenn Sie sehen wollen, wie sich die QR Codes bei einem gesetzen Parameter verändern, rufen Sie diesen Test-Link auf.
Beispiel 1: image
[dynamic_image type=image image_template=QRGIRO-%q image_template_none=QRGIRO-Neutral query_parameter=q]
Hier werden Bilder ausgewählt, wenn der Parameter nicht gesetzt wurde, oder kein passendes Bild gefunden wird, wird ein Sonderbild verwendet. Man muss also immer ein Bild das zu dem Neutral-Pattern passt hochladen. Beim Hochladen von Bildern darf auch die vorgegebene Extension für PNG-Bilder nicht vergessen werden. Hier wäre dies QRGIRO-Neutral.png.
Hier wird genau das gleiche erreicht, wie im Beispiel 3 – nur mit vorgefertigten Bildern.
Beispiel 2: qr_url
[dynamic_image type=qr_url url_template=https://vaya-consulting.de/development/?q=%q url_template_none=https://vaya-consulting.de/development/ fg_color=#E90 bg_color=#ffff1030]
Farben können auch als 3 Hex-Ziffen angegeben werden.
Wenn die Transparenz für den Hintergrund in der Vorgaben auf 100% steht, kann dies über das vierte Byte der Farbangabe überschrieben werden.
Beispiel 3: qr_giro
[dynamic_image type=qr_giro width=300 fg_color=#700096 bg_color=#b38cc01d qrcode_variation=fullyrounded]
Für große Codes, wie das bei GIRO-QRs oft der Fall ist, kann die Größe mit width angepasst werden.
Das Aussehen der Blöcke im QR-Code kann über qrcode_variation angepasst werden: normal, dotted, rounded oder fullyrounded.
