The Contributors web part shows the people who edited a page, from its version history. Your visitors see a row of avatars, from the most recent contributor to the oldest, and open each one's profile card in one click.
This article describes the web part's use cases, how to get started, its settings, entering the title on the page and the best practices to follow.
📋 Contents
- About the web part
- Add the web part to your page
- Configure the web part
- Enter and format the title on the page
- Best practices
- What changes from the previous version
1. About the web part
The Contributors web part is made of an optional title and a row of avatars: one avatar per person who edited the page.
The web part always shows the contributors of the page it sits on: there's no source to set. Contributors are the author of the page's last change and the author of each version in its history.
- Each person appears only once, even if they edited the page several times.
- Avatars go from the most recent to the oldest, based on each person's last contribution.
- Each avatar shows the contributor's profile photo, or their initials if they have no photo.
- When you hover over an avatar, a tooltip shows the contributor's name and email address.
- When you click an avatar, the contributor's Microsoft 365 profile card opens.
💡 A person who edits the page again moves back to the front of the row.
💡 If you copy the web part to another page, it shows the contributors of that other page.
If the contributors can't be loaded, the web part shows "Unable to load the contributors." instead of the avatars.
Use cases
- Show who wrote and maintains a procedure or documentation page.
- Give readers someone to contact: a click on an avatar opens the contact card.
- Highlight the contributors of a news page or a collaborative space.
2. Add the web part to your page
- Open the SharePoint page in edit mode by clicking Edit at the top right.
- Where you want the web part, click the "+" button to open the web part catalog.
- Search or scroll the catalog to select Jint - Contributors, in the "News, people, and events" category.
- The web part is added where you want it, with its default values.
A newly inserted Contributors web part carries the title "Contributors" and shows up to 5 avatars, in Medium size, on a white background.
3. Configure the web part
The configuration panel has three tabs: Design, Content and Visibility. Each setting applies to the page immediately, except Number of contributors, which applies when you leave the field.
3.1 Design tab
Contributors
| Setting | Values | Default |
|---|---|---|
| Number of contributors | from 1 to 20 | 5 |
| Avatar size | Small, Medium, Large | Medium |
- Number of contributors: the web part shows at most this number of avatars, those of the most recent contributors. The field only accepts digits.
- If there isn't enough width, the avatars that don't fit wrap to the next line.
Background
| Setting | Values | Default |
|---|---|---|
| Background | Color, Image | Color |
| Background color | a palette color or a custom code | White |
| Choose an image | a SharePoint image | a default image |
| Mark as decorative | on or off | On |
| Alternative text | a text | empty |
| Focal point | a point of the image | the center |
- Color: the background takes the chosen color. Texts without a color of their own placed on this background automatically switch to black or white, whichever contrasts best.
- Image: the background shows the chosen image, cropped around its Focal point. Alternative text appears when the image isn't marked as decorative.
💡 Below the image, the panel reminds you of the recommended format: "Recommended: JPG, PNG or WebP, at least 1920 × 1080 px, under 1 MB."
⚠ If the background image is deleted or moved, the panel shows "Image not found: it may have been deleted or moved. Choose another one." and the web part shows on a white background.
Appearance
The Appearance section sets the web part's border, shadow and corner radius.
By default, the web part follows your site's Jint theme: the section shows "Appearance values come from the theme. The theme is set in Jint Portal." and its settings are disabled. Click Customize to change them. To go back to the theme, click Reset from theme.
| Setting | Values | Default |
|---|---|---|
| Border | on or off, then Subtle, Medium, Marked or a custom width from 1 to 10 px, and a Border color | Off |
| Shadow | on or off, then Light, Medium or Strong | On, Medium |
| Corner radius | on or off, then Soft, Medium, Marked or a Custom radius from 0 to 50 px | On, Medium |
3.2 Content tab
Title
| Setting | Values | Default |
|---|---|---|
| Show title | on or off | On |
The title is entered and formatted directly on the page (see part 4). Turn Show title off to show the avatars only.
3.3 Visibility tab
Audience
Turn on Custom audience to restrict the web part to people or to members of Microsoft 365 groups. Only the chosen visitors, or members of at least one chosen group, see it. For everyone else, it takes up no space on the page.
Display
Turn on Schedule visibility to limit the display in time, with a Display start, a Display end, or both. Each date appears when you turn its switch on: the start is set to the present moment, the end to 7 days later.
| Setting | Values | Default |
|---|---|---|
| Custom audience | on or off, then people and groups | Off |
| Schedule visibility | on or off | Off |
| Display start | on or off, then a date and a time | Off |
| Display end | on or off, then a date and a time | Off |
⚠ If you turn on Custom audience without choosing anyone, no one sees the web part anymore. The section warns you: "No one can see this web part: choose at least one person or group."
⚠ If the display end comes before the start, the panel shows "The end date must be later than the start date." and the schedule doesn't limit the display until you fix it.
💡 In edit mode, you always see the web part, whatever its audience or schedule. A badge tells you so: "Audience", or the display dates.
4. Enter and format the title on the page
The title
Click the title: it becomes editable and a toolbar shows above it. It sets the Text style (H1 to H4 or Body), the Font, the Font size, the Text color, bold, italic, underline and alignment. The Reset formatting button restores the original style. Click outside the title to confirm.
By default, the title is "Contributors", H4, black, 20 px and bold. If you clear the title, your visitors don't see it.
💡 As long as the web part follows the Jint theme, the title's toolbar shows the theme banner instead. Click Customize to format the title.
The avatars
Avatars aren't edited on the page: the web part reads them from the page's version history.
⚠ In edit mode, a click on an avatar doesn't open any profile card. Test the click on the published page.
5. Best practices
Sign the page without cluttering it
Place the web part at the bottom or on the side of the page, with avatars in Small or Medium size.
Keep a single row of avatars
In a narrow column, keep a low Number of contributors: the avatars that don't fit wrap to the next line.
Choose an explicit title
A title such as "Written by" or "They contributed" tells your visitors more clearly what the avatars show.
Keep profile photos up to date
A contributor without a Microsoft 365 profile photo shows with their initials. Encourage your editors to add their photo.
6. What changes from the previous version
If you used the previous version of the web part (see the article Page contributors component):
- The web part is now called Jint - Contributors in the catalog, in the "News, people, and events" category.
- When you hover over an avatar, a tooltip shows the contributor's name and email address; when you click it, their Microsoft 365 profile card opens.
- A contributor without a profile photo shows with their initials.
- New settings: Number of contributors (from 1 to 20) and Avatar size (Small, Medium or Large).
- New: a color or image Background, and an Appearance (border, shadow, corner radius) linked to the Jint theme.
- The web part can show a title, formatted on the page.
- The panel is organized in three tabs, Design, Content and Visibility. The Visibility tab lets you restrict the web part to an audience and schedule its display.
- As before, contributors show from the most recent to the oldest.
Comments
0 comments
Please sign in to leave a comment.