Unterschiedlicher Standardavatar je nach Stil

  • Hallo,


    ich habe 2 unterschiedliche Stile entwickelt, Im nicht eingeloggten Zustand sollen die Avatarbilder durch Standardsymbole ersetzt werden. Das funktioniert durch einfaches ersetzen der Datei (.SVG) bestens.


    Allerdings ist ein Stil hell und einer dunkel. Deswegen möchte ich in einem Stil den Standardavatar invers anzeigen. Der Avatar "standard" soll ein weißer Pfeil in einem schwarzen Kästchen sein (momentan invers). Und da scheitere ich gerade.


    Ich habe zwar die Klasse userAvataImage, aber wenn ich die überschreibe, dann habe ich immer überall den Standardavatar - auch im eingeloggten Zustand. Und im eingeloggten Zustand möchte ich ja, dass auch individuelle Avatare angezeigt werden. Oder habe ich da einen Denkfehler?


    Jemand einen Tipp wie man das realisieren kann?


    Danke & Grüße
    CCFF

  • Huch, das beschreibt ja meine Problemstellung auch :)


    Ich bin hier mittlerweile so weit gkommen:
    Wenn es erreicht werden könnte den Aufruf des Default-Avatars in der 'DefaultAvatar.class.php':

    PHP
    return WCF::getPath().'images/avatars/avatar-default.svg';


    in einen direkten SVG XML Code zu ändern (Beispiel):


    Dann ließe sich dieser Quellcode direkt in jedem Style individuell per CSS ansprechen und mittels der 'Fill' Eigenschaft Farben zuweisen.



    Blöderweise wird aber der komplette HTML <img> String dann in diversen Templates erzeugt und bezieht sich dann, weil ja die Unterscheidung 'Default' oder 'Custom' Avatar bereits in der .php erfolgt ist, immer auf alle Avatare.


    Die Frage die ich mir gerade stelle:
    Könnte man das per Rewrite in der .htaccess erreichen?
    Also:
    Ersetze

    HTML
    '<img src="http://test.pinballz.net/wcf/images/avatars/avatar-default.svg" style="width: 32px; height: 32px" alt="" class="userAvatarImage">'


    durch das was oben im XML Quellcode steht.

  • Hallo,


    nein, das funktioniert am Ende wie von Black Rider beschrieben nur über ein Plugin.


    Im Prinzip musst Du eine kleine Klasse schreiben, die zwischen den beiden Stilen unterscheidet. Hatte leider noch keine Zeit mich näher damit zu beschäftigen, weil ich erst mal noch ein paar ganz Elementare Probleme lösen muss.


    PS: Was willst Du denn mit der htaccess erreichen. Die weiß doch nicht welcher Stil ausgewählt ist. ;)


    Grüße, CCFF

  • Wenn es gelänge, das HTML für den Aufruf des Default Avatars eben von der Nutzung einer .svg Datei dahingehend zu verändern, das eben der direkte XML Code der SVG verwendet würde, dann ist es .htaccess vollkommen egal, welcher Stil gewählt ist.
    Das zuweisen von Größe und Füllfarbe der SVG kannst du ja dann in jedem Stil per CSS erledigen.
    Man müsste nur einmal die, vom Code erzeugte, SVG an der passenden Stelle in den Quellcode bekommen.
    Wenn nun per .htaccess jeglicher Aufruf der avatar-default-svg in den Code ersetzt würde der die Grafik direkt aus XML generiert, ist das Problem gelöst.


    Eine Alternative schwebt mir dabei auch gerade noch vor:
    Wenn es möglich ist in der 'DefaultAvatar.class.php' vor dem Aufruf der Zeile 'return WCF::getPath().'images/avatars/avatar-default.svg'; ' den gewählten Stil des Users auszulesen, dann könnte man mittels einer php Abfrage auch einfach auf die verschiedenen Stile bzw. Farben verzweigen:
    Wenn User y Stil x hat dann rufe avatar-default-red.svg auf
    Wenn User a Stil b hat dann rufe avatar-default-blue.svg auf
    Wenn User r keinen besonderen Stil ausgewählt hat hat dann rufe avatar-default.svg auf

  • Hi,


    und letzteres wäre genau die Logik für das Plugin.


    Ob man den verwendeten Stil direkt im Template auslesen kann - interessante Frage.


    Grüße, CCFF

  • Im Template eher nicht, das müsste schon in der DefaultAvatar.class.php geschehen.


    Wäre aber nur die nicht wirklich befriedigende Lösung. Immerhin müssten ja dann auch nicht registrierte Gäste mit in die Überlegung einbezogen werden.


    Das mit der SVG aus XML Code wäre weitaus eleganter.


    Wenn das mal irgendwie bewerkstelligt werden könnte, kann man über ein Plugin nachdenken. :)

  • Problem gelöst!


    Finde in 'DefaultAvatar.class.php:

    PHP
    return '<img src="'.StringUtil::encodeHTML($this->getURL($size)).'" style="width: '.$size.'px; height: '.$size.'px" alt="" class="userAvatarImage" />';


    Ersetze mit (eurem SVG XML Code):


    Jetzt lässt sich der Avatar mittels CSS über die Class 'userstyle' anpassen :)
    Beachte: Die Farbe des Avatars wird jetzt über 'fill: #[euer hexcode];' zB 'fill: #c0c0c0;' bestimmt.


    Der SVG XML Quellcode lässt sich ganz einfach mit jedem Texteditor auslesen, einfach die .svg Datei damit öffnen...

    Edited once, last by Pinballz ().

  • Wenn einzelne Shapes (<ellipse... , <path... ) verändert werden sollen, geht das übrigens genauso einfach. Dann wird einfach deren ID angesprochen:


    .userstyle {
    fill: #c0c0c0;
    }
    #path3363 {
    fill: #fff;
    }


    Das komplette Bild wird in Grau dargestellt, 'Ellipse' mit der ID path 3363 ist weiss.
    Rahmen etc. sind auch möglich

  • Hi,


    interessanter Ansatz. Man könnte das übrigens auch über einen js svg Injector lösen.


    Ich bin aber nach wie vor eher für ein Plugin. Denn das was Du da gemacht hast kannst nur Du nachvollziehen - ein außenstehender oder zweiter Admin wird da Schwierigkeiten haben. ;) Und es bietet auch nur Flexibilität für genau 1 svg Element. Was aber, wenn jemand unterschiedliche SVG Symbole verwenden möchte. ;)


    Von der Idee aber keine schlechte Sache.


    Grüße, CCFF

  • Problem Nachvollziehbarkeit: Ich habe die Lösung natürlich in unserem internen Adminforum dokumentiert :)


    Ja, sicher lässt das nur die Manipulation eines SVG Elements zu, richtig. Aber letzten Endes ging es doch um verschiedene Styles und die Farbgebung des Avatars. Das ist jetzt möglich und sollte so auch deine ursprüngliche Problemstellung lösen.


    Natürlich ändert das nichts an der Tatsache das nach wie vor nur ein Avatar als Default vorhanden ist. Dazu würde es wohl in der Tat eine Selektion je nach gewähltem Style erfordern auf deren Grundlage der Avatar dann zugewiesen wird.

Participate now!

Don’t have an account yet? Register yourself now and be a part of our community!