singledigitalpresence.vic.gov.au

Media: adding images, documents, videos and podcasts

Instructions on how to add media, including adding images, documents, videos and podcasts.

Images

  • Naming images

    Images should be saved with a descriptive title for the file name. Examples 'Girl-laughing', 'Governor of Victoria the Hon Linda Dessau.'

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

    When it comes to updating a file:

    • go the the media library
    • find the document and click edit
    • click Remove
    • 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 Practitioner with client at The Orange Door.jpg). 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

    Ensure your images are in JPG format. Images in PNG format can slow down the page-load speed for users.

    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.

  • 1. Click on the  Media browser 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 for users who can’t see the image. It’s an important accessibility requirement. What you write depends on the context of the page and the typical users.

    Only if the image is simply decorative can you leave the alt text field blank - in the code there will be two double quotes, which tells the screen reader to skip it.

    6. License: You'll need to apply one of the following license types using the drop-down:

    • Creative Commons Attribution 4.0 means the image can be shared or adapted. See the International licence page for more information.
    • Copyright means that the image is protected and cannot be used without permission. Use Copyright if you're not confident the image can be shared with others.

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

  • An image gallery is like a carousel with photos. The user clicks the arrows to proceed forward and backward to view all the images. (It does not automatically scroll.) Each photo needs to be added individually to the Media library and given a caption.

    First you need to upload all the images and create the gallery. See the instructions for creating an image gallery.

    Then you go to the page where you want to insert the gallery. 

    1. Navigate to the page where you want to insert the image gallery.
    2. Click on the content components dropdown and choose Image gallery.
    3. Click the Add another component button.
    4. Start typing the title of the custom block you created. Existing gallery names will appear. Click on the one you want to use to select it.
    5. Save the page.
  • You can override the website's default social media tile by adding a custom image to the Featured image field of a Landing page.

    How to customise a social media thumbnail

    1. Resize your image to 496 pixles high x 818 wide (JPG format).
    2. Navigate to the page that you'd like the custom image to appear from.
    3. Select the Feature image component drop-down.
    4. Click Select images.
    5. Upload your image and add alternative text (if the image has information that's relevant to someone using assistive technology). Add double quotation marks ("") if the image is decorative.
    6. Save your page.
    7. Change the state of your page from Draft to Needs Review.
    8. The content team will publish your page.
    9. Once the page is live, the social media thumbnail should appear as the custom image.

    Uploading your custom image - example

    To add a custom social media tile, select Feature image, then Select image to upload your custom tile.

    Custom image on social media - example

    Example custom image on social media

Documents

  • DON'T upload multiple versions of the same document to the Media library. This creates confusion when searching for the correct version of your document because we can't see in the media library which documents are in use or where. Search the media library 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). What you put in the Name field displays on screen.

    Version numbers should not be used as any versions replace 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).

    Creating accessible documents

    Word documents and PDFs should have the following attributes applied:

    • Heading styles and formatting
    • Properties applied to data tables (indicating which row is the header row)
    • Alt text for informative images
    • Descriptive hyperlinks (not 'Click here')
    • A tagged table of contents, 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.

    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

  • 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.
  • 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
  • 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. Click the Content button (top left)
    2. Click on the Media tab
    3. Search for your document using the Media name field and other filters
    4. When you've found your document, click Edit
    5. Remove the current document by selecting Remove. This will remove the document from the CMS and will also delete the document from search engines.
    6. Replace the old document with the new version by selecting Choose file. (Name your document clearly using hyphens between words, eg "DPC-organisation-chart.PDF".)

    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

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). 

    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
    • ensure captions can be turned on and off by the user
    • attribute speech to the speaker

    Adding a video via URL

    You add an embedded video to a content page via the Media browser icon.

    Note: do not upload videos into the CMS via the Video option; you must choose the Embedded video option.

    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.
    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.
    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. On the popup screen, click the Display as dropdown and select Embedded with transcript. If you don't select this, the eye icon and read transcript link won't appear below the video.
    14. Caption field: leave this field blank.
    15. Click the Embed button.

Audio (podcasts)

  • We can embed podcasts as long as the podcast provider has been added to our security list.

    We currently have the following sites enabled:

    • Libsyn
    • Soundcloud
    • Acast

    If you want to embed podcasts from another provider, you'll need to log a service desk ticket with the URL, asking to add it to the CSP list.

    To embed a podcast, go to the original location. Here's a screenshot of one of the Shrine of Remembrance's podcasts on Libsyn. 

    Look for the 'code' symbol (highlighted in yellow above) and click on it. You'll see some code like this:

    This code contains information about how to display the podcast. Our CMS overrides some of the style instructions, including border and width.

    We do need to note the height instruction - in this example it's "90".

    Copy the bit after "src=". (You may have to copy the entire bit of code, paste it into Word or Notepad and then you can copy just the bit you want.) Copy the part after "src=" starting and ending with double quotation marks.

    Now go to the page where you want to embed the podcast. You need to have the cursor in a body text or accordion section.

    Click the world icon (right next to the Media button) and you'll see a popup.

    Paste the code into the URL field and type 90 (for example) into the height field.

    Click OK and save the page.

    Here's what this Shrine podcast looks like on a published page:

Reviewed 21 December 2020

Vic Gov digital guide

What's next?

    Was this page helpful?