Está copiado en un 99% de la discusión y los ejemplos de código proporcionados por @LeoMcA, incluidos en esta conversación en Meta y en Namati User Card Profile Theme, pero pensé que sería útil extraerlo del hilo y hacerlo ligeramente más general.
Notas
Cualquier usuario que no incluya un valor para una entrada no verá el icono correspondiente en su tarjeta de perfil de usuario.
Los campos personalizados de usuario de Instagram y Twitter solo esperan los nombres de usuario (sin “@” incluido); el nombre se agrega a la URL base.
Recomiendo que los Campos Personalizados de Usuario que tendrán iconos NO se muestren en la Tarjeta de Usuario, ya que de lo contrario resultará un poco redundante tener tanto el texto como los iconos clickeables. Solo es mi opinión, el tema no los oculta automáticamente.
Configuraciones del sitio
Cada entrada de nombre de campo personalizado debe coincidir con el nombre que uses para el campo de usuario personalizado en tu instancia de Discourse. Por defecto, el componente del tema esperará los nombres como se muestra a continuación, pero puedes cambiarlos si lo deseas. Las cadenas distinguen mayúsculas de minúsculas.
instagram_custom_field_name: 'Instagram'
twitter_custom_field_name: 'Twitter'
linkedin_custom_field_name: 'Perfil de LinkedIn'
Ah thanks for testing it out & finding this
i don’t think I have any flairs on my communities,
i looked on yours & i think its the size of the icons making the card bigger. im not much of a css guru but i think ill have to conditionally apply a margin to the avatar for users that have icons
Note that the message button and the background move as well, I was able to correct everything with this, but yeah it needs to be applied conditionally
There’s an incompatibility with the follow plugin: this TC works fine when I’m logged in, but when I access the site as an anonymous user, user cards and the user profile page are broken.
Update: this is not related to the social icon links TC. I’ll report it on the Follow plugin topic.
In /logs I see:
NoMethodError (undefined method id' for nil:NilClass) /var/www/discourse/plugins/discourse-follow/plugin.rb:74:in block (2 levels) in activate!’
I like this! My only issue is the field name and url show up on the card and profile in addition to the icon. How can I hide the field/url text portion?
Thanks yep, reached the same conclusion haven’t quite figured out the conditional style application yet though, sorry. Will try and find someone with more experience with these things
It works like a charm, but I see you’ve hardcoded the use of youtube channels. Some people may prefer to put their username in there? (Some users don’t have channels). I believe this would work better if you would let people just put a youtube link in there instead of a channel/username.
Another thought about the Instagram/Twitter fields: Despite adding a note about only entering usernames into these profile fields, plenty of people just enter the entire URL - I suppose that’s a more common way of doing this on many sites. This got me thinking: perhaps you could detect the presence of ‘https://’ in the value and, if so, don’t add the URL base to it anymore? That would make things a little more forgiving/robust.
excellent, ive added that suggestion now and it should work for both types of inputs now
i’m not sure i know the difference between channels and user profiles in youtube unfortunately. what do you suggest the base url be for youtube? just https://youtube.com/ ?
I think there are /c/ and /u/ links to channels and users, respectively. Honestly, I think the best approach here is to just let people enter a URL and don’t bother to make it too nice?
Ah true, i’ll just get rid of the base url feature for youtube links, so people can enter in a full one, just like the linkedin. Thanks for the suggestion, just updated
disculpa la respuesta extremadamente tardía; espero que hayas podido encontrar una solución mientras tanto.
He añadido una nueva opción que te permite seleccionar un color de icono en el panel de configuración del tema.
ahora puedes cambiarlo a blanco o a algún otro color más compatible con el tema oscuro. ¡ya debería estar disponible!
No sé si esto está relacionado con algún cambio reciente en el núcleo: si inicio sesión con mi cuenta, los enlaces aparecen en las tarjetas de usuario, pero si estoy desconectado (estoy probando con una pestaña anónima), se muestra un error en la consola porque en esta líneauserFields está indefinido. En este caso, la tarjeta de usuario solo muestra el avatar y el nombre de usuario, nada más.
Si verifico la presencia de userFields antes de su primer uso, como probé aquí, la tarjeta se muestra completa, pero no aparecen los enlaces de los iconos de redes sociales.
Lo habilité en mi comunidad y se ve genial.