Contents
Introduction
The purpose of this quick reference guide is to outline the intended uses of the Organization Page template on the UChicago Intranet for Sitecore content authors. This 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 Organization Page template
The Organization Page template should be used for landing pages for individual units under the "Organization" section of the Intranet. This template should only be used to create a school, division, department, office, lab, institute, or center's landing page.
Examples in use
- https://intranet.uchicago.edu/organization/schools-and-divisions/biological-sciences-division
- https://intranet.uchicago.edu/organization/schools-and-divisions/crown-school
- https://intranet.uchicago.edu/organization/administration-and-offices/university-communications
- https://intranet.uchicago.edu/organization/administration-and-offices/oce
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 Organization 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 Organization 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.
Basic Page Banner
Every page requires a page title to meet accessibility standards. For an Organization Page, we recommend using the Basic Page Banner component. This component uses the Organization template as its data source, so you do not need to create a new data source in the data folder.
To edit the Basic Page Banner, navigate to your page in the Content Editor, find the Content section and the Page Title field. Changing the Page Title text in the Content Editor will change the text used in the Basic Page Banner.
If you would like intranet users to be able to favorite your page, you can add a Favorite Button to the Basic Page Banner. In the Content Editor, on your page, under the Favorite section, you will find a checkbox labeled Show Favorite Button.
Address and Introduction
Allows UChicago Intranet content authors to place an address and description text in the small column of a two-column page.
The formatting of this component cannot be changed.
To edit Address and Introduction, navigate to your page in the Content Editor, find the Detail section, and edit the Address and Introduction fields. The address will be linked automatically. The Introduction section uses a Rich Text editor.
Quick Links
Allows content authors to create a two-column layout section, where multiple button links with optional icons can be created. The data source for your Quick Links component can be found in the data folder of your page.
Fields for Container:
*Fields with an asterisk are required
- Use Highlight Style: Leave unchecked
- Link: If populated along with the Link Text field, a link will appear in the upper right corner of this component.
- Link Text: If populated along with the link field, this text will appear in the upper right corner of this component.
- Heading*
- Use Text Links with no Icons: If you select this box, your links will display like the view below rather than the primary example above.
Fields for Links:
*Fields with an asterisk are required
- Link Text*: This is the text that will appear on the button.
- Link*: 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.
- ARIA Label Text: You will most likely leave this field blank, but if your link text is something generic like "learn more" you need to include ARIA label text to describe the link to a screen reader. ARIA label text should always start with your link text and then add additional information.
- Icon: You have the option to select an icon from a list of available icons that will appear to the left of your link text.
Link Listing
Allows content authors to create a three-column list with a title at the top, and the ability to create multiple links with titles and descriptions. The data source for your Link Listing component can be found in the data folder of your page.
Fields for Link Listing:
*Fields with an asterisk are required
- Heading*: This is the heading text for this component. "UChicago Creative Resources" in the example above.
Fields for Links:
*Fields with an asterisk are required
- Description: This rich text field allows you to write a description for your link. You can also add additional links through linked text in this section if needed.
- Use Highlight Style: Leave unchecked
- Link*: 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.
- Link Text*: This is the linked text that will appear on the page.
People Listing
Allows content authors to create a listing of profiles that can be used to highlight multiple people in a three-column layout. People are added as sub-items underneath the component data source and can display name, title, email, photo, and an external link. People can be added and removed from the list as needed from the parent component. The data source for your People Listing component can be found in the data folder of your page.
Fields for People Listing:
*Fields with an asterisk are required
- Heading*: populate with the title of your People Listing. In the example above, this is "Leadership."
- People*: After you have created each person as a subitem of this People Listing component, you must also select them from the list displayed in this field. To select a person, select their name, then click the right arrow to move them over to the "Selected" column. If you see a set of numbers followed by "Item not found" in the "Selected" column, remove them by selecting the item and clicking the left arrow.
- Email Link Icon: This field gives you the option to display an icon next to the email address. Either select "envelope-o" from the dropdown or leave this field blank.
- LinkedIn Link Icon: This field gives you the option to display an icon next to the LinkedIn link. Either select "linkedin-square" from the dropdown or leave this field blank.
To create a new Person card, right-click on the People Listing data source (it will likely be labeled "Leadership") and choose "insert" and "person card." Please name the Person Card with the name of the person. The existing sample Person Cards can also be renamed by selecting the item, right-clicking, and choosing "rename".
Fields for Person Card:
*Fields with an asterisk are required
- Name*
- Title*: Please try to keep your character count less than 73 characters if possible.
- Email Link: Select "insert email" to create a linked email address.
- Image*: Upload and insert an image of the person (recommended size 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: If 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.
Recommended Components
Callout Banner
Allows content authors to display a call-to-action with a medium-sized image, title, and call-to-action button or link. We recommend using the callout banner to draw attention to and link to a special piece of content or event. When adding this component to the Organization Page, create the data source in your page's data folder.
Fields:
*Fields with an asterisk are required
- Tag*: This is a small text field that displays above the title. Usually, this space is used to describe the type of content. In the example above, this is "Resources."
- Title*: This text field displays as the largest text in the component. In the example above, this is "Campus Communicators Guide."
- 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.
- Call to Action Text: This field can be used to describe your piece of content. This text will also be linked to your chosen Call to Action. In the example above, this is the maroon text.
- Call to Action Link: This should exactly match the link in "Call to Action"
- CTA Text: This should exactly match the text in "Call to Action Text"
- Call to Action ARIA Label Text: If your link text is something generic like "learn more" you need to include ARIA label text to describe the link to a screen reader. ARIA label text should always start with your link text and then add additional information. For example, ARIA label text for "Learn more" should be "Learn more about the mission and vision of our office."
- Call to Action Button Text: If you would like to add a second link, you can do so using this Call to Action button. The text will display, outlined, at the bottom of the component.
- Call to Action Button Link: 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.
- Call to Action Button ARIA Label Text: If your link text is something generic like "learn more" you need to include ARIA label text to describe the link to a screen reader. ARIA label text should always start with your link text and then add additional information. For example, ARIA label text for "Learn more" should be "Learn more about the mission and vision of our office."
- Image: Recommended image size is 600px by 600px. If left blank, the gray part of the banner will extend all the way across with no image. 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 event themes: Dark, Light, or White. Light is used in the example above. We do not recommend choosing White (it does not meet accessibility standards)
- Accent Color: You can choose from two accent colors which will appear as a decorative bar at the top of the component. In the example above, the accent color is "Red."
Callout Tiles
Allows content authors to create grid-based parent containers, with the ability to add sub-items that can display an image, title, description, call-to-action button or link, and optional icon. We recommend using callout tiles to draw attention to multiple pieces of similar content. For example, you could use a callout banner to display the 3-4 programs your unit is currently working on. When adding this component to the Organization Page, create the data source in your page's data folder.
Container Fields:
*Fields with an asterisk are required
- Tiles Per Row*: Editors can select to display one, two, or three tiles per row.
- Card Background Color: Cards will be displayed with a default gray background, with the option to select a white background as an alternative.
- Has Background: Selecting this checkbox will make a gray background appear on your Callout Tile component, changing the background color of each individual tile to white in contrast.
- Has More Link: Selecting this checkbox will make a link appear in the upper right-hand corner of this component. This is intended to be used to link to "more" of whatever type of content you're displaying. For example, if you're displaying a list of events, the "more" button should take you to a page with more events.
- More Link Text
- More URL
- Randomize Tile Order On Each Load: Selecting this checkbox will allow the order of your tiles to randomize each time a user loads or reloads the page.
Adding Tiles
To add an individual callout tile, navigate to the Callout Tile you've created in the data folder of your page in the Content Editor. Right-click on the component. Click "Insert" and select "Callout Tile." You will be prompted to name your tile. We recommend using the title you intend to use on the card as the name.
Tile Fields:
*Fields with an asterisk are required
- Title*
- Description*
- Image: Recommended size is 830 by 500 pixels and should have alternative text.
- Call to Action Text*
- Call to Action Link*: 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.
- Call to Action ARIA Label Text: If your call to action text is something generic like "learn more" or "register here" you need to include ARIA label text to describe the link to a screen reader. ARIA label text should always start with your call-to-action text. For example: "Learn more about Safer Spaces" or "Register here to attend Safer Spaces."
- Call to Action Button Text
- Call to Action Button Link: 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.
- Call to Action Button ARIA Label Text: If your call to action button text is something generic like "learn more" or "register here" you need to include ARIA label text to describe the link to a screen reader. ARIA label text should always start with your call-to-action button text. For example: "Learn more about Safer Spaces" or "Register here to attend Safer Spaces."
- FontAwesome Icon: Sitecore will display icons from FontAwesome if the correct icon text is put in this field. The list of available icons is on FontAwesome.com/v4.
- Gif: We do not recommend using this field.
- Show Add to Calendar Link: Selecting this checkbox will enable a button labeled "Add to Calendar" to appear on your callout tile. This should only be used if you're using Callout Tiles to display events.
- Event Start Date: If you are using the "Add to Calendar Link" you need to set a start date and end date for your event. This is the date and time range that will be downloaded as a calendar event.
- Event End Date
Image with Caption
Allows content authors to display a full-width image with an optional caption. You can find the data source for the Image with Caption component in your page's data folder. We recommend adding an image representative of your unit above the "Quick Links" component.
Fields:
*Fields with an asterisk are required
- Image*: Images for this component should be 1000px wide. Height can change depending on your preference, but if you're unsure, 600px height is standard. All images uploaded must include alternate text. Learn more about uploading to the media library with alt text here.
- Caption*: Use this space to add a caption for your photo. A brief description and photography credit is recommended, but if you would like to leave the caption blank, just insert a space.
Image Left Right
Allows content authors to create a full-width component that displays a large photo and title, description, and call to action, with the ability to arrange the image on either the right or left side. We recommend using this component if you would like to call attention to text on your page. When adding this component to the Organization Page, create the data source in your page's data folder.
Fields:
*Fields with an asterisk are required
- Link Text: This is the linked text that will appear on the page
- Link: 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.
- ARIA Label Text: If your link text is something generic like "learn more" you need to include ARIA label text to describe the link to a screen reader. ARIA label text should always start with your link text and then add additional information. For example, ARIA label text for "Learn more" should be "Learn more about the mission and vision of our office."
- Alignment*: Choosing "Left" will make the image appear on the left, and choosing "Right" will make the image appear on the right.
- Theme: Three color themes are available, but only "Dark Grey" and "Red" should be used. "Grey" does not meet accessibility standards.
- Title*: The title of this section should be placed here. In the example above this is "Mission"
- Description*: This rich text editor field allows you to include text. Be careful not to include too much text. Eventually, your text will extend past your image and get cut off.
- Image*: Recommended image size is 1000px by 600px. 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.
- Gif: Leave blank
- Image Position: Leave blank
- Video: Leave blank
- Watermark: We recommend leaving this blank, but if you would like the text side of this component to have a Phoenix watermark, you can select the image. "phx_cropped-watermark"
- Watermark Position: If you use a watermark, select the alignment you would like for your watermark.
- Heading: Leave blank
Headline Bar
Allows content authors to display a full-width headline with a description and optional call to action link. When adding this component to the Organization Page template, create the data source in your page's data folder.
Fields:
*Fields with an asterisk are required
- Heading*: Type or paste the desired header text here with a maximum of 70 characters.
- Description*: Type or paste the desired description text here with a maximum of 350 characters.
- Call to Action Text: If you would like to include a link, type or paste the direct link text here.
- Call to Action Link: 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.
- ARIA Label Text: If your link text is something generic like "learn more" you need to include ARIA label text to describe the link to a screen reader. ARIA label text should always start with your Call to Action Text and then add additional information.
Headline Text Bold
This component allows content authors to create a large bold headline with the ability to add an optional description and button link. When adding this component to the Organization Page template, create the data source in your page's data folder.
Fields:
*Fields with an asterisk are required
- Link Text: If you would like to include a link, type or paste the direct link text here.
- Link: 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.
- ARIA Label Text: If your link text is something generic like "learn more" you need to include ARIA label text to describe the link to a screen reader. ARIA label text should always start with your Call to Action Text and then add additional information.
- Heading*: Type or paste the desired header text here with a maximum of 70 characters.
- Teaser: Type or paste your desired description text here.
- Alignment*: Select Center or Left alignment from the drop-down menu. Center is usually recommended.
- Additional CSS classes: leave blank
Headline Text Small
This component allows content authors to create a small headline with an optional link to the right. This component usually serves as a sub-header. When adding this component to the Organization Page template, create the data source in your page's data folder.
Fields:
*Fields with an asterisk are required
- Link Text: If you would like to include a link, type or paste the direct link text here.
- Link: 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.
- ARIA Label Text: If your link text is something generic like "learn more" you need to include ARIA label text to describe the link to a screen reader. ARIA label text should always start with your Call to Action Text and then add additional information.
- Headline*: Type or paste the desired header text here with a maximum of 70 characters.
News Featured
Allows content authors to display selected news stories. Each news item is added manually. One, two, three, four, or five items may be displayed. When adding this component to the Organization Page, create the data source in your page's data folder.
Fields:
*Fields with an asterisk are required
- News*: Select the news stories you would like to feature from the content tree in the left column
- Layout*: Choose the number and layout of stories you would like to appear
- See all news URL: If a link is placed here, "see all news" will appear in the upper right corner of the component as linked text.
News List
Allows content authors to display a vertical list of news stories with a chosen tag. We recommend using this component to display news tagged to your unit/school/division. When adding this component to the Organization Page, create the data source in your page's data folder.
Note: Any news in your list will also appear on the Intranet's News page. If a user has selected your unit/school/division as one of their preferences, they will see your stories in My News both on the news page and on the Intranet homepage in the Featured News section.
Fields:
*Fields with an asterisk are required
- Heading*: In the example above this is "News from the Biological Sciences Division."
- News Limit*: This is the maximum number of news stories that your news list will display at one time. We recommend 4-6.
- Use Highlight Style: Leave blank. This option is not functional.
- Link: If you would like to link to more news, you can insert a link here to the Intranet News page.
- Link Text: We recommend "Show More" or "More News." This linked text will display at the bottom of the component.
- Target Search Tab ID: Leave blank
- News Types: Selecting these options affects what kinds of content appear in your news list.
- Exclude Intranet News Pages: If you do NOT want Internal News Stories to appear in your news list, select this box.
- Exclude Imported News: If you do NOT want imported External News stories to appear in your news list, select this box.
- Include Intranet Announcement Pages: If you would like to include Announcements, select this box.
- Taxonomy: Select the taxonomy of the news stories or announcements that you would like to appear in your news list. Only content with the selected taxonomy will appear in your news list.
- School/Division: Select the School/Division(s) that you would like to appear in your news list by clicking on the name and clicking the right arrow to move it into the "Selected" column.
- Tags: Leave blank
- Target User Role: If you would like content targeted only to a specific role (such as academic or staff) to appear in your list, choose the targeted role from this drop-down menu. Leaving this space blank will mean all roles will be displayed in the list. The same thing happens when you select "all."
- Topic: If you would like only stories with a specific topic to display in the list, select the chosen topic from this drop-down.
Resources Listing
Allows content authors to create button lists for resources that have been uploaded to the Media Library and allow direct downloads. This component is a good alternative for units that house their files in external services like Box. This component is a better alternative to creating a list of linked documents in a Rich Text field.
Fields:
- Title: Type a title for this group of resources
- Resources: Select resources from your media library by finding them in the Content Tree and moving them into (or out of) the "Selected" box with the arrow buttons.
Video Inline
Allows content authors to embed a full-width video that is hosted externally, such as YouTube. Content authors can also add a heading, still image, and set the width of the video. When adding this component to the Organization Page, create the data source in your page's data folder.
Fields:
- Embed Script: paste the embed code from YouTube here. You can find your YouTube embed code by selecting "Share" and "Embed" on the YouTube video. Copy the entire script that appears and paste it into this field in Sitecore.
- Heading: If you would like a heading to appear above the video on your page, you can insert the heading here.
- Still Image: If you would like the video to show a different image than the default before a visitor presses play, you can insert that image here. Make sure it has the same dimensions and pixel size as the video you're displaying.
- Maximum Video Width (in pixels): The height and width of your video will be set in the embed code (in the example above it is 560 by 315 pixels, but if you would like the image width to be smaller, you can insert the maximum pixel width here. To make the image larger the width and height must be changed in the embed code.