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]

Nice work! The only problem I see is the avatar flair gets moved down because of this. The tree icon should be overlapping my avatar.

[weallwegot (juicecounty.prodigy)]

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

[davidkingham]

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

#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)]

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!’

cc @angus

[Solari]

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,
Ray

[weallwegot (juicecounty.prodigy)]

Hey yea thanks for trying it out

I just uncheck the “show on user card?” option under the custom fields

[weallwegot (juicecounty.prodigy)]

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

[Solari]

Ahhh, that did the trick. This is quite nice, thank you for coding it!

Ray

[bartv (Bart)]

Could you add support for YouTube as well please?

[weallwegot (juicecounty.prodigy)]

yep should be updated now. I added it as just the name. you can see here:

add support for youtube profiles

[bartv (Bart)]

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.

[weallwegot (juicecounty.prodigy)]

@bartv

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

@bartv

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

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/ ?

[bartv (Bart)]

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?

[weallwegot (juicecounty.prodigy)]

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

[bartv (Bart)]

Brilliant, thank you!

[Solari]

Rank newbie here – I tried customizing the CSS to change the font color of the icons since I use a dark theme but I can’t get it to work.

I see the class is iconic-user-fields, I think. I tried changing the color of that and also with !important but it didn’t go.

Any suggestions?

Thanks!
Ray

[weallwegot (juicecounty.prodigy)]

apologies for the egregiously late reply - hopefully you were able to find a fix in the meantime.

I added a new setting that allows you pick an icon color in the theme configuration panel.
so now you can just change it to white or some other color more compatible with the dark theme. should be available now!

[renato (Renato Atilio)]

First, thanks for this theme component I enabled on my community and it looks neat.

I don’t know if anyone else had this issue, but with the theme component enabled, the user card on mobile has some overlapping:

I used this CSS for mobile as workaround so the card looks the same as before when no social links are provided:

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

Probably not a general solution but it worked for our community on the relevant scenarios.

[renato (Renato Atilio)]

I don’t know if this is related to some recent core change: if logged in on my account the links show up on user cards, but if logged out (I’m testing with an anon tab) it outputs an error to console because on this row userFields is undefined. In this case, the user card shows only the avatar and username, nothing else.

If I check for userFields presence before its first use as I tested here the card is shown entirely, but no social icon links.

Anyone else having this issue?