TerminalFour

Thumbnail Grid / Thumbnail Item Content Type Tutorial

The Thumbnail Grid content type is used to showcase key content or areas of a department using an engaging thumbnail photo with a short title and description. The thumbnail content then links to web pages.

To build a Thumbnail Grid:

Decide on the images to be to used for the thumbnails.There are two options for Thumbnail Item images.

  • When linking to a www.ycp.edu page, if there is a Page Intro on the page you want to link to, you can select that image from the Media Library for the Thumbnail Item .
  • Otherwise, please create or obtain a JPEG format image that is 490 pixels wide by 326 pixels tall and upload the image to your Media Library folder as a Media Path type. All images must be set to 72 dpi resolution for the website to display them without lagging.

Build the Thumbnail Grid Container:

  • In the section, click the Add Content button and select YCP2016: Thumbnail Grid Container from the list of content types.
  • Enter a Name for the content. It is helpful to name theThumbnail Grid Container using the word "container" to distinguish it from the thumbnail items below it in the section list of content.
  • The Secondary Title field is presented before thePrimary Title because if you use both of these elements, this is the order in which they appear on the page. TheSecondary Title is not required but can be useful to add clarity or to emphasize the Primary Title . You can enter the title however you like on the form (all lowercase for example), but the system will automatically change it to all caps. It will display in a lighter font than the Primary Titleand is offset by a green bar over it. Aim to have theSecondary Title be a few short words because this does not display well with more than a couple of short words on a mobile phone.
  • Enter the Primary Title . You can enter the title however you like on the form (all lowercase for example), but the system will automatically change it to all caps. It will display in a darker font than the Secondary Title .
  • A Tagline can be added below the titles as a brief eye-catching intro for the thumbnail links.
  • The View All Link is not required and is used to link to a page with a full set of associated resources. This could be a page with a number of related content items or links that branch off to other pages.
  • The View All Link Text is entered if you decide to use the View All Link.
  • The Container Background offers a selection of patterns which surround the Thumbnail Grid to help offset it from the other content on the page, but is not required.
  • Click Add & Approve to save the Thumbnail Grid Container .

Add the Thumbnail Items:

  • In the section, click the Add Content button and selectYCP2016: Thumbnail Item from the list of content types .
  • Enter a Name for the Thumbnail Item .
  • Select the Thumbnail Item Image you uploaded to theMedia Library .
  • Add the Thumbnail Item link - either:
    • Select the www.ycp.edu page using the Select linkat right
    • Navigate to the offsite page you are linking to, copy the URL and paste into the Thumbnail Offsite Link field.
  • Enter the Thumbnail Item Title . The title will appear in bold font.
  • The Thumbnail Item Subtitle is not required and will display under the Thumbnail Item Title in lighter color font.
  • Enter the Thumbnail Item Description .
  • Click Add & Approve then Preview to check your page.
  • Repeat these steps for each Thumbnail Item

If you have any questions or need further assistance, please contact the LTS Help Desk at 717.815.1559 or by email at LTShelp@ycp.edu