Add images and media

Please note: The block editor (“Gutenberg”) was introduced more than 2 years ago, and as such the previous “Classic” editor is being phased out. Our documentation will no longer include instructions for its use.

For more information, please see Announcing a new way of authoring posts: Gutenberg.

These days, it’s very common to see blogs that are full of images, as well as audio and video content. Adding this content to can be easy. Please see the options below for including various media into your blog posts and pages. The instructions below refer to ‘post’, but the same instructions can be used to add images to a page.


Available space on your blog (File Quota)

In general, your images should be smaller than 200 KB and we recommend hosting video content on a streaming server, like Google Drive or Youtube.

  • Total file space available per blog: 200MB
  • Each file can be no larger than 2MB.

What should I upload to the blog?

The media section of the blog is really intended to host images that have been properly formatted for the web. Larger files, like audio and video, should not be stored in the blog, as you will quickly run out of space on your blog.

It is possible to upload documents to the blog – but not ideal. Blog posts should really contain the content you are presenting – text, images, media. Linking to static documents, like PDFs, takes your visitor away from your site. These files will also take up precious file space.

Each blog has a limited amount of filespace. The space provided is sufficient for hundreds, if not thousands, of images as long as they are properly optimized for web delivery. Video and audio files are much larger, so you need to take this into consideration when setting up your blog. It is your responsibility to work within the quota, and optimize your files for web delivery.

Copyright

Did you create all aspects of the file you are posting? If not – meaning, if any part of your file was made by someone else – you need to ensure you have copyright authorization to post the image.

If you are permitted to post the image, you must properly cite it. There are many sources online that can help you properly cite images.

This can be really tricky, but Google image search has now made it a bit easier for you to find images that you are legally allowed to post. Read the details on this article.

For more information about copyright, please see this page on the RULA website.


Linking vs. Embedding

There is a difference between linking and embedding. Embedding an item will display it right in the blog post. This is possible with images, and certain media files – but not all file types. Linking just provides a link to the file, which visitors can use to download the file or open in another browser window (where applicable).

Embedding an image

Optimizing Images

Only upload file formats that are appropriate for the web. It is important to determine the best settings that will give you the smallest possible file for web delivery, without degrading the image too much.

Since this is such an important topic, it has its own document. Please be sure to read through it, if you are looking to add images to your blog!

A few quick tips:

  • Resize/crop your images to fit the dimensions of your blog before uploading them! Many people upload large files and then resize them online, which means that a large file is being loaded every time someone goes to your page! For most blogs, a maximum of 1000 x 1000 is sufficient (since the post will likely not display images larger than that anyway).
  • Take advantage of presets in your software to export to the appropriate web formats. Most software has this built in.
  • Be realistic. The web is not the place for high-resolution images or video. If you need to include these in your blog post, consider uploading them to Google Drive first, then embedding them in the post.
  • Delete any unused images from your blog’s Media manager, to free up the space. Be careful not to upload duplicates of the same image!
Steps to add an image block
Add the ‘image’ block to the post or page.
  1. Click the plus symbol (+) in the upper-left corner of the editing window.
  2. From here, you will be presented with a number of options – the simplest thing to do is start typing the word ‘image’ into the search field. WordPress will show you any blocks that it thinks you may be interested in.
  3. Locate the ‘image’ block and click on it. This will place the new image block at the bottom of your document.
Steps to add your image to the image block
Add your image, then arrange as you like.
  1. If you have already uploaded the image to the blog, click “Media Library”, and select the image from the collection. If you need to upload the image from your computer, click the “Upload” button and follow the on-screen prompts to upload the image.
  2. When the image block is selected, you can choose to align the image centre, left or right.
  3. When the image block is selected, use the arrow icons on the left side to move the block up or down the page.

IMPORTANT!!! ADD ‘ALT’ TEXT
Immediately after uploading an image, look to the right-hand sidebar to add some important details. ‘Alt’ text describes the image for visitors with limited vision – this text is read to them using assistive devices.

Steps to customize an image block
  1. When the image block is selected, click the icon in the top-left corner of the block for some additional style options.
  2. Choose to display the image in the default (rectangular) shape, or in a rounded shape.
  3. If you change your mind about the type of block you want to use to display this image, you can transform it to another image-related block type by clicking the block type at the bottom of the pop-up.

Embedding from GSuite (Google videos, slides, etc.)

Did you know?
You can embed many kinds of documents from GSuite. This includes videos uploaded to Google Drive, Google slides, and more! This makes it easy to add interesting content to your blog post.

This section is in-progress… but here are a couple of examples you can look at in the meantime:

Embedding Videos from Sites Like Youtube and Vimeo

WordPress can easily embed videos from some popular video streaming services, like Youtube and Vimeo (among others). To try this, make sure you have the URL (web address) for the video you wish to embed, and follow the steps below.

Steps to find and add a video block
Find an appropriate video block
  1. Click the plus symbol (+) in the upper-left corner of the editing window.
  2. From here, you will be presented with a number of options – the simplest thing to do is start typing the word ‘video’ into the search field. WordPress will show you any blocks that it thinks you may be interested in.
  3. Look through the available block options in the ‘Embeds’ section. If one of these matches the site that you are embedding from (like Youtube), select it and follow the on-screen instructions to paste the video URL (address).
  4. Otherwise, select the ‘video’ block. This will allow you to add a URL to a number of embeddable sites.

Note:
If you are trying to embed a video that is hosted on a site that WordPress cannot embed simply using a URL, it is possible you won’t be able to embed it in your blog. For security reasons, it isn’t always possible to use “embed code” offered by some websites.

Linking to a media file

If you have found a video hosted on another website that you would like to share on your blog, but are unable to embed the video into your blog, the next option is to provide a link to the video.

All you need to do is paste the URL (web address) into a “paragraph” block. WordPress will automatically understand that this is a link, and will convert it so that it appears as a link should (possibly in a different colour from the rest of the text, and with an underline). Once this has happened, you can change the text that displays so that it includes the title of the video, instead of an unattractive URL.