Blogshox

Smilies in Textpattern

Okay, heute wollen wir hier mal etwas neues versuchen. Ich mache mich an mein erstes Tutorial, nachdem ich im Textpattern Support Forum darum gebeten wurde.
Es geht um das leidige Thema, dass Textpattern leider keine Smilies unterstützt und man hier ein wenig nachhelfen muss.
Meinen Weg, um ein paar Smilies zu ermöglichen, will ich hier beschreiben.

Der vielleicht wichtigste Baustein auf unserem Weg ist das ied_replacer Plugin. Zusätzlich müsst ihr euch noch um passende Smilies kümmern und diese auf eurem Webspace hochladen. Die Smilies auf meiner Seite nutze ich zum Beispiel mit freundlicher Genehmigung von macinacs. Aber es gibt auch noch viele andere. Zur Not einfach mal bei google suchen.
Falls ihr die Smilies und den dazugehörigen Eingabecode nur auf einer seperaten HTML Seite anzeigen lassen wollt (zum Beispiel als Pop-Up, ähnlich wie die Texttile Hilfe), dann habt ihr jetzt schon alles zusammen.
Ich habe mich noch zusätzlich für Greybox entschieden, um meine Smilies in einem Ajax Fenster über dem normalen Fenster einblenden zu lassen. Warum Greybox? Mir war es vor allem wichtig, dass die Skripte, die geladen werden müssen, nicht so groß sind und da schienen mir die 22kB gerade richtig. Es funktioniert natürlich auch mit anderen Javascript Frameworks. Ich beschränke mich im weiteren Verlauf aber auf Greybox.

Kommen wir jetzt zum eigentlichen Teil des Tutorials:
Zuerst laden wir das ied_replacer Plugin im Administrationsbereich von Textpattern hoch und aktivieren es. Über den Menüpunkt “bearbeiten” können wir nun auf den Code des Plugins zugreifen. Hier müssen alle Zeichenkombinationen hinein geschrieben und mit den zugehörigen Bilder verknüpft werden, um später die Zeichenkombinationen im Text zu Smilies werden zu lassen.
Ich habe mich dafür entschieden nur die gängigsten Smilies, wie “Lachen” und “Zwinkern” in der “Strichpunktnotation” (also ;-) oder :-D) zuzulassen und alle anderen in folgendem Schema erstellt: :Smilie: (Doppelpunkt gefolgt vom Smilienamen und wieder ein Doppelpunkt direkt dahinter). Das kann jedoch jeder selbst entscheiden, wie er/sie es gerne hätte.
Im Prinzip muss nur beliebig oft folgende Zeile bei den im Code schon eingegebenen “Strichpunktbeispielen” eingefügt und eben angepasst werden:

Wobei Zeichenkombination1 eben eure gewünschte Zeichenkombination (bei mir :Smilie:) und Zeichenkombination1.gif das Bild des entsprechenden Smilies ist.

Wenn ihr das gemacht habt und alles gespeichert habt, dann müsst ihr noch – an den Stellen, an denen später die Zeichenkombinationen durch die Smilies ersetzt werden sollen – kleinere Codeschnipsel austauschen. Also unter “Präsentation” -> “Bausteine” folgendes ändern:

Ich habe es auf meiner Seite bisher auf die Kommentare beschränkt, also nur die Veränderung im Kommentarbaustein vorgenommen.

So, wenn ihr das alles gemacht und gespeichert habt, dann geht es ans Ausprobieren. Die Eingabe von eurer gewünschten Zeichenkombination im Kommentarfeld sollte beim Klick auf den Vorschau-Button in das entsprechende zugewiesene Bild geändert werden.
So weit, so gut. Aber noch weiß so gut wie niemand außer euch selbst, wie er die Smilies jetzt einfügen kann. Niemand kennt die von euch ausgewählten Zeichenkombinationen.

Meine Lösung ist die Folgende (geht bestimmt auch eleganter):
Ich habe eine HTML-Datei erstellt, die ich smilie.html genannt habe. Hier habe ich jede einzelne Zeichenkombination und das dazu ausgegebene Bild nebeneinander gestellt, um eine Übersicht zu geben.
Beispiele für die HTML-Datei und das zugehörige Stylesheet seht ihr auf den Bildern.

Beide Dateien danach auf den Webspace hochladen, noch einen Link vom Kommentarfeld auf die smilie.html setzen und schon kann jeder Besucher die Übersicht sehen.
Möglichkeit 1 (ohne Ajax) wie der Link aussehen könnte wäre zum Beispiel folgende:

Somit würde sich ein Pop-Up Fenster öffnen, sobald jemand auf den Link klickt.

Möglichkeit 2 (mit Greybox, wie bei mir) funktioniert so:
Zuerst lädt man alle Dateien des Ordners “greybox” (befindet sich in Greybox_v5_5) auf seinen Webspace. Danach fügt man in “Präsentation” -> “Bausteine” im Header Baustein folgendes innerhalb des head Bereiches ein:

Dadurch werden die benötigten Skripte geladen.
Im Kommetarfeld-Baustein fügt man dann zum Beispiel folgendes ein:

Alles abspeichern und wieder ausprobieren. Bei einem Klick auf den erstellten Link im Kommentarfeld sollte sich nun ein Fenster mit dem Inhalt der erstellen smilie.html Datei über dem vorher aktiven Fenster einblenden.
So, das war es auch schon. Vielleicht ist es nicht perfekt, aber es erfüllt meine Anforderungen und die Nutzer scheinen damit gut klar zu kommen.

Falls es irgendwo zu Problemen kommen sollte, dann überprüft bitte vor allem, ob ihr die Pfadangaben zu den einzelnen Dateien und Bildern immer korrekt abgeändert habt, falls ihr sie von mir kopiert haben solltet.
Natürlich freue ich mich auch über Feedback und Verbesserungsvorschläge.