Link cliccabili alle icone social sul profilo

[weallwegot (juicecounty.prodigy)]

Un componente tema che include icone social cliccabili nel Profilo Utente e nelle Card Utente, se si utilizza il Componente Tema Directory Card Utente.

È stato copiato al 99% dalla discussione e dagli esempi di codice forniti da @LeoMcA, inclusi in questa conversazione su Meta e nel Namati User Card Profile Theme, ma ho pensato fosse utile estrarlo dal thread e renderlo leggermente più generale.

Note

• Gli utenti che non inseriscono un valore per una voce non vedranno l’icona corrispondente sulla loro card o nel profilo utente.
• I campi personalizzati per Instagram e Twitter si aspettano solo il nome utente (senza “@”); il nome viene aggiunto all’URL di base.
• Consiglio di impostare i Campi Utente Personalizzati che avranno le icone in modo che NON vengano mostrati nella Card Utente, poiché altrimenti risulterebbe un po’ ridondante avere sia il testo che le icone cliccabili. È solo un mio parere, il tema non le nasconde automaticamente.

Impostazioni del Sito

Ogni voce del nome del campo personalizzato deve corrispondere al nome del campo utente personalizzato nella tua istanza di Discourse. Per impostazione predefinita, il componente tema si aspetta i nomi come mostrato di seguito, ma puoi modificarli. Le stringhe fanno distinzione tra maiuscole e minuscole.

instagram_custom_field_name: 'Instagram'
twitter_custom_field_name: 'Twitter'
linkedin_custom_field_name: 'Profilo LinkedIn'

Buon divertimento!

	Repo Github	Discourse-Social-Links-Clickable
	Guida all’installazione	Come installare un tema o un componente tema

[davidkingham]

Ottimo lavoro! L’unico problema che vedo è che il distintivo dell’avatar viene spostato in basso a causa di questo. L’icona dell’albero dovrebbe sovrapporsi al mio avatar.

[weallwegot (juicecounty.prodigy)]

Ah, grazie per averlo testato e per aver trovato questo problema.
Non credo di avere dei badge sulle mie community.
Ho dato un’occhiata alle tue e penso che sia la dimensione delle icone a rendere la scheda più grande. Non sono un esperto di CSS, ma credo che dovrò applicare condizionalmente un margine all’avatar per gli utenti che hanno le icone.

[davidkingham]

Nota che il pulsante del messaggio e lo sfondo si spostano anch’essi. Sono riuscito a correggere tutto con questo, ma sì, deve essere applicato in modo condizionale.

#user-card.no-bg .card-content {
    margin-top: 0px;
}

.user-card-avatar .avatar-flair.rounded, .user-profile-avatar .avatar-flair.rounded {
    bottom: 19px;
}

#user-card .usercard-controls {
    margin-top: 0px !important;
}

[bartv (Bart)]

C’è un’incompatibilità con il plugin Follow: questo TC funziona correttamente quando sono connesso, ma quando accedo al sito come utente anonimo, le card utente e la pagina del profilo utente non funzionano.

Aggiornamento: questo non è correlato ai link delle icone social del TC. Lo segnalerò nel topic del plugin Follow.

Nei log (/logs) vedo:

NoMethodError (metodo id non definito per nil:NilClass) /var/www/discourse/plugins/discourse-follow/plugin.rb:74:in `block (2 levels) in activate!’

cc @angus

[Solari]

Mi piace molto! L’unico problema è che il nome del campo e l’URL vengono visualizzati sulla scheda e nel profilo, oltre all’icona. Come posso nascondere la parte di testo del campo/dell’URL?

Grazie,
Ray

[weallwegot (juicecounty.prodigy)]

Ehi sì, grazie per averlo provato.

Ho appena deselezionato l’opzione “Mostra sulla scheda utente?” sotto i campi personalizzati.

[weallwegot (juicecounty.prodigy)]

Grazie, sì, sono arrivato alla stessa conclusione, anche se non ho ancora capito bene come applicare lo stile condizionale, scusa. Proverò a trovare qualcuno con più esperienza in queste cose.

[Solari]

Ahhh, ha funzionato. È davvero bello, grazie per averlo programmato!

Ray

[bartv (Bart)]

Potresti aggiungere il supporto anche per YouTube, per favore?

[weallwegot (juicecounty.prodigy)]

Sì, dovrebbe essere aggiornato ora. L’ho aggiunto solo come nome. Puoi vederlo qui:

add support for youtube profiles

[bartv (Bart)]

Funziona alla perfezione, ma vedo che hai hardcodato l’uso dei canali YouTube. Alcune persone potrebbero preferire inserire il proprio username? (Alcuni utenti non hanno canali). Credo che funzionerebbe meglio se permetti alle persone di inserire semplicemente un link YouTube invece di un canale o username.

Un’altra riflessione sui campi Instagram/Twitter: nonostante l’aggiunta di una nota che invita a inserire solo gli username in questi campi profilo, molte persone inseriscono l’intera URL - immagino che sia un modo più comune di fare questo su molti siti. Questo mi ha fatto pensare: forse potresti rilevare la presenza di ‘https://’ nel valore e, in tal caso, non aggiungere più la base dell’URL? Questo renderebbe le cose un po’ più permissive e robuste.

[weallwegot (juicecounty.prodigy)]

@bartv

forse potresti rilevare la presenza di ‘https://’ nel valore e, in tal caso, non aggiungere più la base dell’URL? Questo renderebbe le cose un po’ più flessibili e robuste.

ottima idea, ho appena aggiunto quel suggerimento e ora dovrebbe funzionare per entrambi i tipi di input.

@bartv

Alcune persone potrebbero preferire inserire il proprio nome utente? (Alcuni utenti non hanno canali). Credo che funzionerebbe meglio se permettesti alle persone di inserire semplicemente un link di YouTube invece di un canale o un nome utente.

purtroppo non sono sicuro di conoscere la differenza tra canali e profili utente su YouTube. Cosa suggerisci come URL base per YouTube? Solo https://youtube.com/?

[bartv (Bart)]

Credo che ci siano link /c/ e /u/ rispettivamente per i canali e gli utenti. Onestamente, penso che il miglior approccio qui sia semplicemente permettere alle persone di inserire un URL e non preoccuparsi di renderlo troppo elegante?

[weallwegot (juicecounty.prodigy)]

Ah, vero, rimuoverò la funzione dell’URL di base per i link di YouTube, così le persone potranno inserire un link completo, proprio come per LinkedIn. Grazie per il suggerimento, ho appena aggiornato.

[bartv (Bart)]

Splendido, grazie!

[Solari]

Sono un principiante assoluto – ho provato a personalizzare il CSS per cambiare il colore del font delle icone, dato che uso un tema scuro, ma non riesco a far funzionare.

Penso che la classe sia iconic-user-fields. Ho provato a cambiare il colore di quella classe e anche usando !important, ma senza successo.

Qualche suggerimento?

Grazie!
Ray

[weallwegot (juicecounty.prodigy)]

Ci scusiamo per la risposta estremamente in ritardo; speriamo abbiate trovato una soluzione nel frattempo.

Ho aggiunto una nuova impostazione che vi permette di scegliere il colore dell’icona nel pannello di configurazione del tema.
Quindi ora potete semplicemente cambiarlo in bianco o in un altro colore più compatibile con il tema scuro. Dovrebbe essere disponibile ora!

[renato (Renato Atilio)]

Innanzitutto, grazie per questo componente del tema L’ho abilitato nella mia community e l’aspetto è molto carino.

Non so se qualcun altro abbia riscontrato questo problema, ma con il componente del tema abilitato, la scheda utente su mobile presenta un certo sovrapposizione:

Ho utilizzato questo CSS per mobile come soluzione temporanea, in modo che la scheda appaia come prima quando non vengono forniti collegamenti social:

.iconic-user-fields {
  padding-bottom: 0 !important;
}
#user-card {
  .usercard-controls {
      margin-top: 1em !important;
  }
}

Probabilmente non è una soluzione universale, ma ha funzionato per la nostra community negli scenari rilevanti.

[renato (Renato Atilio)]

Non so se questo sia correlato a qualche recente modifica del core: se sono loggato con il mio account, i link appaiono sulle card utente, ma se sono disconnesso (sto testando con una scheda anonima) viene stampato un errore nella console perché su questa riga userFields è undefined. In questo caso, la card utente mostra solo l’avatar e il nome utente, nient’altro.

Se controllo la presenza di userFields prima del suo primo utilizzo, come ho testato qui, la card viene mostrata interamente, ma non ci sono i link alle icone dei social.

Qualcun altro sta riscontrando questo problema?