Category: General

How To: Adding Links to a Page

How To: Adding Links to a Page

There are 3 types of links available in T4: Section Link, External Link, and Media Link.

I. Section Link

Use a section link when linking to another page in T4.

How To Add A Section Link
How To Add A Section Link

2. External Link

Use an external link when linking to another page outside of T4.

How To Add An External Link
How To Add An External Link

3. Media Link

Use a media link when linking to a file in the media library.
(PDFs, Word Documents, Images, etc)

How To Add A Media Link
How To Add A Media Link
Web Accessibility and SEO

Web Accessibility and SEO

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.

home_top section

home_top section

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

Cheat Sheet for T4 Power Users

Cheat Sheet for T4 Power Users

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)

Page Layout: Global Homepage

Page Layout: Global Homepage

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:
Page Layouts

Page Layouts

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
FAQ Box – Multiple

FAQ Box – Multiple

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.

University Policies Website

University Policies Website

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

PhotoGallery Embed

PhotoGallery Embed

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 Web Team

University Web Team

Custis, Lauren Digital Project Manager,
University Marketing & Communication
lcustis@luc.edu  
Drevs, John Associate Vice President,
University Marketing & Communication
jdrevs@luc.edu 312.915.6941
Grech, Jill Web Strategic Marketing Manager
University Marketing & Communication
jgrech1@luc.edu 312.915.6402
Kraft, Bob Senior Web Analyst,
Information Technology Services
rkraft@luc.edu 773.508.2931
Morrison, Matthew Jr. Web Designer
University Marketing & Communication
mmorrison6@luc.edu 312.915.6675
Ravenscraft, Steve Senior Web Designer,
University Marketing & Communication
sravenscraft@luc.edu 312.915.6367
Wheeler, Lenzlee Senior Web Developer,
University Marketing & Communication
lwheeler@luc.edu