Adding images to your page
Guidelines for adding images from the media library using the WYSIWYG editor and other components designed for image display.
Insert an image in the WYSIWYG
1. In a WYSIWYG content block you can click the Insert Media using the button in your WYSIWYG toolbar.
When inserting images to your page you are selecting from existing images in the media library.
It is best practice to upload your images via the Media page to ensure it’s tagged correctly. Learn more about Uploading images to the CMS.
2. Search for the image by Name (which is the Title you gave the image when you uploaded it) and Apply filters.
3. When you have found your image, check the box on the image and click Insert Selected button.
4. Once the image is displayed in the WYSIWYG, click on the image and an edit bar with edit options will show. Hover over the edit bar icons to see their function displayed.
5. In the edit bar you have the options to:
- Edit the media file by clicking on the hyperlinked file name at the top. The media file will open in a new window for you to edit.
- Caption (optional) – add a caption to the image which will appear below the image. Selecting the caption will add the field below the image for you to edit.
- Note, the Caption is read by screen readers. If using captions consider that the alt text is also read by screen readers.
- Make the caption and alt text different.
- Make the alt text blank (alt="") if the caption is clearly describing the image.
- Note, the Caption is read by screen readers. If using captions consider that the alt text is also read by screen readers.
- Link (optional) – you can link the image to a URL, email or phone number.
- Override the Alternative text that has been added with the media file. It is mandatory to have alt text but you can leave the alt text that has been added with the media file.
- You may choose to update the alt text on the page to make it more contextual, for example, an image with the general alt text of 'two women pointing at a computer' placed on a NSW Department of Education page could have the new alt text of 'a teacher explaining a new concept to a student.' Contextual alt text improves the accessibility and SEO of a page.
- If you update the alt text for the image, follow the guidelines.
- View mode (optional) - controls the size of the image in the WYSIWYG.
- Large (full width) – this is the preferred size for landscape (horizontal) oriented images.
- Medium (half width of the WYSIWYG block) – should be used when you have a reasonable amount of text to wrap around the image. Medium images should be aligned either left of right.
- Download – should only be used when the image is linked to a file that can be downloaded.
Align (optional) your image – None, Left, Centre or Right.
On mobile, images automatically stack and go full width.
Example images in the WYSIWYG editor
Display Large/default, align Centre with Caption.
When the image is centred and large it will take the full container width. Further text and page content will continue below the image. This allows the image to be very prominent on the page.
You can use all formatting and functionality available within the WYSIWYG editor.
Display Medium, align Left.
When the image is set to display to the left, the page content can wrap around the side of the image.
When the page content wraps around the image it is especially important that the text relates to the image that is embedded within it.
When the text continues beyond the height of the image it will stretch across the full width of the container it is in. You can use bullet points, links and any other formatting available within the WYSIWYG editor but you should check how it displays, as the left aligned image can alter the layout of the content. For example, a bullet point list may not align properly if only part of the list wraps the image.
Other components that display images
Check the guideline pages for the following components on how and when to use images.
Component | Guidelines |
---|---|
Cards | Use images to support the content in the card. |
Feature | The image should be relevant and help the user understand what the feature is about. |
Hero banner | Landing page only. An image is mandatory for top-level landing pages. |
Icon block | Landing page only. Select images that help describe the content and provide additional context for the audience. |