Team Members

Introduce your team members.

Introduce your team members with the People widget.
Introduce your team members with the People widget.

The People widget displays photos of people within your team or organisation, and links to their user profile page. You can choose which users to display and in which order to display them by using user groups.

First, create a user account for each user that your wish to display. (This can also be performed by duplicating the example content/authors/admin/ folder for each user and modifying its contents appropriately.)

Add each user to a user group using the user_groups option in the user account at content/authors/<USERNAME>/_index.md. For example setting user_groups: ["Researchers", "Visitors"] in a user account will add that user to the Researcher and Visitors groups which we can display in the People widget.

An example setup can be found in the Research Group template.

Usage

To add this block to your homepage, copy the below YAML configuration for this block into the existing sections on your homepage at content/_index.md.

Alternatively, to create a new page with this block, copy the full YAML front matter below into a new file such as content/hello.md.

You can personalize the appearance of the block such as the user groups to display and what details you to show underneath each user’s profile picture, such as their social links.

---
title: Meet the Team
type: landing

sections:
  - block: people
    content:
      title: Meet the Team
      # Choose which groups/teams of users to display.
      #   Edit `user_groups` in each user's profile to add them to one or more of these groups.
      user_groups:
        - Principal Investigators
        - Researchers
        - Grad Students
        - Administration
        - Visitors
        - Alumni
      sort_by: Params.last_name
      sort_ascending: true
    design:
      # Show user's social networking links? (true/false)
      show_social: false
      # Show user's interests? (true/false)
      show_interests: true
      # Show user's role?
      show_role: true
      # Show user's organizations/affiliations?
      show_organizations: true
---

For advanced use cases, HTML code can even be added to the text content. You may also be interested in developing your own blocks.

Customization

Learn how to customize the block design, such as the background, padding, or even applying your own custom styles.

Tips

Sort by last name

Add the last_name field to each of your user profile files and then set the sort_by: Params.last_name option in the People block, as seen in the above example.

Person not showing in the People widget?

Unfortunately, Hugo will only render a user’s profile if the user has authored a piece of content - i.e. their username appears in the authors field of a page’s front matter.

Therefore, if a user is not displayed, edit the user’s profile (or a content file) to add an authors field containing their username (folder name) to force Hugo to generate their profile even though that user has not authored any content.

For example, if a user is named Dave Smith, edit content/authors/dave-smith/_index.md to add the following YAML snippet:

authors:
- <USERNAME>
Previous
Next