List Callout


The list displays a list of content panels arranged vertically on a page. The content for each panel can be added manually (i.e. entered directly into content entry fields) or the content can be pulled in dynamically from an article page. A list can include any combination of manual and dynamic list items.

Content Entry Fields (List Heading)

The List Heading content entry fields hold the Title for the list (which is used to identify the list in the CMS) and the Heading that is positioned directly above the list when the list is displayed on the public website.

Title

This field holds the title for the List. The Title is not displayed on the public website. It is used to identify the List within the CMS. Make sure to provide a clear, descriptive title as you will use this title when selecting the List to pull it into site pages. You may wish to preface the title with text to identify your department or office, for example Chem Eng – Graduate Research Projects List.

list-title.png

Heading

This field holds the heading that is displayed above the list. The heading should describe the content of the list, for example Graduate Research Projects.

list-heading.jpg

Content Entry Fields (Manual List Item)

For the Manual List Item, the content for the list item is entered directly through content entry fields.

List Type

This specifies the type of list item. The “Manual” option is selected.

list-type.png

Heading

This field holds the heading for the list item.

manual-list-heading.png

Subtitle

This field holds the subtitle, or subheading, for the list item.

list-subtitle.png

Link

This set of fields holds the content for a formatted “Call to action” link placed at the bottom of the list item. The Link has four fields.

link-fields.png

1. Title

This is the text for the link.

Maximum length:  128 characters, including spaces between words and punctuation

2. URL

Make sure to use the full website address (make sure that it begins with http:// or https://).

Correct format: https://www.google.com
Incorrect format: www.google.com

Maximum length: 2048 characters

3. Open URL in a New Window

When checked, this opens the More Stories link (displayed in a “box” below the Masthead Stories) in a new browser window or tab (depending upon how the user’s browser is configured and the device on which the visitor is viewing the site).

4. Link “title” attribute

This attribute creates a “tooltip” that displays the text when a user places the mouse cursor on the link. It is also used for accessibility purposes to provide an additional description of the link. The title attribute maximum length is 128 characters, including spaces between words and punctuation.

Image (300x250 pixels)

This field holds the image that is placed to the left of the list item text content in standard browser view and above the text content in tablet and mobile views. The image is encoded as a background image on the website page, so alternate text is not needed.

list-image.png

Copy

This field holds the primary content for the list item. The text will be displayed as a single paragraph on the website page. This means that if carriage returns are used in the content entry field to format the quote into multiple paragraphs (i.e. using the keyboard ENTER key to create multiple paragraphs), these will be removed when the content is rendered on the page.

list-copy.png

Remove Button

This button removes the list item. Note that the removal of the list item is not permanent until the Save button at the bottom of the editing screen is clicked.

remove-button.png

If you remove a list item and then decide you want to retain it, simply navigate away from the editing screen (an easy way to do this is to click the Content link in the top navigation bar). The CMS will display a warning that by leaving any unsaved changes will be discarded. This is what you want, as it will un-do your deletion.

Add Another Item Button

This button adds another list item to the group. The new list item is placed at the bottom of the group.

add-another-item-buttton.png

How the Manual List Item appears on the website

manual-list-display-on-site.png

Content Entry Fields (Dynamic List Item)

dynamic-list-content-fields.png

List Type

This specifies the type of list item. The “Dynamic” option is selected.

dynamic-list-type.png

List Item Source

This field specifies the article page from which the content of the list item is pulled.

IMPORTANT: Only Article pages can be selected as the source of content for list items. The CMS automatically filters out all other content types from being selected.  See the Article Page Content Sharing Reference document for detailed information on what fields from the Article page are used in dynamic list item.

dynamic-list-item-source.png

How the Dynamic  List Item appears on the website

dynamic-list-display-on-site.png

Changing the order of the items in the List

The ordering of the list items is changed by dragging them to new positions in the list. To drag a list item to a new position, left-click and hold the four-pointed arrow icon to the left of the list item’s content fields and then drag up or down. When the list item is in the desired position, release the mouse button and the list item will “pop” into the new position.

The top-to-bottom ordering in the list translates directly to the top-to-bottom ordering of the list items on the page.

IMPORTANT: Changing the order of the list items is considered to be a content change. Therefore, after changing the order, you must click the Save button at the bottom of the editing screen to permanently save the change.