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:

Neuerungen in WoltLab Suite 6.2: Grid & List Views - WoltLab®

Mit diesem Blog-Artikel beginnt unsere Artikel-Serie, in der wir in den nächsten Wochen die wichtigsten Neuerungen und Verbesserungen in WoltLab Suite 6.2…

www.woltlab.com

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

https://spritegen.website-performance.org/

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:

<?php
namespace wcf\system\option\user;
use wcf\data\user\option\UserOption;
use wcf\data\user\User;
use wcf\util\StringUtil;


class LOGOOptionOutput implements IUserOptionOutput {
/**
* @see    \wcf\system\option\user\IUserOptionOutput::getOutput()
*/
public function getOutput(User $user, UserOption $option, $value) {
if (empty($value)) return '';


return '<span class="logo logo-'.$value.' jsTooltip logo" title="'.$value.'"></span>';
}
}

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:

<small>DEINE BESCHREIBUNG</small>

Mögliche Probleme & Ursachen

Da hier und da doch der eine oder andere User von euch Probleme mit der Einbindung dessen hat, hier ein paar Ursachen und ggf. auch ihre Behebung:

• Mein Bild wird nicht im Profilfeld angezeigt:
  • Die CSS-Datei liegt nicht im Verzeichnis /style/
  • Pfad in der CSS-Datei stimmt nicht (muss manuell überprüft werden und ist im Code ganz oben deklariert: background-image: url('../images/logo.png');)
  • Im ACP muss unter Nachrichten -> Seitenleiste -> Ausgewählte Profilfelder der Autoren anzeigen das Profilfeld ausgewählt werden

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