Customizing the /about page with user bios

Dev
1

The default /about page for a Discourse site that displays info for moderators and admins only displays each user’s username, name, and title. How do I customize the about page so that it also displays the contents of each user’s About me section of their profile?

I understand the general idea outlined here:

  • define a component
  • define a template
  • create a connector file to make use of an existing outlet

However, there is no outlet that works more for my use case, as far as I can tell. Further, it seems that overriding the template for /about or using the modifyClass functionality in the plugin API isn’t recommended. So I’m not sure what to do. I would really appreciate some guidance on the best practice here. Thanks!

Discourse AI seems to think I should go ahead and override the template. Does that seem right?

Discourse AI's response
Add "About Me" to Discourse /about Page AI

aas:

The default /about page for a Discourse site that displays info for moderators and admins only displays each user’s username, name, and title. How do I customize the about page so that it also displays the contents of each user’s About me section of their profile?

I understand the general idea outlined here:

Add custom content that only appears on your homepage

  • define a component
  • define a template
  • create a connector file to make use of an existing outlet

However, there is no outlet that work more my usecase, as far as I can tell. Further, it seems that overriding the template for /about or using the modifyClass functionality in the plugin API isn’t recommended. So I’m not sure what to do. I would really appreciate some guidance on the best practice here. Thanks!

HelperBot:

Okay, I can help you look into the best practices for customizing the /about page to include user profile information like the “About me” section.

You’re right that directly overriding core templates or using modifyClass can be complex and potentially break with updates. It’s generally preferred to use theme components and outlets when possible. Since you mentioned there might not be a specific outlet on the /about page itself, let’s search for discussions on customizing this page or adding user fields.

First, I’ll search for discussions about customizing the /about page, specifically adding profile fields.

Search Meta Discourse

Found 14 results for 'customize about page profile field category:dev'

Search Meta Discourse

Found 4 results for 'customize about page profile field category:theme-component'

Okay, let’s break this down. You want to add the “About me” content from user profiles to the staff list on the default /about page.

You’re correct that the standard theme component approach involves using plugin outlets, and it seems there isn’t a specific, granular outlet within the staff list table on the /about page to easily inject this data.

Based on the search results and common practices, while using outlets is preferred for not breaking future updates, sometimes the only feasible way to customize specific core templates like the /about page is to override them directly within a theme component.

Here’s the likely best approach using a theme component:

  1. Create a Theme Component: If you haven’t already, create a new theme component.
  2. Override the Template:
    • You need to override the about.hbs template.
    • In your theme component, create the file common/templates/about.hbs.
    • Copy the content of the original about.hbs file into your new file. You can find the original here on GitHub.
    • Modify your copy of about.hbs. Find the sections where it iterates through model.admins and model.moderators. Inside the loop (likely within the {{#each}} block), you can access the user object. The “About me” content is usually in user.profile.bio_raw or a similar property. Add this property to the template where you want it displayed for each user.
  3. Enable the Component: Add the theme component to your theme and activate it.

Why this approach?

  • Direct Control: It gives you direct control over the HTML structure of the /about page.
  • Feasibility: Since there isn’t a dedicated outlet inside the user list on that page, this is the most straightforward way to inject content per user in that specific location.

Downsides (as you noted):

  • Maintenance: If Discourse updates the core about.hbs template significantly in the future, your overridden version won’t get those updates automatically. You might need to manually compare and merge changes later. This is the trade-off for customizing core templates without specific outlets.

While the search didn’t turn up an exact example for the /about page, modifying templates to add profile information is a common pattern, as seen in customizations for user cards and profiles:

These examples show that theme components often involve template customization when specific outlets aren’t available. Overriding about.hbs follows this pattern for your specific use case.

aas:

It seems there is no about.hbs template in the discourse/discourse repository. However, the about.gjs template appears to be located at app/assets/javascripts/discourse/app/templates/about.gjs.

HelperBot:

You are absolutely right! Thank you for the correction. Discourse has indeed transitioned to using .gjs (GlimmerJS) templates for many components, including the /about page.

My apologies for referencing the older .hbs format.

The correct path for the template is indeed app/assets/javascripts/discourse/app/templates/about.gjs in the core code.

To override this using a theme component, the process remains conceptually the same, but the file path and syntax are updated:

  1. Create/Use a Theme Component: As before.
  2. Override the Template:
    • In your theme component, create the file at the corresponding path: assets/javascripts/discourse/app/templates/about.gjs.
    • Copy the entire content of the original about.gjs file (link you provided) into your theme component’s about.gjs file.
    • Modify your copy. Look for the sections iterating through admins and moderators, likely using {{#each this.admins as |admin|}} and {{#each this.moderators as |moderator|}}. Inside these loops, you can access the user object (e.g., admin or moderator). Add the “About me” field, which should be accessible via a property like admin.profile.bio_raw or moderator.profile.bio_raw. You’ll need to integrate this into the GlimmerJS template structure. For example, you might add a new <div> or <p> tag within the user’s display block:
      {{#each this.admins as |admin|}}
  <div class="user">
    {{!-- Existing user info like avatar, username, name --}}
    <UserAvatar @username={{admin.username}} @size="large" />
    <div class="user-details">
      <span class="username">{{admin.username}}</span>
      {{#if admin.name}}<span class="name">{{admin.name}}</span>{{/if}}
      {{#if admin.title}}<span class="title">{{admin.title}}</span>{{/if}}

      {{!-- Add the About Me section --}}
      {{#if admin.profile.bio_raw}}
        <div class="about-me">
           {{{admin.profile.bio_cooked}}} {{!-- Use bio_cooked for rendered HTML --}}
           {{!-- Or use bio_raw if you need the raw text: <p>{{admin.profile.bio_raw}}</p> --}}
        </div>
      {{/if}}
    </div>
  </div>
{{/each}}
{{!-- Repeat similar modification for the moderators loop --}}
      (Note: Use bio_cooked if you want the rendered HTML version of the bio, or bio_raw for the plain text. Adjust the HTML structure as needed for your layout.)
  3. Enable the Component: Ensure the theme component is added to your theme and active.

The downside remains the same: overriding core templates like this means you might need to manually update your theme component’s version if the original about.gjs file changes significantly in future Discourse updates. However, given the lack of a more specific outlet, this is the standard way to achieve this level of customization.

1 Like
2

You would use css to hide the “Our Moderators” section and then add your own at the about-after-moderators outlet. You can use app/assets/javascripts/discourse/app/components/about-page-user.gjs as a starting point and then add whatever you want to it.

1 Like