Drupal Template: 
UQ School Template

 

How to use this information

Display
Reference guides for the display location of images uploaded to the image fields of different content types.
Guidance
Advice in relation to various topics.
 
Insert Image
Step-by-step instructions for inserting images.
Reference
Background information to concepts.
Display - Basic Page

Display - Basic Page

Drupal Template: 
UQ School Template
 

Content is displayed differently depending on how it is used on the website.  The potential displays are summarised below.

  1. Page Display
  2. Featured as a FrontPage Hero
  3. Featured by selecting Promoted to the Front Page

 

  • Edit Screen - basic page completed fields 

    Completed basic page fields

 

Edit Screen - uploaded images in the image fields

Images uploaded to the basic page


Page Display

When a user navigates to the display for the basic page, the image uploaded to the Image (1) field is displayed on the right-hand side of the webpage. The caption for the image field displays below the image as well as when the mouse is hovered over the image.

 

Basic Page as a webpage


FrontPage Hero

When the basic page is featured as a FrontPage Hero, the image uploaded to the Featured Image (2) field is displayed. The caption for the featured image is displayed when the mouse is hovered over the image.

Basic page as a FrontPage Hero

 


When the basic page is featured by promoting it to the front page under Publishing Options, the image uploaded to the Image (1) field is displayed. The caption for the image field displays below the image as well as when the mouse is hovered over the image.

Basic page promoted to the front page

 

 

Display - Article

Display - Article

Drupal Template: 
UQ School Template
 

Content is displayed differently depending on how it is used on the website.  The potential displays are summarised below.

  1. Page Display
  2. Featured as a FrontPage Hero
  3. Featured by selecting Promoted to the Front Page

 

  • Edit Screen - article completed fields 

    Article Edit Screen

 

Edit Screen - uploaded images in the image fields

Images uploaded to the basic page


Page Display

When a user navigates to the display for the article, the image uploaded to the Image (1) field is displayed on the right-hand side of the webpage. The caption for the image field displays below the image as well as when the mouse is hovered over the image.

 

Article as a webpage


FrontPage Hero

When the article is featured as a FrontPage Hero, the image uploaded to the Image (1) field is displayed. The caption for the featured image is displayed when the mouse is hovered over the image.

Article as a FrontPage Hero

 


When the article is featured by promoting it to the front page under Publishing Options, the image uploaded to the Image (1) field is displayed. The caption for the image field displays below the image as well as when the mouse is hovered over the image.

Article promoted to the front page

 

 

Guidance - Profile Images

Guidance - Profile Images

The following guidance is provided to increase the consistency and quality of profile photos used on UQ websites.

 

Image Source

Images are currently either sourced from existing UQ Researchers images, provided by staff or arranged by school and faculty as an in-house photo session.

 

Format and Size

The content editor will automatically resize and compress uploaded images.  The following format and size guidelines are recommended

  • Photos should be provided in PNG or JPEG format
  • Minimum image dimension is 222px wide by 222px high
  • Maximum image file size is 20MB

 

Style and Usage
  • Typical image usage is in a square format
  • Images are cropped to the centre point
  • Supply a high quality photo

 

Good Image Style
Poor Image Style

 

Eyes
Do keep your eyes naturally open and facing the camera.
Do Not open your eyes wide, close, block your eyes with sunglasses, hair or cover your eyes in shadow.

 

Smile
Do smile naturally with teeth visible.
Do Not clench you mouth shut or exaggerate a laughing smile.

 

Head and Shoulders
Do show head and shoulders or top of shoulders.
Do Not close-up on just head or full body shots.

 

Asymmetrical Composition
Do face the camera straight on or with your shoulders at a slight angle.
Do Not stand symmetrical/flat, facing the camera.

 

Background
  • Simplify the background
  • Ensure the background is clear and uncluttered
  • Solid, not-too-bright wall or simple outdoor background works well.

 

Useful Links
Guidance - sources, conditions 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 UQ Drupal site.  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

  • 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.
  • UQ Images (uq login required)
  • local school or faculty drives
  • eSpace advanced search using display type 'image'.

Externally sourced images

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

 

Insert Image - using the 12 column grid

Insert an Image - using the 12 column grid

Drupal Template: 
UQ School Template

 

Images are inserted in a website in two ways, viz.

  1. An image may be uploaded via an image field that is available on the content types  - basic page, article, project/grant, researcher/staff profile and event, or
  2. An image may be inserted in the body field and is referred to as an inline image.

 

The guidance that follows is focused on inserting an inline image using the 12 column grid.  

 

Step 1

Insert the cursor at the beginning of the paragraph where the image must be placed and click the image icon (image icon) on the WYSIWYG editor to open the Image Properties window.

Insert cursor and click image icon

 

Step 2

The Image Properties window displays.  Click the Browser Server button to open the image browser and access images on the server.

Select Browse Server

 

 

Step 3

The image browser displays. Either double click the image if the default size applies or right click the image to select an image style.

Select Image

 

Step 4

Complete the Alternative Text field and select the alignment for the image.

Insert Alt Text and select alignment

 

Step 5

Click the Advanced tab.  To display the image across 4 of the 12 column grid enter large-4 columns in the Stylesheet classes field and click OK.

Advanced Tab - insert stylesheet class

 

 

Step 6

Select the appropriate moderation state (draft, needs review or published) in Publishing Options and click Save to update the Content Type.

Save Content type

 

Display - Small Screen (Mobile Device)

 On a mobile device, the image would appear at the top and the text would appear below. 

 

Display - Large Screen (Laptop/Desktop)

For the large screen device, the image displays across 4 of 12 available columns in the grid and the text wraps around the image.

Display for medium screens

Reference - Responsive Web Design

Reference - Responsive Web Design

Drupal Template: 
UQ School Template

 

Responsive Web Design

Here at UQ, we are working toward  websites based on responsive web design which aims to optimise a page displayed on the web by multiple devices (http://zurb.com/word/responsive-web-design, 23/11/2015).  Three elements are required to achieve responsive web design, viz flexible grid, flexible images and media queries.

  • Width of the content is determined by the number of columns used.
  • Height of the content is determined by the amount of content
  • Spacing of the content is determined by a blank space called a gutter (padding) between the consecutive columns and consecutive rows
Flexible grid
The 12 column fluid grid arranges content based on percentages rather than pixels. The number of columns used to display the content determines the width, while the amount of content determines the height used. Between each column and row there is a blank space called a gutter (padding) to prevent cluttering of the content.

The display of the content is determined by the following factors.
12 Column Grid
 
Flexible images

The images are do not rely on a fixed pixel size by rather is set to a maximum setting (maximum width is 100%) and then resizes depending on the device that is used.  This is currently built into the system.

 

Media queries
Enables the use of different style rules for different media types/devices that have different screen sizes. When content is created and styles are applied, the default code that is applied is for mobile devices and large devices inherit these styles. If a different style is required on devices other than that applied to the mobile device, customised code must be inserted. The table below summarises the different screens sizes.

screen sizes

 

Example

The image below demonstrates the display small screens such as a mobile device.

display on a small screen

 

The image below demonstrates using the grid to insert an inline image and allow the rest of the text to wrap around the inline image when viewed on large screens.  The instructions for achieving this layout is provided in Insert an Image - using the 12 column grid.

Use of 4 columns of the grid for an image