Author: Lenzlee Wheeler

How To: Adding A Section

How To: Adding A Section

By |

How To Add A Section

  1. If you are not already on the Site Structure screen, click the site structure icon. 
  2. Click the actions menu and select create section. 
  3. Enter the relevant information to create a section. At a minimum, the Name must be filled in. All other default options are explained below.
  4. Enter a name for the section and click save changes.
PhotoGallery Embed

PhotoGallery Embed

By |

Content Type: Photo Gallery Embed

Use this content type when you want to embed a Slideshow of Images from a Media Library Category. Only 1 photo gallery is permitted per section.

How to Use this Content Type

STEP 1: Upload your images in the media library

Important Tips:

    • Make sure all images are optimized for the web and are of the same height prior to uploading to the media library.
    • The following image dimensions are recommended:
      Resolution = 72 pixels/inch
      Regular Image = 1000 pixels (Width) by 560 pixels (Height)
      Panoramic Image = 1800 pixels (Width) by 735 pixels (Height)

    • Images must only belong to the media category that contains all the images for your photo gallery.

    • The photo caption is being pulled from the Description field value of the Image file in the Media Library.

STEP 2: Duplicate an existing section containing a photo gallery content piece

    • Sample Page
      • The order of the content should be as follows:
        1. Required: photogalleryembed.css
        2. Optional: Content Type = Page Content Only
        3. Content Type = Photo Gallery Embed
        4. Optional: Content Type = Page Content Only
        5. Required: photogalleryembed.js

 

Content Type Settings:

Minimum User Level: Contributor
Direct Edit Enabled: Yes

Content Type Elements:

Name (Plain Text, 80 characters, required)
Media Item (Media, required)

Page Layout Compatibility:

This content type will properly display when used with the Page Layouts identified below.

Page Layout NameRequired Components
Primary InteriorThe following files must be added to the section:
photogalleryembed.css
photogalleryembed.js
University Policies Website

University Policies Website

By |

Guide in managing content for the University Policies website.

Content Types To Use:
University Policies Keyword
– Name (Plain Text, 80 characters)
– Category (Keyword Selector)
— List: University Policy Categories
University Policy
–

Metadata

Metadata

By |

Description:

Meta tags are used to describe your page’s content. They can be used to help with Search Engine Optimization (SEO) and how a link will appear when shared on social media. 

Metadata in TERMINALFOUR can be:

  1. Added when creating and editing Sections on the Metadata tab
Section Metadata values for Social Media sharing

Sample Metadata Values when sharing your page on Social Media channels:

  • og:title = Loyola University Chicago
  • og:description = We are Chicago’s Jesuit Catholic University. We are guided by a simple promise: to prepare people to lead extraordinary lives.
  • og:image = https://www.luc.edu/media/lucedu/styleassets/images/loyolauniversitychicago-062019.jpg
  • og:image:alt = Loyola University Chicago
  • twitter:card = summary_large_image
  • twitter:site = @LoyolaChicago
  • twitter:title = Loyola University Chicago
  • twitter:description = We are Chicago’s Jesuit Catholic University. We are guided by a simple promise: to prepare people to lead extraordinary lives.
  • twitter:image = https://www.luc.edu/media/lucedu/styleassets/images/loyolauniversitychicago-062019.jpg
  • twitter:image:alt = Loyola University Chicago

 

  1. Added when using Direct Edit

Page Layout / Section Metadata

Page LayoutTitle MetadataDescription Metadata
Primary LayoutGeneral – Section Title +
Metadata – title.prefix + : Loyola University Chicago		General – Section Description + Metadata – DC.description
Primary InteriorGeneral – Section Title +
Metadata – title.prefix +
Section Name at Level 2 + : Loyola University Chicago		General – Section Description + Metadata – DC.description
B3 Story PageSection Title + : Loyola University ChicagoGeneral – Section Description
Global HomepageSection Title + : Loyola University ChicagoGeneral – Section Description
Global InteriorGeneral – Section Title +
Section Name at Level 2 + : Loyola University Chicago		General – Section Description
GlobalGeneral – Section Title +
Metadata – title.prefix +
Section Name at Level 2 + : Loyola University Chicago		General – Section Description + Metadata – DC.description

1. For Page Layout = Primary Layout, the values to the following metadata fields will affect the page:

Title Metadata Syntax:

<title>title.prefix + og:title + : Loyola University Chicago</title>

In the section’s metadata tab, the value for the title.prefix field >> if this is not filled in, it will pick up value in og:title >> then it will append >> : Loyola University Chicago
If both title.prefix and og:title fields are not filled in, then the meta title will display as >> ” : Loyola University Chicago“

2. For Page Layout = Primary Interior, the values entered in the following metadata fields will affect the page:

Below are guidelines for content pieces in the stories >> archives section of your site:

Content Type = Feature Story, the values entered in the following content element fields will display as the metadata values for the page:

Feature Story Page Metadata
FAQ Box – Multiple

FAQ Box – Multiple

By |

Content Type Name: FAQ Box – Multiple
Minimum User Level: Contributor
Direct Edit: Enabled
NOTE: This content type is used with content pieces using the FAQ Item content type.

Elements/Fields in this content type:
Field NameDescriptionField TypeMax Size
(character count including spaces)
NameThe name of the piece of content, used for system purposes only.Plain Text80
Sub-HeadingLarge text that displays above the FAQ listPlain Text1000
Group IDe.g. Title of the news article; this value must match the Group ID of corresponding FAQ ItemPlain Text80
Text Below QuestionsThis is used in the old template. Please leave this blank.HTML99999


CONTENT TYPE STRUCTURE:
The FAQ Box Multiple content piece is immediately followed by an FAQ Item content piece/s. They are grouped together based on the value entered in the “Group ID” element field.

To view a sample page using this content type, click here.


WHEN USING THIS CONTENT TYPE:

  1. Make sure that the content type = FAQ Box Multiple is enabled on your section.

  2. The values in the “Group ID” field MUST match so that the page renders the content items that belong together. You can use any value for the “Group ID” field. Just make sure that it is all in lower-case and that there are no spaces.

  3. The order of the FAQ items is based on the value you enter in the “Create Date” field. It will display the contents in descending order. For example, if the Content Item piece has a create date of 7/25/19, it will display above another Content Item piece that has a create date of 7/24/19.

Page Layouts

Page Layouts

By |

Page Layouts provide a consistent structure and style to the pages on your website. They are designed and developed by the UMC Digital Team. Below is a list of Page Layouts created in the T4 system.

NameDescriptionAccessLink
Universal TemplateThis is the newest web template available for use.Default Display
Homepage Display
Primary LayoutThe template assigned to majority of the homepages for colleges, schools, and departments.GlobalSample page
Primary InteriorThe template assigned to majority of the interior pages for colleges, schools, and departments.GlobalSample Page 1
Sample Page 2
BlankUsed to remove the template/design of your page.GlobalSample Page
Global HomepageThis is the template for the homepage of some colleges, schools, and departments Sample Page
Global InteriorThe template for interior pages of some colleges, schools, and departments Sample Page
GlobalThis is the template used for elevated global pages Sample Page
Page Layout: Global Homepage

Page Layout: Global Homepage

By |

Section Structure

Root Section
home_content Homepage contents go in this section.

Content types that work in this section:  

  • hero image
  • Intro Text
  • Global 3 Column LGS Buttons
  • Global 2 Column Image Quotes
  • Global 3 Column Stats
  • Global 3 Column LGS Buttons
  • Code Only – Admin
home_deck Content types:
modules Content types:
CTA Content types:
I Links Content types:
site_logo Content types:
footer Content types:
custom_css Content types:
custom_js Content types:
Cheat Sheet for T4 Power Users

Cheat Sheet for T4 Power Users

By |

The following content types are available for sites using the Primary Layout and Primary Interior page layouts:

General Content Types

  • Accordion Panel
  • Code Only Template
  • FAQ Box – Multiple
  • FAQ Item
  • Feature Blog Post
  • Feature Content
  • Feature Link
  • Feature Multiple Links
  • Feature Story
  • Feature Video
  • Image
  • Infobox
  • Page Content Only
  • Panopto Video Embed
  • Staff Profile
  • YouTube Video Embed


Section Specific Content Types

home_announcement

  • announcements

home_news, home_center, home_left, home_right, right_column

  • Feature Content
  • Feature Link
  • Feature Story
  • Feature Video

home_left, home_right, right_column

  • Calendar Feed
  • Feature Blog Post
  • Feature Multiple Links
  • Recruitment Links
  • Social Networking Links

Stories >> archive

  • Feature Content
  • Feature Link
  • Feature Story
  • Feature Video

Videos >> archive

  • Code Only Template
  • Feature Link
  • Feature Video

Photos >> archive

  • Code Only Template
  • Feature Photo Gallery
  • Flickr gallery
  • Image
  • Page Content Only

custom_css

  • Custom CSS

custom_js

  • Custom JS

Footer

  • Organization Information (limit to 1)

site_background

  • Image (limit to 1)

site_logo

  • Image (limit to 1)

home_top section

home_top section

By |

This page provides information on how to edit or update the content in the home_top section.

Page Layout: Primary Layout
Content Types allowed in this section: Feature Link

When using a Feature Link content piece on the home_top section, the following fields must be filled in:

  • Name (this is the name of your content piece and does not display anywhere on the homepage)
  • Title (this is the text that displays on the first line of the image overlay)
  • Blurb (this is the text that displays on the second line of the image overlay)
  • One of the following link options must be filled in (make sure to only fill in 1 of the 3 link options):
    • Section Link (use if you want to link the content to another page on your website)
      • Use default link text (leave this box checked)
    • External URL (use if you want to link to another web page outside of those that you can access via T4)
      • must enter the full URL starting with “https://…”
    • Media Link (use if you want to link to a media file that you’ve uploaded to the media library)
      • for example, a PDF file or a Word document
  • Select an Action Link (the selected text will display as a hot link next to your Blurb)
  • Panoramic Image (this is the image that will display on the home_top section of your homepage)
    • Always make sure that “image/*” is selected in the formatter dropdown
    • Image dimensions should be:
      • Width: 1800px
      • Height: 735px
      • Resolution: 72px/in
    • Recommended image formats: .jpg or .png
    • Best Practice: Before uploading your image to the media library, please make sure to name the image file with the following guidelines:
      • all lowercase, no spaces or special characters
      • a dash (-) or underscore (_) may be used to separate multiple words
      • sample filenames: leadimage.jpg, lead_image.jpg, or lead-image.jpg
  • Tab (This is the text that displays on the top left corner of the panoramic image)
  • Publish Date (leave value as is)
  • NOTE: All other fields can be left blank. They will not display on when used in the home_top section

Web Accessibility and SEO

Web Accessibility and SEO

By |

Below is a list of accessibility and SEO practices that a T4 moderator can affect:

  1. Add Alternative (Alt) Text to the images on your page.
Page LayoutContent TypeContent Type Element/FieldScreenshots for Reference
AllImageAlt TagImage Content Type Screenshot
Page Content OnlyImage Description for the image file in the Media Library Media Library Screenshot 1
Media Library Screenshot 2
Global InteriorGlobal Media Card ItemImage Alt TextScreenshot Global Media Card Item
Feature LinkTitleFeature Link Content Type Screenshot
Feature StoryTitle
Image Description		Feature Story Content Type Screenshot
B3 Story PageFeature LinkTitle (When used with horizontal grid cards)
Blockquote ImageStatic Value is always set to “Blockquote Image Background“

 

  1. Optimize Images (PDF)

  2. Add Section Metadata

  3. Properly Set up Links on your page

 

Resources & Tools

Below is a list of resources and tools available to T4 moderators to check webpage accessibility and SEO information.