The following guides have been included to assist you with completing the hero banner component.

  1. Edit a hero banner​​
  2. Hero images and banners guide
  3. Image sources, conditions of use and attribution

Edit a hero banner

Step 1

Hover the mouse pointer over the right-hand corner of the hero banner pane to display the Edit cog (Edit menu icon). Click the icon to display the menu and click Edit to open.

edit hero banner

Step 2

The configuration form for the hero banner component displays.  

  1. Title - the title of the home page can contain a message.  Words on hero banners on other panel pages should be minimised to one single words where possible.
  2. Image - the minimum image dimensions should be 2560px X 560px.
  3. Caption - for the purposes of attributing the image as per the copyright of the image.
  4. Layout - select between the default and thin banner
  5. Theme (tint) - choose between none, dark or light tint to overlay the image.
  6. Text - depending on the selected tint, choose the text light or dark to ensure sufficient contrast between the text and image to improve legibility.

Edit the hero banner

  1. Links - insert relative path links when linking to content on the site. If required, select between 1, 2 or 3 links.
  2. Save the changes.

save hero banner

Back to top

Hero images and banners guide

Recommended image dimensions: 2560px wide by 560px high

Best practice

  • Apply a dark tint to ensure the white text stands out with enough contrast. Dark tint does not need to be a part of the actual image. It is an option when creating the hero banner component.
  • Recommended image size should be adhered to. This will remove the possibility of the image being stretched, which will result in a poor image appearance.
  • If possible, choose an image which is free of other distractions, where the person/object or theme is the focal point.

best practice image

Avoid these mistakes

Too much text

  • Banners should contain a short message that is quick and easy to read. Users are more likely to read the text if your messages are short and succinct.

Image to avoid

    Busy imagery

    • Avoid using banner images that are overly bright, which diminishes the ability of the copy to stand out sufficiently.
    • Avoid using images which have very busy imagery, which may detract further from the banners messaging.

    avoid busy images

    Too small images

    • Images smaller than recommended dimensions will be stretched to fill the space, which will result in a poor image quality.

      avoid small images

      Back to top

      Image sources, conditions of use and attribution

      Conditions and attribution

      It is your responsibility to understand and comply with any conditions of use associated with images on your website.  Ideally, attribution appears as a caption under an image or if this is not practical, at the end of the page.

      It is recommended that you avoid: 

      • original works which do not permit modification as the image in UQ Drupal may display differently on different devices or in a featured view
      • photos of people where there is not permission to use their image.

      UQ image sources

      • UQ Images (uq login required)
      • local school or faculty storage drives
      • Google search 'UQ' plus your keywords or search UQ news to see if your School or Faculty already has images on your topic.  If in doubt check with the owning organisational unit as to whether you can use it.
      • eSpace advanced search using display type 'image'.

      Externally sourced images

      Stock images should be avoided as they detract from the authenticity of your messages. However, you can purchase stock images from sites such as iStock or Shutterstock. It's possible that there is a stock image account in use in your local marketing and communications unit.

      Wikimedia commons

      Wikimedia commons is the largest single repository of media which can be reused without charge on the web with over 27 million files.  Wikimedia offers images of art, antiquities, historical events, places, buildings and nature.  The image must be pubilc domain or creative commons licensed for you to use it.  It is recommended that you cite the image using the Wikimedia format which includes a name or short title, the name of the photographer or artist if available, via Wikimedia Commons, and the legal status (expressed as public domain or CC2.0, 3.0 etc).


      The Young Student by Ozias Leduc, via Wikimedia Commons, Public Domain.

      High magnification micrograph of a liver with cirrhosis. Trichrome stain. Nephron via Wikimedia Commons CC 3.0

      Back to top

      The following guides have been included to assist you with completing the rich text component. 

      1. Edit a rich text component
      2. WYSIWYG editor

      Edit a rich text component

      Step 1

      Hover the mouse pointer over the right-hand corner of the Rich Text pane to display the Edit cog (Edit menu icon). Click the icon to display the menu and click Edit to open the Rich Text form.

      edit rich text

      Step 2

      The configuration form for the rich text component displays.  

      1. Title - do not edit the title of the component.
      2. Body - edit to update the content.

      Edit the rich-text

      1. Click Save to accept the changes

      edit rich text

      Back to top

      WYSIWYG editor

      If you can use Microsoft Word, you can edit a webpage.

      WYSIWYG editor - What You See Is What You Get
      You can style the text and add rich media to your document in real time by using the editor toolbar buttons and dialog windows. You do not need to work with HTML code directly.

      The WYSIWYG ribbon appears at the top of the authoring interface for Rich Text fields.


      bold button
      italics button
      underline button
      Strikethrough button
      superscript button
      remove format button
       remove format

      left align left align

      align centre centre align

      right align right align

      justified justified

      bullet list bulleted list

      • Unordered list item 1
      • Unordered list item 2
        • nested list item 1
        • nested list item 2
      • Unordered list item 3


      numbered list numbered list

      1. Ordered list item 1
      2. Ordered list item 2
        1. nested list item 1
        2. nested list item 2
      3. Ordered list item 3


      increase indent  increase indent


      decrease indent decrease indent

      blockquote blockquote

      undo undo

      redo redo

      cut cut

      copy copy

      paste paste

      paste from word paste from word

      link   link - opens link dialog box

      anchor   anchor -  use to create an anchor point within the text and link to it using link (chain icon)

      insert image   image - opens image dialog box

      insert horizontal line   horizontal rule:

      insert table   Table icon - opens table dialog box

      insert iframe     iFrame icon - opens iframe dialog box - for setting display properties of third party embeds

      source Source - view source code behind display

      Styling Text styling

      Normal - body text


      H2 - heading 2

      H3 - heading 3

      H4 - heading 4

      H5 - heading 5
      H6 - heading 6
      Normal div - inserts <div> tag around content, alerts you to when content is within div tags
      find  Find
      replace  Find and replace
      maximise  Maximise - maximise the writing space to full screen (you can also drag the bottom right corner to increase it a bit)
      insert snippet  Snippets - insert Snippets of content 

      Back to top

      The following guides have been included to assist you with completing the card grid component for custom cards.

      1. Edit card grid - custom card
      2. Card images
      3. Cropping

      Edit card grid - custom card

      Step 1

      Using the mouse, hover the pointer over the right-hand corner of the card grid component to activate the field and display the Edit cog (Edit menu icon). Click the icon to display the menu.

      Edit the card grid

      Step 2

      The menu displays. Select Edit to open the configuration form for the card grid, scroll to the card to be edited and edit the required fields.

      1. Title - Limit the title length, so that it does not exceed 3 lines on the card.
      2. Image - recommended image dimensions is 640px X 640px. Ensure the image is relevant to the topic of the card.
      3. Content - (optional) brief summary of up to 20 words.

      Edit configuration form 1-3

      1. Primary Link - used to create  the hyperlinked card title. If linking to content on the website, follow the steps 4A-4D to insert a relative reference.
        A. Click Search
        B. Type in a minimum of 3 letters of a word in the Search for content field.
        C. Select the Content from the list of suggested content

        Card grid Linkit A-C

        D. Click Insert Link.


      2. Action Links - secondary links on the card. Can be used for further information or calls to action.  If linking to content on the website, follow the steps 4 A-D above to insert a relative reference. 

        If the relative reference is used, the title field will display the title of the content that it is linked to.
        If an absolute reference is used, for content that does not exist on your site, type in an appropriate title and enter the absolute URL in the URL field.

      Actin links

      1. Customise display options is restricted to Site builders.

      2. Click Save to save the configured card grid (column card) and return to the panel page.

      Save Card grid

      Back to top

      Card images

      Recommended image dimensions: 640px by 640px

      Best practice

      • If possible, choose an image which is free of other distractions where the person, subject or object is the main focal point of the image.

      best practice image

      Avoid these mistakes

      Text over faces

      • Ensure text does not obscure faces.

      Image to avoid

      Busy images

      • Image is far too busy with no clear focus or subject matter.
      • Lack of a tint makes the text illegible.

      avoid busy images

      Lack of context

      • Ensure your chosen image clearly supports the text. In the example below, the image is lacking context and is not engaging

      Image should reflect context

      Back to top


      Why does my image get cropped and scaled into different sizes?

      Instead of having to supply a different image for each component, we use the one image, but across many components. This results in the one image being resized and cropped across many variations for mobiles, tablets and desktop screens. Below is a guide of how your original image can get cropped.

      image free crop

      Crop free region

      In this 640 by 480 example, the image shows a 290 by 325 pixel crop free zone, where anything inside this area won’t get cropped out. Depending on which component you choose and what device you’re viewing the image on (Mobile vs Desktop), your original image will get cropped and resized to various degrees as roughly depicted in the examples below. The image is always cropped out from the centre, and is scaled due to responsive design.

      Importance of placement

      When considering the crop free region, it is worth noting that anything in this region will not get cropped out in any of the components. Is it therefore advisable to place any important aspects of the photo within this region, to avoid the potential of it getting cropped out on various devices.

      Cropping variations

      Showing how your image can appear in different components

      crop variation 1
      crop variation 2
      crop variation 3

      Back to top