How to show user total post count beside name

Dev
1

Hi everyone, this is my first post here. I’m wondering how the Blizzard forum shows the total post count of a user besides their name.

image
image1310×745 80.9 KB

I’ve implemented something similar in my forum by using the Discourse API system like below
image
image1303×534 36.1 KB

But I believe there are better ways of doing this. I’m also planning to show the user badge etc. Can anyone help me with this? Thank you.

1 Like
2

I’m wondering if there’s any template/shortcode system exist.

3

Hi!

If you are using the API, I believe this is the correct way.

Could you please share your code with us? We can provide suggestions for improvement, if necessary. :slight_smile:

1 Like
4

Sure

<script type="text/discourse-plugin" version="0.1">
  api.onPageChange(() => {
    // Check if an element with ID 'topic' exists
    if ($('#topic').length > 0) {
      // If 'topic' element exists, find 'data-user-id' attribute
      var userId = $('#topic article').data('user-id');

      // Check if 'data-user-id' attribute exists
      if (userId !== undefined) {
        // Make an API request to get user info
        apiReq(`admin/users/${userId}.json`, 'GET')
          .then(data => {
            // Handle the response data
            console.log('User post count:', data.post_count);

            // Check if the user has a value in user_fields["1"]
            if (data.user_fields && data.user_fields["1"]) {
              // Display the user field inside the first 'names' div
              displayUserField(data.user_fields["1"]);
            }

            // Display the post count inside the first 'names' div
            displayPostCount(data.post_count);
          })
          .catch(error => {
            // Handle errors
            console.error('API request error:', error);
          });
      } else {
        console.log('No data-user-id attribute found');
      }
    } else {
      console.log('No element with ID "topic" found');
    }
  });

  // Function to display the user field inside the first 'names' div
  function displayUserField(userFieldValue) {
    // Find the first 'names' div
    var firstNamesDiv = $('.names:first');

    // Create a span element with classes 'user-title'
    var userFieldSpan = $('<span></span>').addClass('user-title');
    userFieldSpan.text(userFieldValue);

    // Append the span element to the first 'names' div
    firstNamesDiv.append(userFieldSpan);
  }

  // Function to display the post count inside the first 'names' div
  function displayPostCount(postCount) {
    // Find the first 'names' div
    var firstNamesDiv = $('.names:first');

    // Create a span element with classes 'user-title'
    var postCountSpan = $('<span></span>').addClass('user-title');
    postCountSpan.text(postCount + ' posts');

    // Append the post count span element to the first 'names' div
    firstNamesDiv.append(postCountSpan);
  }

</script>

I have the apiReq function on another component

5

In Blizzard, they are showing the post count beside commenters which I couldn’t achieve.

6

I see, you partially use the API. You can definitively improve this code. Give me some minutes, and I will back to you.

2 Likes
7

Sounds good. I’m new in Discourse that’s why I know very little about it.

1 Like
8

I had to make a plugin instead.

In order to obtain the post_count value when viewing a post or a user’s card, it is necessary to serialize the data to include this field. This can only be achieved with the help of a plugin and relying on requests per user is not a realistic solution.

Give it a try. The JS part is in assets if you want to take a look.
One specific thing you may have missed in using the API is the ability to customize via outlets.

Let me know if you want more options.
I don’t know if I should release this plugin as it’s small, but here we go anyway:

5 Likes
9

Thank you so much for the effort. I’ll try it.
My actual plan was to achieve the following feature

  1. Show post count of user in post and comments next to avatar.
  2. Assign a default title to all the members of a group (ex: Admin)
  3. Show trust level beside avatar
  4. Show badge beside avatar.
  5. Show a user_field value beside avatar.
    And options are changeable by admin.
    I also planned to hyperlink the post count so others can click and see the list of posts.

Although, it’s a small plugin, I believe it worth publishing. You may consider to add new features as suggested.
Thank you

10

I installed the plugin but it doesn’t work.

11

I tested it again, and it works fine on my side.

Is the plugin enabled?

image
image712×326 11.1 KB

1 Like
12

It’s working now. Thank you.

13

Sorry to bother you again. After using for a while, I noticed that it doesn’t includes topics. As far I know a topic is also a post.

14

Topics created is another stat. Do you want to add this count to the posts count or add a new text so you would have “topics: xx, posts: yy”?

15

I actually trying to gain something like postCount + TopicCount
simply want to count topics as post.
Also trying to show that after user title (if have any). I tried to modify the plugin code (after forking) but no luck so far.

16

I updated the plugin; let me know if it works for you.

2 Likes
17

Thank you so much. It worked.

18

Looks so cool. Is it possible to add the total reactions + FA icons too?

19

I cant edit, so, I just installed and tested the plugin, and it’s working very well. Except on mobile, where the total number of posts is being displayed on the left side of the name. :frowning:

20

@David_Ghost

You can fix it with some CSS:

.names.trigger-user-card > div:has(.user-post-user__container) {
    order: 2;
}
2 Likes