Tiles Technical Guide

The Tiles are an excellent feature to showcase new content that will be updated on a regular basis. These elements will be displayed right under the Featured Image, giving your users the ability to keep up-to-date with important new content available on your site.

Implementation

You need to:

  • Have an idea on your Tile Content.  This should not be more than a few sentences in length.
  • Have a Tile Image. This image will be in a JPEG or PNG file type.  Sizing of this image will depend on Tile Style choice.
  • Consider the number of tiles you wish to feature.
  • Consider the destination of the Tile’s link, if you would like to take users to additional information or external content.

Sizing Images

Tiles can vary in dimensions based on what Style options you have selected.

  • Image to the Left, Text to the Right: Commonly called "Square Tiles," these should be 200px by 200px.
  • Large Image Above Text: Commonly called "Wide Tiles," these tiles should be 375px by 175px.

Tile Ordering

Tiles are arranged by creation date with the most recent item appearing furthest to the left. As new tiles are created, old tiles move to the right until they "fall off" the page. By default, sites show 3 tiles before this cut off, but this setting can be changed in the Setup Block.

If the order you currently have is the inverse of what you're looking for, the easiest thing to do it is:

  1. Copy the tile you want to display in the middle, save it as the same name. (Cascade will append a "1")
  2. Copy the tile you want to display to the left, save it as well.
  3. Delete the two "old" tiles (The ones you used as the basis for your copies).
  4. Rename the "new" tiles to remove the 1.

Note that this sort of ordering should only be used during your first configuration of tiles. As you add new tiles, the ordering will be automatic.

Tiles Options

Tile Style

Image to the Left, Text to the Right: By default, tiles use this layout which will place the image on the left side the tile’s Tile Content.

Example of tile with image to the left.

Large Image Above Text: This layout will place the image at the top of the tile and allow for the tile’s Tile Content below the image.

Example of tile with large image above text.

Large Image, No Text:  This will use the uploaded image as the tile without any text.

Example of a tile with only an image, no text.

Show how many Tiles:

If you choose to display tiles, the number chosen will automatically set the width of the tile.  Be default, 3 tiles will display in a single row with each tile taking up a third of the available row width.

An example of two tiles.

An example of the three tiles option.

An example of four tiles.

Theme:

Light: This option is selected for you by default. It displays a white background for your tiles.  Alternatively "Dark" will display a dark gray background for your tiles.

Light Tiles example.

Dark Tiles example.

Advanced Options

Include Frame:

This is a checkbox that is defaulted to a checked Yes option which creates spacing withing your tiles to give it a clean look.  You may, however, choose to eliminate interior spacing so images are flush against the edges of your tile boxes.

Place Solid Background behind tiles:

This is a checkbox that is not checked by default. If it is checked it places a solid background behind the tiles to create a visual grouping rather than individual boxes for each tile as seen below.

Example of tiles without background.

Hide Tiles:

This is a checkbox that is defaulted to a checked Yes option.  If you wish for your page to display tiles, you will want to uncheck this box. 

Multiple Rows of Tiles

Some sites many find that they need more than one row of tiles.  If you'd like to enable multiple tile rows, please contact webhelp@mso.umt.edu.