BasisSeminare
Zum Seitenanfang Schritt hoch Schritt runter Zum Seitenende
Avatare hovern - Plugin für das Gaia-Template

Avatare hovern - Plugin für das Gaia-Template

03.01.2016 22:31

Angeregt durch einen Beitrag im Support haben wir hier den Lösungsansatz für ein kleines Plugin entwickelt.
Für alle, die es mit- oder nachbauen möchten - hier eine Schritt-für-Schritt-Anleitung.

Unser Dank geht an alle, die Lösungsansätze beigesteuert haben:
River, Luanna, eini, .BiL. und Sue aus dem Supportforum (Ideengeberin)

Anschauen könnt ihr euch das umgesetzte Plugin hier: Gaia-Testforum.
(Aber nicht über das schrille Layout wundern, in diesem Forum werden auch noch andere Dinge getestet.)


Was soll das Plugin können?

  • Ich will die Avatare in der Mitgliederliste für bestimmte Nutzergruppen komplett ausblenden.
  • Auch für Nutzergruppen, die Avatare sehen dürfen, sollen die Bilder zunächst ausgeblendet bleiben.
  • Beim Überfahren mit der Maus sollen die Avatare sichtbar werden.

Was soll einstellbar sein?

Die Gruppenrechte, damit ich Häkchen setzen kann, wer Avatare sehen darf.

Was brauche ich dafür in meinem Plugin?

  • ein Template-Element für die 'Mitgliederliste' (oder für 'Wer ist online?')
  • Eine Gruppenrechts-Variable


Und Anweisungen im Code:

  1. Ich muss die Avatare ausblenden.
  2. Dann muss ich sie wieder einblenden.
  3. Dann stelle ich sie auf transparent.
  4. Und schließlich sage ich, dass sie beim Hovern nicht transparent sein sollen.


1. Schritt - ich lege mir ein eigenes Plugin an

... oder vergessen hast, wie es geht.

Gehe in die 'Administration' deines Forums auf den Reiter 'Plugins'.
Dort siehst du den PluginStore und auch den Reiter 'Plugin-Entwicklung'.
Den klickst du an.



Nun klickst du auf 'Neues Plugin erstellen'.



Nun musst du deinem Plugin eine ID und einen Namen geben.

Die ID muss eindeutigDie ID´s werden im Pluginsystem Xobor-weit gespeichert und sorgen dafür, dass die Plugins angesprochen und verwaltet werden können.
Jedes Plugin benötigt eine solche eigene Zeichenfolge, mit der es eindeutig identifiziert werden kann, ähnlich wie eine Konto- oder Personalausweisnummer.
Deshalb erscheint die Meldung, dass diese ID schon vergeben ist, wenn man eine eingibt, die es schon gibt. Man nimmt dann einfach eine andere ID.
sein.



Der Name ist der Titel des Plugins, wie er später auch im Store erscheinen würde.
Der Name lässt sich jederzeit ändern, auch wenn alles schon fertig ist.

Also wenn nun ID und Name eingetragen sind, klicke auf 'Plugin anlegen'.



Und schon hast du ein eigenes Plugin erstellt. Es ist zwar noch leer und tut nix, aber es ist schon mal in der Liste deiner Plugins in der Pluginentwicklung zu sehen.


2. Schritt - ich lege mir ein Template-Element an

Du sagst deinem Plugin nun, wo du es ausführen möchtest.

Dein Code soll in der 'Mitgliederliste' oder in 'Wer ist online?' ausgeführt werden.
Also lege ein solches Template-Element an.

... oder du vergessen hast, wie es geht.

Du klickst in deinem Plugin auf 'Neues Element erstellen'



In der Auswahl, die dann erscheint, klickst du auf 'Template Element'.



In der nun erscheinenden Tabelle wählst du in der Option 'Template' das Element 'Mitglieder Liste' (oder 'Wer ist online?') aus.
Darunter setzt du den Punkt auf 'Header'.



Und schließlich klickst du auf 'Hinzufügen'.

Schwub - und schon bist du im Plugineditor, der nur darauf wartet, dass du deinen Code hinein schreibst.


3. Schritt - ich schreibe die Anweisungen in den Code, die mein Plugin ausführen soll

Zunächst brauchst du den Selektor für die Avatarbildchen - .c_r_content2Das ist der Klassenname für den Bereich, in dem unter anderem die Avatare liegen. imgDas sagt, dass es um die Bilder geht (Images), denn dieser Bereich beherbergt ja noch mehr Elemente.


Nachdem, was wir oben geplant haben, brauchst du folgende Anweisungen für dein Plugin:

  1. ausblenden - display: none = nicht anzeigen
  2. einblenden - display: block = anzeigen
  3. transparent darstellen - opacity: 0.0 = komplett Transparent
    und filter: alpha(opacity=0) Extrawurst für iE8 und älter
  4. nicht transparent darstellen - opacity: 1.0 = überhaupt nicht transparent
    und filter: alpha(opacity=100) Extrawurst für iE8 und älter


Das ganze kommt in einen Stylebereich <style>...</style> in den Plugin-Editor.

Wie komme ich in den PI-Editor, wenn ich schon wieder raus bin?


1
2
3
4
5
6
7
8
9
10
11
12
13
 
<style>
.c_r_content2 img {display: none;}
.c_r_content2 img {
display: block;
opacity: 0.0;
filter: alpha(opacity=0);
}
.c_r_content2 img:hover {
opacity: 1.0;
filter: alpha(opacity=100);
}
Achte bei der Eingabe des CSS-Codes auf jedes einzelne Zeichen - [b][FoX-Rot]{ ;}[/FoX-Rot][/b] - selbst die vorangestellten Punkte sind wichtig für die [i]class[/i] ...
</style>
 



Oben rechts - 'Speichern' nicht vergessen.



Nun hast du zwar alle Anweisungen im Code, aber so nützt es dir noch nichts, weil du nicht einstellen kannst, wer die Avatare sehen darf und wer nicht. Also auf zum nächsten Schritt!

4. Schritt - ich erstelle eine Gruppenrechtsvariable

Als Nächstes legst du eine Config VariableKonfigurationsvariable, die dir später erlaubt, Optionen in der Eisntellungsmaske des Plugins vorzunehmen. für die Berechtigung deiner Nutzergruppen an.

Hierfür gehst du in die in die Plugin Bearbeitung, (wenn du noch im Plugin-Editor bist, gelangst du mit dem grünen Pfeil 'Zurück' dorthin) und legst dort die Gruppenrechtsvariable an.

... oder nicht mehr weißt, wie das geht.

Nun klickst du auf 'Neue Config Variable'.



Es erscheint eine Maske, in der du einige Angaben zur neuen Variable machen musst:



Der "Variablen Name" ist ein interner Name, der nur in diesem Plugin verwendet wird.
In anderen Plugins ist es also durchaus erlaubt den selben Namen wieder zu verwenden.
Im Code werden wir später sehen warum es damit keine Probleme gibt.

Die "Gewichtung" ist die SortierungsnummerIn der Feldliste steht dieser Wert dann in der Spalte Sort nach dem Speichern..
In der Einstellungsmaske des Plugins werden die Eingabefelder(Die werden automatisch angelegt wenn eine Variable existiert. aufsteigend nach der Gewichtung sortiert.
Diese Eingabe kann man auch weglassen. Dann werden die Felder unsortiert angezeigt.

Der "Titel" ist der Name dieser Option in der Eingabemaske.
Schreibe hier z.B.: Wer darf die Avatare sehen?

Die "Beschreibung" ist ein optionaler Zusatztext.
Schreibe hier z.B.: Die Nutzergruppen mit Häkchen dürfen Avatare sehen.

"Type" ist der Variablentyp.
Für die Gruppenrechte gibt es einen Spezialtyp: 'grouprights'. Den wählst du aus.

Es erscheint sofort eine Auswahl der Benutzergruppen.
Du kannst dort schon anhaken, welche Gruppe standardgemäß die Avatare sehen darf und wer nicht.

So sieht die Maske nun aus:



Vergiss nicht, anschließend die Variable zu speichern.

Nachdem dein Plugin nun auch eine Gruppenrechtsvariable hat, musst du im nächsten Schritt noch dafür sorgen, dass auch der Code davon erfährt ...

4. Schritt - ich erstelle eine Gruppenrechtsvariable

Als Nächstes legst du eine Config VariableKonfigurationsvariable, die dir später erlaubt, Optionen in der Eisntellungsmaske des Plugins vorzunehmen. für die Berechtigung deiner Nutzergruppen an.

Hierfür gehst du in die in die Plugin Bearbeitung, (wenn du noch im Plugin-Editor bist, gelangst du mit dem grünen Pfeil 'Zurück' dorthin) und legst dort die Gruppenrechtsvariable an.

... oder nicht mehr weißt, wie das geht.

Nun klickst du auf 'Neue Config Variable'.



Es erscheint eine Maske, in der du einige Angaben zur neuen Variable machen musst:



Der "Variablen Name" ist ein interner Name, der nur in diesem Plugin verwendet wird.
In anderen Plugins ist es also durchaus erlaubt den selben Namen wieder zu verwenden.
Im Code werden wir später sehen warum es damit keine Probleme gibt.

Die "Gewichtung" ist die SortierungsnummerIn der Feldliste steht dieser Wert dann in der Spalte Sort nach dem Speichern..
In der Einstellungsmaske des Plugins werden die Eingabefelder(Die werden automatisch angelegt wenn eine Variable existiert. aufsteigend nach der Gewichtung sortiert.
Diese Eingabe kann man auch weglassen. Dann werden die Felder unsortiert angezeigt.

Der "Titel" ist der Name dieser Option in der Eingabemaske.
Schreibe hier z.B.: Wer darf die Avatare sehen?

Die "Beschreibung" ist ein optionaler Zusatztext.
Schreibe hier z.B.: Die Nutzergruppen mit Häkchen dürfen Avatare sehen.

"Type" ist der Variablentyp.
Für die Gruppenrechte gibt es einen Spezialtyp: 'grouprights'. Den wählst du aus.

Es erscheint sofort eine Auswahl der Benutzergruppen.
Du kannst dort schon anhaken, welche Gruppe standardgemäß die Avatare sehen darf und wer nicht.

So sieht die Maske nun aus:



Vergiss nicht, anschließend die Variable zu speichern.

Nachdem dein Plugin nun auch eine Gruppenrechtsvariable hat, musst du im nächsten Schritt noch dafür sorgen, dass auch der Code davon erfährt ...

5. Schritt - ich füge die Gruppenrechtsvariable in den Code ein

Damit die Avatare nur für bestimmte Nutzergruppen sichtbar sind, muss die Gruppenrechtsvariable so im Code positioniert werden, dass sie nur die Anweisungen zulässt, die die Avatare anzeigen und hovern.
Diese Anweisungen sollen ausgeführt werden, wenn die entsprechende Berechtigung angeklickt ist:
.c_r_content2 img - Avatarbildchen 
display: block - anzeigen
opacity: 0.0 - aber transparent darstellen
filter: alpha(opacity=0) - für iE8 und älter

.c_r_content2 img:hover - Avatarbildchen beim Hovern
opacity: 1.0 - nicht transparent darstellen
filter: alpha(opacity=100) - für iE8 und älter
... oder vergessen hast, wie das geht.

Du musst nun wieder in den Code, also in den Plugineditor.

Du gelangst dort hin, indem du auf den Bearbeitungsstift unter 'Action' in der Zeile deines Template-Elements unter 'Pages' klickst.

[Bild folgt]

In deinem Code fügst du an die Stelle, wo die Anweisungen beginnen, die ausgeführt werden sollen, wenn die entsprechende Berechtigung eingestellt ist, eine Leerzeile ein.
Dort positionierst du den Cursor.

Rechts oben siehst du nun 'Config Variablen'.



Wenn du mit der Maus drüber fährt, erscheint deine Variable (wenn du mehrere angelet hast, erscheint dort eine ganze Liste).



Wenn du über die Zeile 'grechte' fahren, erscheint eine weitere Auswahl.
Du klickst auf 'TPL-Insert'.

Die Variable steht dann in der Zeile: {{plugin_deinPluginname_config_rechte}}Hier sieht man, warum der Variablenname nur in diesem Plugin verwendet wird. Der Variablenname ist aus 4 Teilen zusammen gesetzt: "plugin" - "Plugin ID" - "config" - "Variablenname". Die 4 Teile sind durch Unterstriche getrennt.

Aber Achtung - solange die Variable grau markiert ist, ist sie empfindlich. Wenn du dann beginnst, etwas zu schreiben, und sei es nur ein Leerzeichen, ist sie wieder futsch und du muss sie noch einmal reinklicken. Also sorge vor dem Weiterarbeiten dafür, dass du die Markierung los wirst, in dem du z.B. wo anders hinklickst.

So, wie die Variable nun da steht, nützt sie dir noch nichts. Du musst nun klar machen, dass hier das Codestückchen beginnt, das bei vorhandener Berechtigung ausgeführt werden soll.

{{plugin_deinPluginname_config_rechte==true.start}}

==true.start musst du mit der Hand dazu schreiben.

Dann musst du noch die Stelle in deinem Code feslegen, wo die Anweisungen enden, die bei vorhandener Berechtigung ausgeführt werden sollen.

{{plugin_deinPluginname_config_rechte==true.end}}

Also kopiere das doch einfach unten noch einmal und ändere nur das start zu end.

So sieht der Code nun aus:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<style>
.c_r_content2 img {display: none;}
{{plugin_deinPluginname_config_grecht==true.start}}
.c_r_content2 img {
display: block;
opacity: 0.0;
filter: alpha(opacity=0); /* For IE8 and earlier */
}
.c_r_content2 img:hover {
opacity: 1.0;
filter: alpha(opacity=100); /* For IE8 and earlier */
}
{{plugin_deinPluginname_config_grecht==true.end}}
</style>
 


Nun noch speichern ... dann kannst du deine Gruppenrechte in der Einstellmaske deines Plugins regeln.


Viel Spaß!

Einstellungen
  • Erstellt von .BiL. In der Kategorie FoX-Anleitungen am 03.01.2016 22:31:00 Uhr

    zuletzt bearbeitet: 03.01.2016 23:06
Beliebteste Blog-Artikel

Melden Sie sich an, um die Kommentarfunktion zu nutzen


Xobor Xobor Blogs
Datenschutz