Introduction

The purpose of this quick reference guide is to outline the intended uses of the Profile Page template on the UChicago Intranet for Sitecore content authors. The document also includes best practices for components most commonly used on this page template. 

If you are unfamiliar with the terms in this guide, you may find this Glossary helpful. If you are unfamiliar with navigating the Sitecore Ribbon, you may find this guide helpful.

Where to use the Profile Page template

The Profile Page template should be used for biography pages for individuals on the Intranet. This could either be as a Featured Profile under the Our People section of the Intranet, or it could be used within a unit's subsite on the Intranet under Organization. 

Examples in use

• https://intranet.uchicago.edu/our-people/featured-profiles/jenny-trinitapoli
• https://intranet.uchicago.edu/our-people/featured-profiles/elise-covic
• https://intranet.uchicago.edu/organization/administration-and-offices/university-communications/university-communications-team/paul-rand
• https://intranet.uchicago.edu/organization/administration-and-offices/university-communications/university-communications-team/nicole-watkins

Commonly used components

If you are unfamiliar with how to add components, you may find Introduction to Data and Components and Navigating the Experience Editor helpful. You can explore a list of all Sitecore components in the Sitecore Components List.

Default components

The Profile Page template comes prepopulated with the following components. If you decide not to use any of these components, they must be removed from the page in the Experience Editor before publishing to avoid accessibility issues.

Breadcrumbs

The Breadcrumbs component allows content authors to set up automatic breadcrumb links to parent pages at the top of the page. The component uses the Profile Page template as its data source, so you do not need to create a new data source in the data folder. 

To edit Breadcrumbs, navigate to your page in the content editor and find the Breadcrumb section. 

Fields:

• Hide in Breadcrumbs: Selecting this checkbox will hide the current page from Breadcrumbs on any subpages where Breadcrumbs are used.
• Breadcrumb name: If you wish to change the name of your Breadcrumb to something other than the page title, you can do so here. This is not recommended unless you have a very long page title.
• Start Breadcrumb: Selecting this checkbox will start Breadcrumbs on this page rather than on the parent pages. 

Profile Header

Every page requires a page title to meet accessibility standards. For a Profile Page, we recommend using the Profile Header component. This component uses the Profile Page template as its data source, so you do not need to create a new data source in the data folder. 

To edit the Profile Header, navigate to your page in the content editor, find the Personal Properties section and the Name field. Changing the Name text in the content editor will change the header text in the Profile Header. Here you can also add the person's title, email link, and image and more. 

Fields: 

*Fields with an asterisk are required

• Name*
• Title*: Please try to keep your character count less than 73 characters.
• Email Link: Select "insert email" to create a linked email address.
• Image*: Upload and insert an image of the person that is 220px by 220px. Please ensure the file name matches the name of the person and upload these photos into an appropriate folder in the media library. All images uploaded must include alternate text. Learn more about uploading to the media library with alt text here.
• LinkedIn Link:Iif you would like to include a link to their LinkedIn profile, you can insert one in this field using "insert external link."
• External Profile Link: If you would like to link to a profile page, you can do so here using the "insert external link" option OR, if the profile page is located within the intranet, use the "insert link" option. 
• External Profile Link Text: If you insert an external profile link, you must also fill in this field with the person's name. This field and the "Name" field should match exactly.

Rich Text 1 and 2

The main body of your profile will live in the Rich Text components. The template comes pre-populated with Rich Text 1 and 2, but you can add Rich Text 3-5 if more fields are required. Please use Rich Text 1, 2, 3, 4, and 5 in order. This component uses the Profile Page template as its data source, so you do not need to create a new data source in the data folder. 

To edit Rich Text 1-5, navigate to your page in the content editor, find the Rich Text section and the corresponding Rich Text field. If you are unfamiliar with how to edit Rich Text please refer to the Rich Text section in Navigating the Content Editor. 

Please note that it's extremely important to make sure you are not copying over formatting from another source into Sitecore. This can easily lead to accessibility issues and create inconsistent formatting across our site. We highly recommend using the "Paste Plain Text" feature to avoid this issue.

Recommended components

Callout Box

Allows Intranet content authors to place a colorful, outlined box with a header, description, and button in the small column of a two-column page, or in the Main Header of the UChicago Intranet Main Navigation. Users also have the option of adding a background image if desired. Several color themes are available. 

We recommend using a callout box to call special attention to a linked resource. When adding this component to the Profile Page, it can only be added in the small left column section. Create the data source in your page's data folder. If you intend to use the same callout banner on multiple pages, you can create the data source in the global Callout Box data folder. This will allow you to use this same data source for multiple pages. 

Fields:

*Fields with an asterisk are required

• Heading: Text placed here appears in a colorful box at the top of the component. In the example above, this is "Campus Messages."
• Description*: The description appears in the main body of the component. In the example above, this is "See more recent messages from the University."
• Call to Action*: External links (leading away from the Intranet) should open in a new window. Internal links (links within the Intranet) should open in the same window.
• CTA Text*: This text appears in a button on the component. In the example above, this is "Announcements Home."
• Background Image: If you would like your callout box to have an image in the background, you can insert one here. If you choose to include a background image, your Heading will not appear. See examples above. Recommended size is 400 by 400px. It should have a clear file name and should be uploaded into an appropriate folder in the Media Library. All images uploaded must include alternate text. Learn more about uploading to the media library with alt text here.
• Theme: You can choose from three color treatments for callout boxes without an image, and three for a callout box with an image. DO NOT USE LIGHT GOLDENROD (it does not meet accessibility standards).