Custom Profile Link

Theme component
,
1
:discourse2: Summary Add a custom link to the user profile
:hammer_and_wrench: Repository GitHub - discourse/discourse-profile-custom-link
:question: Install Guide How to install a theme or theme component
:open_book: New to Discourse Themes? Beginner’s guide to using Discourse Themes

Install this theme component

A small component to add a customisable link on the user profile.

Shows on…

  1. The expanded user profile

    image
    image1920×913 65.1 KB

  2. The usercard

    image
    image1240×520 37 KB

Settings

image
image1402×1022 92.2 KB

If you leave profile custom link field empty, it will default using the username, so in the example case it would go to

http://github.com/charlie

If you want to use a custom user input field, you have to set the value to the exact name of the userfield, example:

  1. Create the user field

    image
    image2200×668 52.4 KB

  2. Set setting to user field name

    image
    image1484×242 25.8 KB

  3. Have users fill out the field
    /u/[username]/preferences/profile

    image
    image1118×224 5.39 KB

Now it will go to http://github.com/MyRealGithubName

For a more advanced implementation, take a look at the Multiple Custom Profile Links component

20 Likes
2

Does this get “nofollow”? Will it be sent akismet?

This is definitely going to be used by spammers!

1 Like
3

Just a quick nitpick, that should be http://github.com/, right?

Also, any particular reason why this suggests http GitHub instead of https?

4 Likes
4

Haha yes, that’s a typo. Thanks. I’m not reinventing url structures here :stuck_out_tongue_winking_eye:

Not at all

4 Likes
5

Hey @chapoi ! So glad I found this component. I’ve just added to our forum, thanks! I might even switch to the “multiple link” version.

Quick note: there is an extra “the” in the description text below the “profile custom link icon” field :slight_smile:

Is there a specific reason I have to add a component for this, instead of adding another field type for the User Fields?

Cheers

2 Likes
6

Nice catch. :+1: This should tidy it up:

4 Likes
7

I’m not sure I follow the question. User fields aren’t all automatically shown on the profile or usercard.

2 Likes
8

Hey Charlie,
sorry for not being clearer. It would be great if there was a field type for user fields, that allows links instead of just text.

Or are we utilising User Fields all wrong? Here is how we are using them right now:

image
image1424×510 69.6 KB

Links have to be copy-pasted instead of just being clickable.

1 Like
9

Ok now I follow, thanks!

Yeah, that’s actually a fair point you bring up. I’ll look into the possibility of your suggestion; my guess is that there is a reason why that wasn’t done, but I don’t know atm.

2 Likes
10

Awesome, thanks! :bouquet:

1 Like
11

So, I had a look but the necessary changes are way above my designer skills (read: backend databas-y stuff) – so I’m afraid it will be necessary to use the plugin.

An option you could consider is making a feature request, and seeing if that garners more interest.

Cheers!

2 Likes
12

This solution is great and I hope we can help improve it. Our profile link is of the form “https://www.domain.com/user/[USER-ID]/”. The trailing slash wrecks the solution for us. I can add a URL rewrite but a better solution would be to make the code more adaptive. I want working real links back to the site!

I tried to convert the plugin to a theme so I could improve the javascript but that CONVERT Discourse function doesn’t seem to be working.

Can you make the update so that it adds functionality?


import Component from "@glimmer/component";
import { tracked } from "@glimmer/tracking";
import { service } from "@ember/service";

export default class ProfileCustomLink extends Component {
  @service site;
  @tracked customLinkUrl;
  @tracked customLinkFieldId;
  @tracked showCustomLink = false;
  @tracked user = this.args.model.username;
  @tracked userFields = this.args.model.user_fields;

  constructor() {
    super(...arguments);

    if (settings.profile_custom_link_field) {
      const siteUserFields = this.site.user_fields;

      if (!siteUserFields) {
        return;
      }

      const customLinkField = siteUserFields.filterBy(
        "name",
        settings.profile_custom_link_field
      )[0];

      if (!customLinkField) {
        return;
      }

      this.customLinkFieldId = this.userFields[customLinkField.id];
      if (!this.customLinkFieldId) {
        return;
      } else {
        this.showCustomLink = true;
        if (settings.profile_custom_link_prefix.includes("[CUSTOM-LINK-FIELD-ID]")) {
          const url = settings.profile_custom_link_prefix.replace("[CUSTOM-LINK-FIELD-ID]", this.customLinkFieldId);
          this.customLinkUrl = url;
        } else {
          const url = settings.profile_custom_link_prefix + this.customLinkFieldId;
          this.customLinkUrl = url;
        }
      }
    } else {
      const url = settings.profile_custom_link_prefix + this.user;
      this.customLinkUrl = url;
      this.showCustomLink = true;
    }
  }
}
14

@Julian2 I have just posted a feature request for this here, didn’t see your posts on this topic

2 Likes