Hero banner guide

Hero banner

The Hero Banner is a page title component for Panel pages. It outputs a <h1> element for the page title overlaying an image, and can optionally have 1-3 action buttons. Only one Hero Banner should be used per page and it should ideally be the first component on the page.

hero

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

Step 1

Click Customize this page to start adding components to a panel page.

Customise this page

Step 2

The available regions where components can be added are displayed as blue shaded fields. Click the plus (+) button to open the list of available components grouped by category. 

Click plus to add a component

Step 3

The available components display. Click on the UQ category and then select the Hero Banner component to open the configuration form.

Select Hero Banner from the UQ Content types category

Step 4

The configuration form for the Hero Banner displays.  Complete the fields before clicking Finish.

  1. Title - insert a title for the component
  2. Image - select an upload an image from your computer

configure hero banner 1-2

 

  1. Layout - retain the default banner or select a thinner banner.
  2. Theme - retain the theme or add a dark or light tint.
  3. Text - retain light text or change to dark text

dark theme light text

 
  1. If the Hero banner has three links, insert the title and URL for the links and click Finish.

Tip:  Use a relative reference when linking to content on your website.

Configure hero links

Step 5

The system returns to the panel page In-Place Editor.  Click Save to complete process of adding the component.

Save panel page changes

 

The completed component displays.

completed hero banner

 

Hero images and banners guide

Hero image and banners

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

      Image sources, conditions of use and attribution

      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 licenced 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).

      Examples:

      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

      Task: Rich text component

      Rich text guide

      Rich text

      Provides a simple WYSIWYG field pane. Can be wrapped in the Section pane style like other components.

      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

      This functionality requires Site Builder permissions.

      Add a Rich Text pane. Instructions for adding panel components.

      Step 3

      The available components display. Click on UQ  category and then select the Rich text component to open the configuration form.

      Select rich text

      Step 4

      The configuration form for the Rich text displays.

      1. Title - insert a title for the component.  This assists in identifying the component on the Panel Content page.
      2. WYSIWYG Editor - What You See Is What You Get. You can style the text and add rich media contents to your document in real time by using the editor toolbar buttons and dialog windows. The result will be seen immediately. You do not need to work with HTML code directly.
      3. Enter text in the body field

      configure new rich text 1 to 3

      1. Click Finish to save the configured rich text component and return to the panel page.

      Configure rich text 4

      Step 5

      The system returns to the panel page In-Place Editor.  

      1. Add Pane Styling to edit the display of the component on the panel  page.  Refer to the instructions, Add Pane Style.

      2. Click Save to complete the process of adding the component.

      save panel page changes

      WYSIWYG guide

      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
       bold
       
      italics button
       italics
       
      underline button
       underline
       
      Strikethrough button
       strikethrough
       
      superscript button
       superscript
       
      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

      Address
      Formatted

      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 
       

      Task: Card grid component

      Card grid guide

      Card grid

      Use this component when it’s necessary to highlight content that requires the user to navigate to a sub-page for further detail. Images should have a similar tone and treatment to visually unify the panel.

      Cards can be added as either custom cards where all fields are manually set, or as node references where the content of the card comes from the node page being referenced.

      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.

        card-grid-linkit-d

      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. 

        Note
        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

      For the node reference paragraph type, the system provides a drop-down from which the published content can be selected.  When the node is selected, the title, teaser image and URL from the node (content type) are displayed using the card.

      The content types such as basic pages are nodes. Each node has a unique identifier called a node reference.

      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 node reference by

      1. clicking the drop-down
      2. scroll to the node and click the not to select it

      node reference dropdown selection

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

      save the node reference

      This functionality requires Site Builder permissions.

      Step 1

      Click Customize this page to add the card grid component to a panel page.

      Customise this page

      Step 2

      The available regions where components can be added are displayed as blue shaded fields. Click the plus (+) button to open the list of available components grouped by category. 

      Click plus to add a component

      Step 3

      The available components display. Click on the UQ category and then select the Card Grid component to open the configuration form.

      Add content list

      Step 4

      The configuration form for the Card Grid displays.  

      1. Title - insert a title for the component.  This assists in identifying the component on the Panel Content page.
         
      2. View mode - For the view mode consider:
        a. the type of card - default, compact or overlay
        b. the column layout for displaying the cards -  select  2, 34 column or horizontal card
         
      3. Paragrah type - there are two types.  For custom card the title, summary and link can be inserted.  If node reference is selected, node (e.g. basic page) title, teaser image and URL  are used for the card.
        a. Select custom card to insert a title, summary and link and proceed OR
        b. Select node reference to select a node to display as a card.

      configure new card grid 1-3

      1. Click Add new Paragraph to start completing the first custom card.

      Add new paragraph

      1. Title - Limit the title length, so that it does not exceed 3 lines on the card.

      2. Image - recommended width 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.

      Card title and image

      1. Primary Link - used to create  the hyperlinked card title.
        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
        D. Click Insert Link.

      1. 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 Step 8 above to insert a relative reference. 

        Note
        A. If the relative reference is used, the title field will display the title of the content that is linked to.
        B. 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.

      Action links

      1. Click Add another Paragraph to add cards 2 and 3.  Follow the guidance outlined in  numbers 3-9 of Step 4 to complete the required fields for each card.

      Add new paragraph

      1. Click Finish to save the configured card grid (column card) and return to the panel page.

      Click finish

      Step 5

      The system returns to the panel page In-Place Editor.  

      1. Add Pane Styling to edit the display of the component on the panel  page.  Refer to the instructions, Add Pane Style.

      2. Click Save to complete the process of adding the component.

      save card grid component

      • 2-4 column layout display
      • Image
      • title
      • up to 20-word summary
      • up to 2 action links

      2 column card

      Column layout display

      2 column

      2 column layout

      3 column

      card grid displayed across 3 columns

      4 column

      card grid display across 4 columns

      Horizontal card

      horizontal card

       

      Card grid fields

      Fields displayed:  title (including primary link), body and action links

      default display

      Compact

      Fields displayed:  hyperlinked title

      card compact

      Overlay

      Fields displayed: title and view button (linked to the primary link)

      overlay display

      Card images guide

      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

      Cropping guide

      Cropping

      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

      Task: Format content

      Basic page guide

      Basic page

      Basic pages are the simplest and most common type of page. The majority of general content pages on a site will be either Basic page or Structured pages.

      Step 1

      In the administration menu, go to Content > Add content > Basic page.

      Basic page menu selection

      Step 2

      The edit screen displays.

      1. Title - Page title
      2. Summary - Optional. Displays in teaser and card views where the page is referenced in a list. Doesn't appear on the page.
      3. Body - Content of the page

      Basic page fields 1 to 3

      1. Teaser image - Optional. Displays in card and teaser views. Advice on images.
      2. Hero image - Optional. Replaces the default page header with a hero banner header.

      Basic page image fields

      1. Aside - Optional. Used for content that is tangentially related to the Body content, such reminders or contact details.
        Click Add new paragraph to create an Aside.
        Note - Headings used in the aside, should start at heading level 3.

      Basic page aside

      The Aside field displays.

      aside rich-text paragraph

      1. Related content - Optional. Allows other pages on the site to be referenced in a short list. The relationship is manually created, not inferred from any data such as tags.
        Click Add new paragraph to create a related content group.

      click add new paragraph

      The Related Content fields display.

      Title - Optional. Heading to label the related pages. e.g. "Associated research", or "See also"

      Related content - Reference to other pages on the site. Type the first few letters of a page title to look-up the desired page. Multiple related pages can be added.

      related content

      1. Tags - Click the dropdown arrow to select a tag from the list of vocabularies and their terms to categorise the content.

      Basic page tags

      1. Menu Settings  - Tick provide a menu link to display the menu settings options. Adding a page to the menu ensures it will appear in the site map.

      Tick provide a menu link

      Enter the menu settings fields.

      Menu link title - The menu link title is automatically populated from the basic page title. The menu link title can be edited.

      Description - Content entered in the description field will be displayed when hovering the cursor over the menu link.

      Parent item - Selection of a parent item ensures improved website navigation by displaying a breadcrumb trail at the top of the page.

      Weight - Select a weight to determine the order of the menu link in the Parent Item. Menu links with smaller weights are displayed before links with larger weights.  Tip: easier to drag the links into position to change the order. Review
      re-order menu links.

      Basic page menu

      1. URL path settings - a friendly URL is generated automatically if the tick box remains ticked.

      URL path settings

      1. Revision information - if create new revision remains ticked, a new version of the basic page is saved each time after it is published. The versions are accessible from the revisions tab.

      revision information

      1. Authoring information - The information of the author is recorded. After the basic page is saved, the "Authored on" field is updated.

      authoring information

      1. Publishing options - Click the tab Publishing options to finalise the publishing settings.
        To publish - The published field is automatically ticked. Keep it tick to publish
         To create a draft - untick published to save as a draft.

      publishing options

      1. Save - Click Save to update the basic page. 
      1. Hero image, including the page title
      2. Breadcrumb. Displays when the page is added to the menu under another item.
      3. Body
      4. Aside
      5. Side menu. Includes siblings and child pages.
      6. Related content.

      Large device display

      Headings guide

      Headings guide

      Headings are used to structure sections of content on a page. They enable skimming and add semantic value which is used by screen readers and search engines.

      Heading levels range from 1 - 6. Referred to as h1, h2, h3, etc

      Heading 1 <h1> is reserved for the page title. It should be the first heading on the page, and there should generally only be one h1 per page.

      Headings provide semantic structure to a document and need to follow the numerical order. The first content heading should be h2. If that section has a sub-heading it will be a h3.

      What to avoid

      • Don't use bold instead of a heading as it doesn't have the same semantic meaning.
      • Don't skip heading levels.

      Heading 2

      Heading 3

      Heading 4

      Heading 5
      Heading 6

      Basic page guide

      Basic page

      Basic pages are the simplest and most common type of page. The majority of general content pages on a site will be either Basic page or Structured pages.

      Step 1

      In the administration menu, go to Content > Add content > Basic page.

      Basic page menu selection

      Step 2

      The edit screen displays.

      1. Title - Page title
      2. Summary - Optional. Displays in teaser and card views where the page is referenced in a list. Doesn't appear on the page.
      3. Body - Content of the page

      Basic page fields 1 to 3

      1. Teaser image - Optional. Displays in card and teaser views. Advice on images.
      2. Hero image - Optional. Replaces the default page header with a hero banner header.

      Basic page image fields

      1. Aside - Optional. Used for content that is tangentially related to the Body content, such reminders or contact details.
        Click Add new paragraph to create an Aside.
        Note - Headings used in the aside, should start at heading level 3.

      Basic page aside

      The Aside field displays.

      aside rich-text paragraph

      1. Related content - Optional. Allows other pages on the site to be referenced in a short list. The relationship is manually created, not inferred from any data such as tags.
        Click Add new paragraph to create a related content group.

      click add new paragraph

      The Related Content fields display.

      Title - Optional. Heading to label the related pages. e.g. "Associated research", or "See also"

      Related content - Reference to other pages on the site. Type the first few letters of a page title to look-up the desired page. Multiple related pages can be added.

      related content

      1. Tags - Click the dropdown arrow to select a tag from the list of vocabularies and their terms to categorise the content.

      Basic page tags

      1. Menu Settings  - Tick provide a menu link to display the menu settings options. Adding a page to the menu ensures it will appear in the site map.

      Tick provide a menu link

      Enter the menu settings fields.

      Menu link title - The menu link title is automatically populated from the basic page title. The menu link title can be edited.

      Description - Content entered in the description field will be displayed when hovering the cursor over the menu link.

      Parent item - Selection of a parent item ensures improved website navigation by displaying a breadcrumb trail at the top of the page.

      Weight - Select a weight to determine the order of the menu link in the Parent Item. Menu links with smaller weights are displayed before links with larger weights.  Tip: easier to drag the links into position to change the order. Review
      re-order menu links.

      Basic page menu

      1. URL path settings - a friendly URL is generated automatically if the tick box remains ticked.

      URL path settings

      1. Revision information - if create new revision remains ticked, a new version of the basic page is saved each time after it is published. The versions are accessible from the revisions tab.

      revision information

      1. Authoring information - The information of the author is recorded. After the basic page is saved, the "Authored on" field is updated.

      authoring information

      1. Publishing options - Click the tab Publishing options to finalise the publishing settings.
        To publish - The published field is automatically ticked. Keep it tick to publish
         To create a draft - untick published to save as a draft.

      publishing options

      1. Save - Click Save to update the basic page. 
      1. Hero image, including the page title
      2. Breadcrumb. Displays when the page is added to the menu under another item.
      3. Body
      4. Aside
      5. Side menu. Includes siblings and child pages.
      6. Related content.

      Large device display

      Link to a location in the local website

      Link to an external website

      Link to a blank email message

      Add a button

      File management

      Task: In-line images

      Basic page guide

      Basic page

      Basic pages are the simplest and most common type of page. The majority of general content pages on a site will be either Basic page or Structured pages.

      Step 1

      In the administration menu, go to Content > Add content > Basic page.

      Basic page menu selection

      Step 2

      The edit screen displays.

      1. Title - Page title
      2. Summary - Optional. Displays in teaser and card views where the page is referenced in a list. Doesn't appear on the page.
      3. Body - Content of the page

      Basic page fields 1 to 3

      1. Teaser image - Optional. Displays in card and teaser views. Advice on images.
      2. Hero image - Optional. Replaces the default page header with a hero banner header.

      Basic page image fields

      1. Aside - Optional. Used for content that is tangentially related to the Body content, such reminders or contact details.
        Click Add new paragraph to create an Aside.
        Note - Headings used in the aside, should start at heading level 3.

      Basic page aside

      The Aside field displays.

      aside rich-text paragraph

      1. Related content - Optional. Allows other pages on the site to be referenced in a short list. The relationship is manually created, not inferred from any data such as tags.
        Click Add new paragraph to create a related content group.

      click add new paragraph

      The Related Content fields display.

      Title - Optional. Heading to label the related pages. e.g. "Associated research", or "See also"

      Related content - Reference to other pages on the site. Type the first few letters of a page title to look-up the desired page. Multiple related pages can be added.

      related content

      1. Tags - Click the dropdown arrow to select a tag from the list of vocabularies and their terms to categorise the content.

      Basic page tags

      1. Menu Settings  - Tick provide a menu link to display the menu settings options. Adding a page to the menu ensures it will appear in the site map.

      Tick provide a menu link

      Enter the menu settings fields.

      Menu link title - The menu link title is automatically populated from the basic page title. The menu link title can be edited.

      Description - Content entered in the description field will be displayed when hovering the cursor over the menu link.

      Parent item - Selection of a parent item ensures improved website navigation by displaying a breadcrumb trail at the top of the page.

      Weight - Select a weight to determine the order of the menu link in the Parent Item. Menu links with smaller weights are displayed before links with larger weights.  Tip: easier to drag the links into position to change the order. Review
      re-order menu links.

      Basic page menu

      1. URL path settings - a friendly URL is generated automatically if the tick box remains ticked.

      URL path settings

      1. Revision information - if create new revision remains ticked, a new version of the basic page is saved each time after it is published. The versions are accessible from the revisions tab.

      revision information

      1. Authoring information - The information of the author is recorded. After the basic page is saved, the "Authored on" field is updated.

      authoring information

      1. Publishing options - Click the tab Publishing options to finalise the publishing settings.
        To publish - The published field is automatically ticked. Keep it tick to publish
         To create a draft - untick published to save as a draft.

      publishing options

      1. Save - Click Save to update the basic page. 
      1. Hero image, including the page title
      2. Breadcrumb. Displays when the page is added to the menu under another item.
      3. Body
      4. Aside
      5. Side menu. Includes siblings and child pages.
      6. Related content.

      Large device display

      Insert in-line images

      Insert in-line images

      In-line images refer to any image added to the body field via the WYSIWYG editor as opposed to a specific file upload field such as "Teaser image".

      Step 1

      1. Position the cursor where the image should be inserted.
      2. On the WYSIWYG editor, click the image button.

      Select image button on WYSISYG

      Step 2

      The image properties window displays. Click browse server to select an image.

      Select browse server on Image properties

      Step 3

      The file browser image folder displays. Select the image if it is already on the server (skip to Step 5), or click upload to upload a new image from your computer.

      File browser upload

      Step 4

      The window to your computer opens. Navigate to the location where the image is stored.  

      1. Click on the image to select it
      2. Click open to upload the image.
        1. Mulitple images can be uploaded at one time. Select all images before clicking open.

      Image upload

      Upload finished displays if the image is successfully uploaded.

      Step 5

      Select the image by clicking on it. Click choose or double click the image to insert it in the WYSIWYG field.

      Insert image

      Step 6

      The image properties window opens.

      1. Insert alternative text to describe the image for screen readers and search engines. This text doesn't display on the front-end, but is required for accessibility.
      2. Select the alignment of the image
      3. Select captioned image to display a caption below the image. The caption field will appear after OK is clicked.
      4. Click OK to save the image properties.

      completed Image properties

      You are returned to the body field to complete the rest of the content.

      Task: Structured page

      Structured page guide

      Structured page guide

      Structured pages are similar to Basic pages, but are designed for long content that needs to be split up into sections or steps. The majority of general content pages on a site will be either Basic page or Structured pages.

      Step 1

      In the administration menu, go to Content > Add content > Structured page.

      menu selection for structured page

      Step 2

      The edit screen displays.

      1. Title - The page title.
      2. Introduction - Displays above the structured content paragraphs.

        Structured page fields 1 to 3

      3. View mode selector - Determines how the structured content fields will display.

        Tabs view
        Each paragraph is a separate tab. Recommend 2-4 tabs maximum.

        Tabs display in horizontal format


        Accordion view
        Each paragraph is a separate accordion toggle. All are collapsed by default, and only one is active at a time.

        Accordion display



        Step by step view
        Each paragraph becomes a step in a process and behaves like a separate page. Index of steps is listed at the top of the page, and previous/next buttons display at the bottom.

        Step by step display


        Table of contents view
        Each paragraph is displayed one below the other. A jump list to each paragraph displays at the top of the page.

        Table of contents

      1. Structured Content - Add a new paragraph for each section of content to be displayed using one of the view modes.

      Add new paragrahp

      Each structured content paragraph contains a Title and Body field.

      Structured content paragraph

      1. Teaser image - Optional. Displays in card and teaser views. Advice on images.
      2. Hero image - Optional. Replaces the default page header with a hero banner header.

      Teaser image and hero image uploaded

      1. Aside - Optional. Used for content that is tangentially related to the main page content, such reminders or contact details.

       aside

      The Aside field displays.

      aside rich-text paragraph

      1. Related content - Optional. Allows other pages on the site to be referenced in a short list. The relationship is manually created, not inferred from any data such as tags.

      click add new paragraph

      The Related Content fields display.

      Title - Optional. Heading to label the related pages. e.g. "Associated research", or "See also"

      Related content - Reference to other pages on the site. Type the first few letters of a page title to look-up the desired page. Multiple related pages can be added.

      related content

      1. Tags - Click the dropdown arrow to select a tag from the list of vocabularies and their terms to categorise the content.

      tags

      1. Menu Settings  - Tick provide a menu link to display the menu settings options. Adding a page to the menu ensures it will appear in the site map.

      Tick provide a menu link

      Enter the menu settings fields.

      Menu Link Title - The menu link title is automatically populated from the page title. The menu link title can be edited.

      Description - Content entered in the description field will be displayed when hovering the cursor over the menu link.

      Parent Item - Selection of a parent item ensures improved website navigation by displaying a breadcrumb trail at the top of the page.

      Weight - Select a weight to determine the order of the menu link in the Parent Item. Menu links with smaller weights are displayed before links with larger weights.  Tip: easier to drag the links into position to change the order. Review
      re-order menu links.

      Basic page menu

      1. URL path settings - a friendly URL is generated automatically if the tick box remains ticked.

      URL path settings

      1. Revision Information - if create new revision remains ticked, a new version of the structured page is saved each time. The versions are accessible from the revisions tab.

      revision information

      1. Authoring Information - The information of the author is recorded. After the structured page is saved, the "authored on field" is updated.

      authoring information

      1. Publishing Options - Click the tab Publishing options to finalise the publishing settings.
        To publish - The published field is automatically ticked. Keep it tick to publish
         To create a draft - untick published to save as a draft.

      publishing options

      1. Save - Click Save to update the structured page. 
      • Header - Optional hero image.
      • Introduction
      • Structured content paragraphs - Displayed as either; tabs, accordion, step-by-step or table of contents.
      • Aside - Optional.
      • Side menu
      • Related content - Optional.

      Structured page layout

      Task: create a person (professional) & create a person (academic)

      Person guide

      Person guide

      The Person content type is used to display a biograph page, most commonly for staff. People can be grouped into Teams and listed in the Staff Directory.

      People can be manually added on the site, or imported automatically from authorative central data.

      Imported data must be updated at its source of origin to feed through to UQ Drupal.

      Step 1

      In the administration menu, go to Content > Add content > Person.

      select person from the add content menu options

      Step 2

      The edit screen displays.

      1. Display name - Full name and title as preferred for publication. e.g. Mr John Citizen
      2. Firstname - Used in the page url
      3. Surname - Used in the page url
      4. Postnominal

      first 4 fields in person page
       

      1. Position - Paragraph containing multiple fields. A person can have multiple positions.

      Add position button
       

      The Position fields display.

      Organisation ID
      Organisation Title
      Position Title - Imported from Aurion.
      Staff group - Optional. Groups staff by type for filtering in the Staff Directory
      Phone
      Fax - Imported from UQ Researchers

      position fields

      To add additional positions, click Add another Position.

      1. Email - Imported from the primary email field in Webprism.

      enter the email address
       

      1. Areas of responsibility

      Areas of responsibiliity
       

      1. Biography - Imported from UQ Researchers.

      Biography
       

      1. Photo - See profile picture guidance for advice. Imported from UQ Researchers for UQ staff.

      image of browse button to upload an image
       

      1. UQ Username

      Blank - if the UQ username field is left blank, this person content type will not be overwritten by an automatic upload of people information to the website.

      Populated - if the UQ username is entered in the field, the fields in this person content type will be overwritten by an automatic upload of people information to the website.

      blank UQ username field
       

      1. UQ Researcher ID - Optional. Allows a link to the profile on UQ Researchers
      2. Research profile is public - If ticked, and a UQ Researcher ID is provided, the link to the profile will display on the Person page.
      3. Is a supervisor - If ticked, a paragraph is inserted in the page to provide a link to view current and completed supervisions on UQ Researchers.
      4. eSpace Author ID - Optional. If provided, an automated feed of publications for that author will display on the Person profile page.

      position fields linking to UQ researchers and eSpace
       

      1. Research Area - select the research area that the researcher works in.  The research areas are added as terms to the Research area vocabulary.  A Site coordinator can add a term to a vocabulary. For further information about terms and vocabularies, review Taxonomy.

      Research area selection drop-down
       

      1. URL path settings - a friendly URL is generated automatically if the tick box remains ticked.

      URL path settings
       

      1. Revision Information - if create new revision remains ticked, a new version of the basic page is saved each time. The versions are accessible from the revisions tab.

      revision information
       

      1. Meta tags

      Meta tags
       

      1. Authoring Information - The information of the author is recorded. After the basic page is saved, the "authored on field" is updated.

      authoring information
       

      1. Publishing Options - Click the tab Publishing options to finalise the publishing settings.
        To publish - The published field is automatically ticked. Keep it tick to publish
         To create a draft - untick published to save as a draft.

      publishing options
       

      1. Save - Click Save to update the person content type.

      Finding a UQ Researcher ID

      1. Go to http://researchers.uq.edu.au and search for the reseacher.
      2. The researcher's profile page displays. The UQ Researcher ID appears at the end of the URL:
        https://researchers.uq.edu.au/researcher/{UQ Research ID}

      Finding an eSpace author ID

      1. Go to http://espace.library.uq.edu.au and search for the author.
      2. A list of publications by that author displays.
      3. Click on the name of the author in one of the results to view results for specifically that author. The eSpace ID appears at the end of the URL:
        http://espace.library.uq.edu.au/list/author_id/{eSpace ID}

      The feed of publications from eSpace is cached on Drupal websites for 1 hour for performance reasons.

      1. Display name
      2. Position title
      3. Organisation title
      4. Telephone
      5. Email
      6. UQ Researcher profile link
      7. Profile image
      8. UQ Researcher biography
      9. Areas of responsibility
      10. Supervision block linking to UQ Researchers
      11. eSpace publications
      12. Research areas

      Person display layout

      Task: create a team (professional) & create a team (academic)

      Team guide

      Team guide

      Teams are manually managed groups of people. They can be used to represent organisational structure, research teams, or any other ad-hoc grouping.

      It is recommended to create people pages first, and then create the teams to assign them to.

      Step 1

      In the administration menu, go to Content > Add content > Team.

      Add content team page

      Step 2

      The edit screen displays.

      1. Title - Page title
      2. Description - Optional. DescibDescribeseam's role, purpose, etc.

      team create page

      1. Members - Multiple groups of people can be added to a team.
        • Description - Optional. Describes the title, role, function of these members in the team.
        • Members - Entity reference to each Person node. Order is set manually by dragging.

      Add team members

      1. Staff group - Optional. Categorise the Team to allow sorting/filtering on listing pages such as the Staff Directory.
      2. Email - Optional. General contact email for the team. e.g. team-name@org.uq.edu.au
      3. Phone - Optional. General team phone number.
      4. Location - Optional. Physical location of the team if they are accessible publicly.
      5. Tags - Click the dropdown arrow to select a tag from the list of vocabularies and their terms to categorise the content.

      Team Training Staff Grouping and tags image

      Task: event - with sessions & event - without session

      Event guide

      Direct link to the guide to access all tabs: https://web-publishing.uq.edu.au/guides/content/content-types/event

      Back to top

      Task: promote event in a card grid

      Card Grid guide

      Direct link to the guide to access all tabs: https://web-publishing.uq.edu.au/guides/panels/components/card-grid

      Back to top