HowTo: Benutzerprofilfeld mit Bild in der MessageSidebar

In der letzten Zeit ist hier nicht viel passiert. Privat bin ich momentan einfach ziemlich eingebunden, was die Arbeiten an neuen und auch weiterentwickelten Plugins erschwert. Doch möchte ich heute zeigen, wie man ein Benutzerprofilfeld mit einem Bild in der MessageSidebar einfügt. Dabei wird auf den Feldtyp "select" zugegriffen, wo es verschiedene Auswahloptionen gibt, die von euch festgelegt werden sollten. Außerdem wird eine PHP-Klasse hinterlegt, die die Ausgabe regelt.

CSS anlegen

Die jeweiligen Logos habe ich als Sprite mit diesem Generator zusammengefügt:

CSS Sprite Generator


Dieser unterstützt allerdings nur maximal 20 Bilder, deswegen hier eine Alternative, die das Gleiche tut:

CSS Sprite Generator, Editor, and Code


Dort muss dann lediglich in der CSS Datei (die unter "style" liegen muss) der Pfad angepasst sowie eine CSS Class Prefix (im Code-Beispiel unten ist dies "logo") hinterlegen werden.

PHP Klasse hinterlegen

Die PHP-Klasse muss unter lib\system\option\user eingefügt werden:


Entsprechende "LOGO" bzw. "logo" müssen dann noch angepasst werden, je nachdem, wie CSS und Tooltip benannt werden.

Tooltip mobil?

Da gibt es wohl widersprüchliche Aussagen drüber. Wer natürlich darauf verzichten möchte und lieber eine kleine Beschreibung (die dann dauerhaft sichtbar wäre) hinterlegen will, kann das auch gerne tun. Zum Beispiel dann einfach hinter dem schließenden span-Tag folgendes einfügen und den Tooltip Part aus dem obigen Code entfernen:


HTML
<small>DEINE BESCHREIBUNG</small>

Sollte es da noch offene Fragen geben, gerne her damit. :)