Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

This guide covers how to embed an image within the basic content component.

Info

If your image is a graph, flowchart, map or includes a lengthy alternative text

...

description, use the complex image component

...

.

How to name your files

Our CMS contains thousands of image files, so it's important to name your file well so that you and your colleagues can find and reuse them.

There are 2 different naming conventions to keep in mind:

  • The filename of the image (what it is saved as on your computer, e.g. very-important-image.jpg)

  • The media item name you give the image when you upload it to the CMS media library (e.g. Shrine profiles John Lui).

Filename

Your filename should:

...

be descriptive

...

contain no spaces

...

use hyphens (not underscores) to separate the words and make the filename as easy to read as possible

...

Resize your image and save it to your computer

Check your image is the correct size and format: image dimensions and formats.

Save the image to your computer using the following naming conventions and filename format:

  • descriptive title

  • no spaces

  • not a generic file name like IMG_001.jpg.

...

  • hyphens between each word, for example, an image of

...

  • the Bendigo talking tram should be saved as

...

  • bendigo-tramways-talking-tram.jpg

...

  • before uploading to the

...

  • media library.

Give your image a useful name so it can be found in the media library

Our CMS contains thousands of images, so it's important to name your file so that you and your colleagues can find and reuse them.

Media item name

The name you give your image when you upload it to the CMS's Media Library must:

  • use spaces between words (not hyphens or underscores)

  • be meaningful and descriptive enough that you can search for it when required

  • if the image is of a specific person, include their name and position.

For example:

  • Hon Linda Dessau, Governor of Victoria

  • Alana Johnson, member of the Ministerial Council on Women's Equality

Example

...

In the above example, the image's filename is "girl-laughing.jpg" so the name you would give it for the Media Library media library is "Girl laughing"

Keep in mind that what you put in the Name field doesn't appear unless it is part of an Image gallery component.

If you're uploading several images that belong together, such as members of a council or honour roll inductees, it's a good idea to put this consistently in the image names, for easier searching. For example: "Stella Young – 2017 Women's Honour Roll". 

How to upload and embed images

Resize your image so it’s in best format for your page. Then save the image to your computer.

In the Basic text component, select the Media icon in the formatting ribbon. 

...

Here you can either:

Search for an existing image in the Library tab

...

using the Name, Media type or Site filters.

...

Upload an new image by selecting Add image, then Choose file. You’ll then be prompted to browse your computer for your image. 

...

Name

Complete the Name field. Make the name of the file meaningful to the image, so it can be easily found when searching the Media library. If it’s a photo of a well-known person, you should include their name and position in the image title. Refer to the section about naming images for more tips, but as a general rule:

...

  • Sensory images: if the image is intended to create a sensory experience – for example, an image of an artwork.

  • Decorative images: if the image is pure decoration, used for visual purposes only. For these types of images, you can leave the alt text field blank. In the page's code there will be two double quotes, which tells the screen reader to skip it. 

...

Find more information image types and accessibility requirements: Using images in website content

Title

The Title is used as a tool tip when the user hovers the mouse over the image.

...