Un composant de thème qui inclut des icônes sociales cliquables dans le Profil utilisateur et les Cartes utilisateur, si vous utilisez le composant de thème User Cards Directory.
Il est copié à 99 % de la discussion et des exemples de code fournis par @LeoMcA, inclus dans cette conversation sur Meta et dans le thème Namati User Card Profile, mais j’ai pensé qu’il serait utile de l’extraire du fil de discussion et de le rendre légèrement plus général.
Notes
Tout utilisateur qui ne fournit pas de valeur pour une entrée n’aura pas l’icône correspondante affichée sur sa carte utilisateur/profil.
Les champs personnalisés Instagram et Twitter attendent uniquement les noms d’utilisateur (sans le “@”), le nom est ajouté à l’URL de base.
Je recommande de configurer les champs personnalisés qui auront des icônes pour qu’ils ne s’affichent PAS sur la carte utilisateur, car il serait alors un peu redondant d’avoir à la fois le texte et les icônes cliquables. Ce n’est que mon avis, le thème ne les masque pas automatiquement.
Paramètres du site
Chaque entrée de nom de champ personnalisé doit correspondre à ce que vous appelez le champ utilisateur personnalisé dans votre instance Discourse. Par défaut, le composant de thème s’attend à ce que les noms soient comme indiqué ci-dessous, mais vous pouvez bien sûr les modifier. Les chaînes sont sensibles à la casse.
Bon travail ! Le seul problème que je vois est que l’insigne de l’avatar est déplacé vers le bas à cause de cela. L’icône de l’arbre devrait se superposer à mon avatar.
Ah, merci de l’avoir testé et d’avoir trouvé ça.
Je ne pense pas avoir de badges sur mes communautés.
J’ai regardé sur les tiennes et je pense que c’est la taille des icônes qui agrandit la carte. Je ne suis pas un expert en CSS, mais je pense devoir appliquer une marge conditionnelle à l’avatar pour les utilisateurs qui ont des icônes.
Notez que le bouton de message et l’arrière-plan bougent également. J’ai pu tout corriger avec cela, mais oui, cela doit être appliqué de manière conditionnelle
Il y a une incompatibilité avec le plugin Follow : ce TC fonctionne bien lorsque je suis connecté, mais lorsque j’accède au site en tant qu’utilisateur anonyme, les cartes utilisateur et la page de profil utilisateur sont cassées.
Mise à jour : cela n’est pas lié aux liens d’icônes sociales du TC. Je vais le signaler sur le sujet du plugin Follow.
Dans /logs, je vois :
NoMethodError (méthode id non définie pour nil:NilClass) /var/www/discourse/plugins/discourse-follow/plugin.rb:74:in `block (2 levels) in activate!’
J’aime bien ! Mon seul problème est que le nom du champ et l’URL s’affichent sur la carte et le profil, en plus de l’icône. Comment puis-je masquer la partie texte du champ/de l’URL ?
Merci, oui, j’en suis arrivé à la même conclusion. Je n’ai pas encore tout à fait compris l’application du style conditionnel, désolé. Je vais essayer de trouver quelqu’un de plus expérimenté dans ce domaine.
Ça fonctionne à merveille, mais je vois que vous avez codé en dur l’utilisation des chaînes YouTube. Certaines personnes préfèrent peut-être y mettre leur nom d’utilisateur ? (Certains utilisateurs n’ont pas de chaîne). Je pense que cela fonctionnerait mieux si vous permettiez aux gens de simplement coller un lien YouTube à la place d’une chaîne ou d’un nom d’utilisateur.
Une autre réflexion concernant les champs Instagram et Twitter : malgré l’ajout d’une note précisant qu’il ne faut entrer que des noms d’utilisateur dans ces champs de profil, beaucoup de gens entrent tout simplement l’URL complète — je suppose que c’est une méthode plus courante sur de nombreux sites. Cela m’a fait réfléchir : peut-être pourriez-vous détecter la présence de « https:// » dans la valeur et, dans ce cas, ne plus ajouter la base de l’URL ? Cela rendrait le système un peu plus tolérant et robuste.
Excellent, j’ai intégré cette suggestion et cela devrait maintenant fonctionner pour les deux types de saisie.
Je ne suis malheureusement pas sûr de connaître la différence entre les chaînes et les profils d’utilisateurs sur YouTube. Que suggérez-vous comme URL de base pour YouTube ? Simplement https://youtube.com/ ?
Je pense qu’il y a des liens /c/ et /u/ vers les chaînes et les utilisateurs, respectivement. Honnêtement, je pense que la meilleure approche ici est de simplement permettre aux gens de saisir une URL et de ne pas s’embêter à rendre ça trop joli ?
Ah, c’est vrai, je vais simplement supprimer la fonctionnalité d’URL de base pour les liens YouTube, afin que les utilisateurs puissent entrer une URL complète, comme pour LinkedIn. Merci pour la suggestion, c’est déjà mis à jour.
Nouveau venu ici — j’ai essayé de personnaliser le CSS pour changer la couleur des icônes puisque j’utilise un thème sombre, mais je n’arrive pas à faire fonctionner.
Je vois que la classe est iconic-user-fields, je pense. J’ai essayé de modifier la couleur de cette classe et aussi avec !important, mais ça n’a pas marché.
Veuillez nous excuser pour ce retard considérable dans notre réponse — nous espérons que vous avez pu trouver une solution entre-temps.
J’ai ajouté un nouveau paramètre qui vous permet de choisir la couleur d’une icône dans le panneau de configuration du thème.
Vous pouvez donc désormais simplement la modifier en blanc ou en une autre couleur plus compatible avec le thème sombre. Cela devrait être disponible dès maintenant !
Tout d’abord, merci pour ce composant de thème Je l’ai activé sur ma communauté et le résultat est sympa.
Je ne sais pas si d’autres personnes ont rencontré ce problème, mais avec le composant de thème activé, la carte utilisateur sur mobile présente un chevauchement :
J’ai utilisé ce CSS pour mobile comme solution de contournement afin que la carte ait la même apparence qu’avant, lorsque aucun lien social n’est fourni :
Je ne sais pas si cela est lié à un changement récent du cœur : si je suis connecté avec mon compte, les liens s’affichent sur les cartes d’utilisateur, mais si je suis déconnecté (je teste avec un onglet anonyme), une erreur est envoyée à la console car sur cette ligne, userFields est indéfini. Dans ce cas, la carte d’utilisateur n’affiche que l’avatar et le nom d’utilisateur, rien d’autre.
Si je vérifie la présence de userFields avant sa première utilisation, comme je l’ai testé ici, la carte s’affiche entièrement, mais aucun lien d’icône de réseau social n’apparaît.
Je l’ai activé sur ma communauté et le résultat est sympa.