WordPress: Using the VSOE Department Site Home Page Grid

The VSOE Department Site Home Page Grid plugin enables display of News, Media Coverage, video, or custom content in grid layouts, comprising 12, 8, 4, or single elements, natively in Cornerstone. The plugin is only for use on Viterbi School department, program, and institute sites.

Usage

The VSOE Department Site Home Page Grid plugin enables display of News, Media Coverage, video, or custom content in grid layouts, comprising 12, 8, 4, or single elements, natively in Cornerstone. The plugin is only for use on Viterbi School department, program, and institute sites.
Image
Image
In the Cornerstone editor, select Load Template at the top. From there, select the desired template from the dropdown, and click on Insert. The grid container will appear as shown below.
Grid layout

The grid container will appear in the editor. Each rectangle is a drag-and-drop zone for a custom Classic VSOE Homepage Grid element.

Select this element from the Elements selector and drag it into the desired rectangle.

Image
Image

From there, you can select the type of media you wish to load by selecting a Story Type under the dropdown menu.

“Show full headline text” toggle: By default, headlines/titles for grid items are restricted to one line with the text truncated and followed by an ellipsis. Toggling this “on” will display the full headline text, wrapping to multiple lines if necessary.

Video images must be manually generated, most typically by doing a screen grab of a paused video on YouTube, and then cropped to the 2:1 aspect ratio.

Due to the way the video lightbox code is generated, videos require the video’s ID rather than the full URL. To find a video’s id, open the video in YouTube and examine its URL in your browser’s address bar. The ID is the alphanumeric string between the ‘=’ character and the ‘&’ character in the example below. The ID will never contain ‘=’, ‘&’, or ‘?’ characters; these characters will define the beginning and end of the ID. Copy the ID and paste it into the Video ID field in the Cornerstone element.

YouTube video
Video ID

Published on November 22nd, 2022

Last updated on November 22nd, 2022