vic_logo

Media: adding images, files, audio and videos - Vic Gov digital guide

Instructions on how to add media, including adding images, files, audio and videos.

Media includes the following types of files:

  • document / file
  • image
  • audio
  • video or Embedded video

Media is added into the Body content section of the page.

You can add or edit media in 3 ways:

  1. Click Content and then on the Media tab and then on the Add media button.
  2. Alternatively, you can rollover Content and click Add media.
  3. You can also add a media item when you’re editing a page using the WYSIWYG, by clicking the star icon  (Media) and choosing one of the links across the top.

Important

  • Avoid uploading multiple versions of the same media item or document into the Media library.
  • Do a quick search for your media item before starting the upload process.
  • Superseded versions should be deleted at the time you add an updated version. Ideally you'll upload a file with an identical file name and the old one will be overwritten.
  • The filename should be meaningful because it supports findability when a user does a web search. It can be the same as your Document title.
  • Media file names must not contain any spaces. Instead, use hyphens (not underscores) to join words so the file name is as easy to read as possible (eg safe-and-strong-a-victorian-gender-equality-strategy-2016).

Image files - naming and cropping

Naming images

Images should be saved with a descriptive title for the filename. For example a photo of a girl laughing should be titled 'Girl-laughing'.

If the person has a title and position, this should be included in the title e.g. 'Governor-of-Victoria-Hon-Linda-Dessau'.

Use hyphens between words, not spaces or underscores.

For documents, don't use version or date information in the file name.

When it comes to updating a file, you go the the media library, find the document and click edit. You click Remove and then upload your new version.

That is, you open the existing document item and overwrite the old file with your new file with an identical file name (eg supplier-list.xlsx). This way, any links to the document on any page remain up to date and the media library doesn't get clogged with old, superseded files.

Image dimensions

For this CMS, we need to crop and resize our images before uploading them. For tips on how to resize images, contact the Digital team via email: Digital@dpc.vic.gov.au

The following dimensions are required for most images (for example, featured, card promotion or event):

818px wide x 496px high (keep this dimension proportion)

Image placed in body content

  • landscape images: 818px wide x 496px high
  • portrait images up to 400px high

Never stretch them to make them bigger as that will make the images look pixellated and poor quality.

Images must be at least 72dpi.

You’ll mostly be adding images in your Body content using the Basic text content component, i.e. the WYSIWYG.

Inserting a single image

To insert a single image into your body content:

1. Click on the  Media browser icon.

Media icon

2. Browse and select your image from the Library tab if uploading an existing image. 

3. If you’re uploading an image for the first time, click on Add image, then Choose file and browse your computer for your image. 

Image gallery uploading new image

4. Complete the Name field. Make the name of the file meaningful to the image, so it can be easily found using Media search. For example, a photo of a teenage girl laughing should be titled 'Teenage-girl-laughing'. If it’s a photo of a well-known person, you should include their name and position in the title (e.g. Joan-Kirner-former-Premier-of-Victoria).

5. Complete the Alternative text field for your image. This is a description of the image for users who can’t see the image; it’s an important accessibility requirement. If the image is simply decorative, add two double quotes in the alt text field; this tells the screen reader to skip it.

6. License: Please note: you’ll currently only have an option to select Creative Commons Attribution 4.0 on the License drop-down. When more options become available in a future release of the CMS, select Copyright as your image licence type unless you are confident the image can be shared with others.

Click Save and you’ll see the Embed media popup. Click Embed.

A photo gallery is a clickable gallery of photos (i.e. it does not automatically scroll). Each photo needs to be added individually to the Media library and given a caption.

1. You should add all your images first (see instructions above for Inserting a single image).

2. Go to the Structure > Custom block library section and click +Add custom block.

3. Click Image Gallery.

4. Add a Title your gallery.

5. In the Featured images section, add an image.

6. In the Gallery images section, add your images, one by one, clicking the Select images button each time. 

7. Click Save.

8. Navigate to the page that requires the image gallery.

9. In the content components section, choose Image gallery on the dropdown list. Click the Add another component button.

10. Start typing the name you gave to the custom block you created in steps 2 to 7. Existing gallery names will appear. Click on the one you want to use to select it.

11. Save the page.


Inserting documents

Please avoid uploading multiple versions of the same document within the Media library. This will create an administration burden and will cause confusion when searching for the correct version of your document. Do a quick search for your document before starting the upload process. 

As a general rule, we don’t upload documents to the website unless they are intended for printing (e.g. long-term strategic plans, annual reports, posters).

If you need to upload a document, it must be both accessible and findable.

Naming documents

Documents should be saved with the title in the Name field (eg Safe-and-strong-A-Victorian-Gender-Equality-Strategy).

Version numbers should not be used as any new version should be saved over the top of old versions.

If the document is an annual document then the year should be at the end of the document (eg Safe-and-strong-A-Victorian-Gender-Equality-Strategy-2017).

Preparing documents for upload: Creating accessible documents

Word documents and PDFs should have the following attributes applied:

  • Heading styles and formatting
  • Properties applied to data tables
  • Alt text for decorative or informative images
  • Descriptive hyperlinks
  • Tagged contents structure if applicable

Visit our Accessibility - how to guide for more information on creating accessible documents.

Check document metadata

Metadata is information about the document that is used in searches and as a way of identifying owners and content. As a minimum you need to complete the following fields:

  • Document title (all document types)
  • Company (All Word/Excel/PowerPoint docs) or Author (PDF only)
  • In Word, Excel and PowerPoint, go to File > Info > Show all properties to access these fields. 
  • For PDFs you’ll need Adobe Acrobat to edit and add Metadata to PDFs.

The document title should clearly describe your document (for example “Inclusive Language Guide”) as this is also used for the Media name field in the CMS.

Adding a new document to the Media library

The Media browser icon allows you to add document(s) at the bottom of a content page.

It automatically inserts the appropriate icon and file size.

  1. While you're within the Body content of a web page, place your cursor where you'd like your document to appear.
  2. Select the Star icon Media browser.
  3. Click on the Upload tab, then Choose file and browse your computer for your document. 
  4. Use your Document title (from the metadata) in the Name field.
  5. Click Select media.
  6. Chose Display as > Embedded and Align: None.
  7. Click Embed.

Updating an existing document in the Media library

The Media library within the Content tab allows you to locate or update a document being used in one or more places within the site.

  1. Select the Content tab
  2. Search for the title of your document under the Media tab
  3. Once your document has been located, select Edit
  4. Remove the current document by selecting Remove
  5. Once your document has been removed, replace the document with the new version by selecting Choose file. (Note: we prefer version or update information to be in the footer of the document, not its file name. Name your document clearly using hyphens between words.)

Add a document as a download

To add a document at the end of a paragraph or content page:

  1. Select the Media icon
  2. You can choose Add document if your document hasn't been added, or
  3. Search the Library by adding the document title within the Name field and selecting Apply to search for your document.
  4. Once you've found your document, check the box beside the Name field of the document
  5. Then click Select media
Adding a document to a content page. Shows the Media Library and tabs to upload a document or search existing documents

Add the document as a text link

Use this option when you need to reference a document as part of user action or step.

For example, in the step below, users need to complete the 'project template' before they start their online grant application form:

If the war memorial or avenue of honour is situated on local council land, complete the [project template].

While you're editing the content page, open a duplicate of the Drupal CMS in another tab, so you can use the Media library.

You can either:

  1. Add document if your document hasn't been added, or
  2. Search the Library by adding the document title within the Name field and selecting Apply to search for your document.

Once you've found/uploaded the document, click on the title of the document.

Link to a document within the Media library tab

Then left click on the PDF or Word link and select copy link address.

Screenshot of how to copy the URL from an item that's been added to the media library
  1. Head back to the tab where you're editing the Body content and highlight the words [project template].
  2. Select the Link icon.
  3. Paste the copied URL from the Media library.
  4. Click Save.
  5. The phrase will then become an active link to the document.
Using the Linking tool to create a hyperlink to an item within the Media library

Embedding videos

Videos must be added via the asset library only, not by pasting embed code into the page. This allows for metadata to display the embed from Youtube or Vimeo correctly (eg transcript, running time, title).

The filename should be meaningful because it supports findability when a user does a web search. 

Important: the file name must not contain any spaces. Instead, use hyphens (not underscores) to join words so the file name is as easy to read as possible (eg Making-rent-fair).

Accessibility requirements for videos

There are some important requirements for videos to meet accessibility standards. All videos must have closed captions and a transcript.

Transcripts

The transcript must be provided in HTML immediately after the video, and should include:

  • Title
  • Producer of content
  • Text transcript within html format
  • Identify the name of the speaker
  • Ensure all speech content is included
  • Include relevant non-speech audio
  • Include any textual or graphical information shown in the video
  • Indicate the end of the transcript if on the same page as the video
  • Provide link to return to the video if on another page

Closed captions

These are text representation of the sounds on a video, timed with the action on screen.

When adding Closed Captions:

  • use large font
  • use high-contrast colours
  • ensure captions remain on screen long enough to be read
  • can be turned on and off by the user
  • attribute speech to the speaker

Adding a video via URL

The Media browser icon allows you to add videos to a content page. 

Please contact the Digital Engagement team if you want to embed videos using an iFrame.

This automatically inserts the appropriate icon and file size.

  1. Select a place for your video within the Body area of your content page and create an empty line. Place your cursor on this line
  2. Select the Media browser icon  in the WYSIWYG editor 
  3. Select the Embed video tab.
  4. Enter the YouTube URL for your video (eg https://www.youtube.com/watch?v=w_xOWTsLOEA
  5. Name: Add a title for the video. The title shouldn’t contain any spaces (eg small-business-victoria-workshops-get-greener)
  6. Length: enter the video duration (eg 2 mins 30  secs)
  7. Summary: this is a short description of the video.
    (eg Robyn Green from Robyn's Soap House talks about the challenges and rewards of turning a hobby into a business, how she found the information she needed, and some business success tips.)
  8. Transcript: a transcript should include the title, producer of content, text transcript, name of the speaker/s, any non-speech audio, and textual or graphical information shown in the video.
  9. Licence: choose from the dropdown (other options NOT CURRENTLY AVAILABLE).
  10. You can include Restricted details:
    - Audience – for example, Small business owner
    - Department – for example, Business Victoria
    - Topic – for example, Business
  11. URL alias: leave this field blank.
  12. Select Save video once you’ve finished, then Embed
  13. Caption field: leave this field blank.

Reviewed 31 July 2019

Vic Gov digital guide

What's next?

    Was this page helpful?