Badge per utenti e gruppi

In alcune situazioni può risultare utile assegnare agli utenti del proprio forum o blog uno o più badge, ossia immagini personalizzate, differenti a seconda di particolari circostanze. Ad esempio nel caso di vincitori di contest, sfide o gare, piuttosto che di utenti con particolari meriti.
Fino ad ora si è dovuto fare affidamento al campo Titolo Personalizzato dei profili, con i suoi pregi e i suoi difetti. Oltre al limite di caratteri, questo titolo risulta essere unico per tutti i forum o blog, a discrezione dell'utente, nonché impossibile da gestire in modo centralizzato dagli amministratori o admin degli script.
D'altra parte anche il campo Targhetta presente in amministrazione utenti risulta inadatto a questo scopo. Infatti ogni utente può far parte al massimo di un gruppo, esclusi quelli pre-esistenti, e non si può assegnare targhette diverse a utenti dello stesso gruppo.
Grazie a questo codice sarà possibile aggiungere tra le informazioni dell'account nelle discussioni e nelle pagine dei profili uno o più badge personalizzati per singoli utenti e gruppi. Nel caso di contest, sfide o gare è possibile sfruttare tutte le potenzialità dello script usandolo insieme allo Score System per assegnare badge e, al contempo, tenere traccia dei punteggi ottenuti dai vari partecipanti.

Installazione

L'inserimento dello script sul forum o blog è semplicissimo. Grazie al pannello di gestione script, EasyScript, disponibile per tutti i siti e accessibile da Amministrazione > Funzioni aggiuntive > Script e codici o tramite il link diretto, è sufficiente cercare lo script nell'elenco e cliccare sul pulsante verde "Installa" presente sotto l'anteprima.

Personalizzazione

Cliccando sul pulsante "Impostazioni", rappresentato dall'icona ingranaggio, sarà possibile inserire i vari badge.

I campi disponibili per i badge sono:

• Link dell'immagine che verrà usata come badge: si tratta dell'immagine che verrà aggiunta tra le infomazioni degli account specificati in seguito. È necessario che l'immagine abbia il protocollo sicuro https.
• Note: campo opzionale in cui è possibile scrivere alcune note sul badge in questione (utile se non riesce a identificare il badge dal solo link inserito nel campo precedente). Le note saranno visibili in un eventuale riepilogo.
• Larghezza massima del badge in pixel: in questo campo è possibile inserire la larghezza massima dell'immagine usata come badge. Se l'immagine specificata precedentemente risulta essere più grande, verrà ridimensionata. Se non si vuole limitare la dimensione del badge, è possibile inserire il valore 0 (zero).
• Titolo che verrà visualizzato accanto al badge (opzionale): si tratta di un breve titolo che verrà visualizzato accanto al badge. Questo campo è opzionale, può essere lasciato vuoto. Tip: talvolta si vuole aggiungere più immagini una accanto all'altra, come se componessero un unico badge. Ciò risulta possibile assegnando ai vari badge lo stesso titolo. I badge che hanno lo stesso titolo infatti verranno aggiunti sulla stessa riga.
• Lista di ID separati da virgole degli utenti che avranno questo badge: in questo campo è possibile inserire un elenco di ID separati da virgole degli utenti che avranno il badge specificato.
• Lista di ID di gruppi separati da virgole i cui utenti avranno questo badge: in questo campo è possibile inserire un elenco di ID separati da virgole dei gruppi i cui utenti avranno il badge in oggetto.
• Lista di ID di utenti separati da virgole che non avranno questo badge pur appartenendo a uno dei gruppi indicati: in questo campo è possibile inserire un elenco di ID separati da virgole degli utenti che, pur appartenendo a uno dei gruppi inseriti nel campo precedente, non avranno il badge specificato.
• Posizione in cui verrà aggiunto il badge nelle discussioni: tramite questi select è possibile specificare la posizione che occuperà il badge tra le informazioni dell'account nelle discussioni. Sono disponibili tre distinte scelte:
  1. Posizione nelle discussioni del layout Standard: è possibile scegliere tra: non mostrare nelle discussioni, sotto l'avatar, sotto il titolo personalizzato, la targhetta o il livello, sotto il gruppo, sotto il numero dei post, sotto la reputazione, sotto lo status.
  2. Posizione nelle discussioni del layout FFMobile: è possibile scegliere tra: non mostrare nelle discussioni, sotto il nickname, sotto il gruppo. Vista la scarsità di spazio nei dispositivi mobile, è consigliato non mostrare il badge nelle discussioni su mobile.
  3. Posizione nelle discussioni del layout Quirks: è possibile scegliere tra: non mostrare nelle discussioni, sotto l'avatar, sotto il titolo personalizzato, la targhetta o il livello, sotto il gruppo, sotto il numero dei post, sotto la reputazione, sotto lo status.

Per eliminare un badge occorre cliccare sul pulsante X Badge presente accanto all'intestazione dello stesso. Per eliminare tutti i badge si può cliccare sul pulsante X All presente in fondo all'elenco dgli stessi. Dopo ogni operazione è necessario salvare con l'apposito pulsante in fondo alla pagina.

Personalizzazione Grafica

Lo script include già degli stili basilari per una corretta visualizzazione dei badge, tuttavia è possibile in ogni momento aggiungere delle personalizzazioni ai css mediante alcune classi che vengono inserite:

1. .st-badge: questa classe è presente nell'elemento più esterno che racchiude il badge.
2. .st-badge-title: questa classe è aggiunta all'elemento che contiene l'eventuale titolo dato al badge.
3. .st-badge-content: questa classe è aggiunta all'elemento che contiene l'immagine o le immagini del badge.
4. .st-badge-image: questa classe è aggiunta al tag img del badge.
5. .st-badge-post: questa classe è inserita all'elemento più esterno che racchiude il badge nelle discussioni.
6. .st-badge-profile: questa classe è inserita all'elemento più esterno che racchiude il badge nelle pagine dei profili.
7. .st-badge-standard: questa classe è inserita all'elemento più esterno che racchiude il badge nel layout Standard.
8. .st-badge-ffmobile: questa classe è inserita all'elemento più esterno che racchiude il badge nel layout FFMobile.
9. .st-badge-quirks: questa classe è inserita all'elemento più esterno che racchiude il badge nel layout Quirks.
10. .st-badge-{number}: questa classe è inserita all'elemento più esterno che racchiude il badge. Al posto di {number} è presente il numero identificativo del badge.
11. .st-badge-image-{number}: questa classe è inserita al tag img del badge. Al posto di {number} è presente il numero identificativo dell'immagine.

Tutti le legende sono inserite con i css tramite :before e sono quindi personalizzabili liberamente.