Article - Masthead Story


The Article Masthead Stories are pulled into the Masthead area of department landing pages.

Content Entry Fields

Title

This field holds the title for the Masthead Story (a.k.a Impact Article or Impact Story). The Title functions as the heading for the impact article on the public website and it is linked to the External Url. It also is used to identify the Impact Story within the CMS. Make sure to provide a clear, descriptive title as you will use this title when selecting the Impact Story 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 – Research Impact Story.

impact-story-title-field.png

External Url

This field holds the URL (website page) to which the impact story links. This is an external page (meaning that it is not on the UVA Engineering  website). As such, this link should be set to open in a New Window.

impact-story-url-field.png

External 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 URL length: 2048 charcaters

Open URL in a New Window

When checked, this opens the link 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).

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.

SVG Icon

This field holds the icon options. A single icon can be selected.

impact-story-svg-icon.png

Teaser Text

This field holds a brief summary or synopsis of the impact story.  The text will be displayed as a single paragraph. This means that if carriage returns are used in the content entry field to format the text 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.

impact-story-teaser-field.png

Image (412x443 pixels)

impact-story-image-field.png

This field holds the image for the impact story.

Alternate text field – This field holds the alternative text for the image. Make sure to enter text into this field that provides a description of what’s pictured in the image.

Title field – This field holds the text for the "tooltip" that appears when a user hovers the mouse cursor over the image. Make sure to enter text into this field that provides a description of what’s pictured in the image. IN most cases this will match the alternate text.

Masthead Background (1475x500 pixels)

This field holds the background image displayed behind the article content.

Alternate text field – This field holds the alternative text for the image. Make sure to enter text into this field that provides a description of what’s pictured in the image.

 

impact-story-masthead-background-image.png

Related Links

This set of fields holds the content for a set of related links (each link is displayed as a blue “button”) placed below the Teaser Text. Each Link has four content entry fields.

impact-story-related-links.png

1. Title

This is the text for the link.

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

2. URL

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

Maximum length of the URL: 2048 characters

3. Open URL in a New Window

When checked, this opens the Related link 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.

Use the Add Another Item button to add a new Related Link.

To remove a Related Link, clear all of the fields for the link completely. If all fields are empty, the link won’t be displayed on the public website page.

Changing the order of the Related Links

To change the ordering, left-click on the four-pointed arrow icon to the left of the position text field and hold. Then drag the position to the desired place in the list.

The top-to-bottom order of the text fields translates directly to the left-to-right order of the “buttons” on the public website. The area in which the “buttons” are displayed is fixed, meaning that the “buttons” will wrap to multiple lines.

How to add a Related Link

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

add-another-item-button.png

How to remove a related link from the list

To remove a related link, clear it completely out all of the fields for the link. If the link field is empty, it won’t be displayed on the public website page.

General Tags

The general tags are used to provide general tagging, or categorization for the Impact Story.

Select all Tags that apply.

 

general-tags.jpg

Departments Tags

The Departments tags are used to tag, or categorize, the Impact Story.

Select all Departments that apply.

 

department-tags.png

Research Strengths Tags

The Research Strengths tags are used to tag, or categorize, the Impact Story.

Make selections at the 3rd level of the tree. The CMS will auto-select the corresponding 2nd and 1st levels based on your selections.

research-strength-tags.png

How the Impact Story appears on the website

The content of Impact Stories is pulled into the Masthead area of department landing pages. The content of an Impact Story is used to create a "slide" in the Masthead area and there can be up to three Impact Story slides in the slideshow. The department landing page automatically creates the links that enables website visitors to move forward and back through the slideshow.

impact-story-display-on-site.jpg