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