Content block (Content type)

Content blocks are headings, images 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, email websupport@canterbury.ac.nz if you want to set up this content block.

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 archived section where your content blocks are kept eg. Content Block 1. Mouse over the Yellow Dropdown menu beside the section and select Add 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 Body. 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 Uploadto upload and crop an image you want to use.
    1. The 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 Add to save.

Content Block – Media

  1. Locate the archived section where your content blocks are kept eg. Content Block 1. Mouse over the Yellow Dropdown menu beside the section and select Add 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 Body. 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 Uploadto upload and crop an image you want to use.
    1. The 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. 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, see the section Upload New Document to the Media Library. OR follow these steps
    1. From the Content drop down, select Upload New Document.
    2. A form will appear where you complete the details of the document. In the Name field, enter a name for your document. It should provide information about the document, be relevant, short, catchy and concise.
    3. Add a Description.
    4. Add Keywords. Adding keywords makes it easy to find a particular documents in
      the future and increases search engine optimisation.
    5. Select a Category for your document, this is where your image will be saved.
    6. Select a Document to upload from your computer.
    7. Click Submit to save the document.
  9. Preview to make sure you don’t exceed the maximum number of lines for the headings and texts.
  10. Click Add to save.

How to add a Content Block - Video

  1. Locate the archived section where your content blocks are kept eg. Content Block 1. Mouse over the Yellow Dropdown menu beside the section and select Add 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 content to Body. 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 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 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. 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 Add to save.