1. Home >
  2. Web Guide >
  3. Moderator Training >
  4. Content types >
  5. Content Block, Content Block – Media, Content Block - Video >

Content blocks

Content blocks are images, headings and text with links. Use these on landing pages.

There are four types of Content Blocks

  • Content Block: Block with Image, Heading, Text and links to a T4 section
  • Content Block – Media: Block with Image, Heading, Text and links to PDF or WORD documents from the Media Library
  • Content Block – Video: Youtube Video Block with thumb, play button, optional title and text. Opens up an overlay with the player
  • Content Block – External: Block with Image, Heading, Text – external link version

As a general rule, there should be a minimum of 3 content blocks across a page and max of 9 on a single page.

For visual esthetics and consistency, H1 headings should have a maximum of 2 lines and the body text should have a maximum of 4-5 lines.

The content blocks should be arranged so that they have similar lines of texts across, avoid having too little text on one content block and too much text on another, having varied lengths of texts will cause the inconsistent white gaps issue on the content blocks and can make your page look messy and unsightly.

Preview your content blocks in T4 to make sure the white space for each is similar and consistent across all content blocks on the page.

How to add a Content block

  1. To add the first content block on the page, locate the section where your content blocks are kept. Click the Actions dropdown menu and select Create Content
  2. Select the Content block content type
  3. Enter a name in the Name field. This will not be displayed on the published page.
  4. Add a heading for the content block in the H1 heading field. This will appear as the red heading on the web. Keep this text short and concise, max two lines as appears on the web.
  5. Add content to the Body field. Keep the text short and concise, max 4-6 lines.
  6. If an Image that you want to use IS already in the Media Library, click Select to choose the image you want to use from the Media Library
  7. OR if an Image that you want to use IS NOT already in the Media Library, click the Upload button to upload and crop an image you want to use.
    1. The Image Cropper window will appear
    2. Click the Import Image button, browse to and select the image you want to use from your computer. The image will load and display in the Cropper window.
    3. Select the appropriate Aspect Ratio (By default, 3:2 is selected, mouse over the different aspect ratios to help you decide which to choose).
    4. Move and resize the Crop Area as needed. The Preview window on the right shows the cropped area only. The Width and Height text box shows the dimension of the cropped area. Please make sure that the Width is NOT less than 1050px.
    5. Add a Name. It should provide information about the image, be relevant, short, catchy and concise. This is important as the name is also used for alt text to provide information about images to users with visual impairments, people using screen readers and those who have low-bandwidth connections
    6. Add a Description. The description element is used to store copyright and licensing information for media files.
      1. Images sourced externally: for example from stock image libraries, you should check the copyright notice instructions on their website to make sure you are using the correct format, for example, © Depositphotos.com/Name or Nickname of the contributor
      2. Internal images created by UC: On images created by staff or images created by photographers or agencies that the University has paid for use © Restricted/University of Canterbury.
    7. Add Keywords. Add synonyms, for example, both sofa and couch, or boy, male child, child, childhood and kid. Make sure that you are precisely describing the picture. Adding keywords to images makes it easy to find a particular image in the future and increases search engine optimisation
    8. Select the image Location. This is where your image will be saved in the Media Library
    9. Click the Upload to Media Library button.
    10. A thumbnail of your image will be displayed beside the Upload button
  8. Add a link to the relevant Section
  9. Preview to make sure you don’t exceed the maximum number of lines for the headings and texts
  10. Click Save changes to save or Save and Approve to publish

How to add a Content Block – Media

  1. From the Actions dropdown menu beside the section where your content blocks are kept, select Create Content
  2. Select the Content block - Media content type
  3. Enter a name in the Name field. This will not be displayed on the published page.
  4. Add a heading for the content block in the H1 heading field. This will appear as the red heading on the web. Keep this text short and concise, max two lines as appears on the web.
  5. Add content to the Body field. Keep the text short and concise, max 4-6 lines.
  6. If an Image that you want to use IS already in the Media Library, click Select media to choose the image you want to use from the Media Library
  7. OR if an Image that you want to use IS NOT already in the Media Library, click Upload to upload and crop an image you want to use.
    1. The Image Cropper window will appear
    2. Click the Import Image button, browse to and select the image you want to use from your computer. The image will load and display in the Cropper window
    3. Select the appropriate Aspect Ratio (By default, 3:2 is selected, mouse over the different aspect ratios to help you decide which to choose)
    4. Move and resize the Crop Area as needed. The Preview window on the right shows the cropped area only. The Width and Height text box shows the dimension of the cropped area. Please make sure that the Width is NOT less than 1050px.
    5. Add a Name. It should provide information about the image, be relevant, short, catchy and concise. This is important as the name is also used for alt text to provide information about images to users with visual impairments, people using screen readers and those who have low-bandwidth connections
    6. Add a Description. The description element is used to store copyright and licensing information for media files.
      1. Images sourced externally: for example from stock image libraries, you should check the copyright notice instructions on their website to make sure you are using the correct format, for example, © Depositphotos.com/Name or Nickname of the contributor.
      2. Internal images created by UC: On images created by staff or images created by photographers or agencies that the University has paid for use © Restricted/University of Canterbury.
    7. Add Keywords. Add synonyms, for example, both sofa and couch, or boy, male child, child, childhood and kid. Make sure that you are precisely describing the picture. Adding keywords to images makes it easy to find a particular image in the future and increases search engine optimisation
    8. Select the image Location. This is where your image will be saved in the Media Library
    9. Click the Upload to Media Library button.
    10. A thumbnail of your image will be displayed beside the Upload button.
  8. Add a link to the relevant PDF or WORD doc from the Media Library. If your document isn’t in the Media Library follow these steps to upload it
    1. From the Content dropdown menu, select Media Library to open up the T4 media library
    2. Under the Media Categories column, expand the Documents folder and look for the documents folder for your site – click to select this folder
    3. Click the green Add media button on the top right of your screen
    4. Browse to and select your document to upload
    5. Enter the details of your document (Name, Description and Keywords)
    6. Click Save changes
  9. Preview to make sure you don’t exceed the maximum number of lines for the headings and texts.
  10. Click Save changes to save and Save and approve to publish

How to add a Content Block - Video

  1. From the Actions dropdown menu beside the section where your content blocks are kept, select Create Content
  2. Select the Content block - Video content type
  3. Enter a name in the Name field. This will not be displayed on the published page.
  4. In the YouTube video ID* field, copy and paste the 11 character number that is in the YouTube URL, after the = and before the &. Example: BmrU-8ksDqU
  5. Add a title in the Tittle field
  6. Add some text to Body field. Keep the text short and concise, max 4-6 lines.
  7. If an Image that you want to use IS already in the Media Library, click Select media to choose the image you want to use from the Media Library
  8. OR if an Image that you want to use IS NOT already in the Media Library, click Upload to upload and crop an image you want to use.
    1. The Image Cropper window will appear
    2. Click the Import Image button, browse to and select the image you want to use from your computer. The image will load and display in the Cropper window.
    3. Select the appropriate Aspect Ratio (By default, 3:2 is selected, mouse over the different aspect ratios to help you decide which to choose).
    4. Move and resize the Crop Area as needed. The Preview window on the right shows the cropped area only. The Width and Height text box shows the dimension of the cropped area. Please make sure that the Width is NOT less than 1050px
    5. Add a Name. It should provide information about the image, be relevant, short, catchy and concise. This is important as the name is also used for alt text to provide information about images to users with visual impairments, people using screen readers and those who have low-bandwidth connections
    6. Add a Description. The description element is used to store copyright and licensing information for media files.
      1. Images sourced externally: for example from stock image libraries, you should check the copyright notice instructions on their website to make sure you are using the correct format, for example, © Depositphotos.com/Name or Nickname of the contributor
      2. Internal images created by UC: On images created by staff or images created by photographers or agencies that the University has paid for use © Restricted/University of Canterbury.
    7. Add Keywords. Add synonyms, for example, both sofa and couch, or boy, male child, child, childhood and kid. Make sure that you are precisely describing the picture. Adding keywords to images makes it easy to find a particular image in the future and increases search engine optimisation
    8. Select the image Location. This is where your image will be saved in the Media Library
    9. Click the Upload to Media Library button
    10. A thumbnail of your image will be displayed beside the Upload button
  9. Select Black or White for the Play button
  10. Preview to make sure you don’t exceed the maximum number of lines for the headings and texts
  11. Click Save changes to save OR Save and Approve to publish