CSUMB Site Build 2024

Component Library

In the left navigation menu of this page, there is a list of useful links to the build examples as well as all the content type detail pages. Some of them work in similar ways:

Page Layouts

The following page layouts are used to build the pages:

 

Heroes

Each page requires a hero; the hero will always appear as the first content item in the page, even if it's not added in that order in the section.

 

Wrapper Content Types

The following content types use the Wrapper Programmable Layouts.

If multiple instances of the same wrapper content type are added consecutively, they will be joined together in the appropriate layout.

In a sequence of wrapper contents, only the first one needs the section heading and description (if applicable).

 

Useful Information

TinyMCE Options

Many content types have HTML elements which use the TinyMCE editor, find out more about using TinyMCE in the Terminalfour documentation. Follow this link for examples and guidance for the type of content that can be created in the TinyMCE editor.

Metadata

The following two metadata are mapped to the content types elements: Meta Description and Meta Keywords, as mentioned in the list below.

Below are the Content Types which allow users to enter metadata:

  1. Homepage Hero Section
  2. Landing Page Hero Section 
  3. Admission - Hero Section
  4. Hero Header Section 
  5. News - CSUMB (ID: 303)
  6. Program 

 

PXL

PXL is set up and working. For content editors in Terminalfour, uploading an image is no different than the usual process: upload to the Media Library, select the media item from the content item and preview/publish.

Whereas in the past a content editor would have had to upload an image that was exactly 1360px x 800px and upload multiple-sized variants if other sizes were required, e.g. for mobile/tablet, now PXL does all that.

A recommended size is included in each image's element description. The image can be any size or aspect ratio, and will be cropped and resized to the size required automatically by PXL.

PXL is configured via filters added to T4 tags in content layouts and works on the fly when a page is previewed/published.

Viewing the source code from the News Detail page, you can see PXL in action. From the full-size image uploaded, PXL has created 5 different size variations as required in the HTML provided by OHO, The quality of the image is reduced, and the image is converted to WebP via filters.