Add images and media

Please note: A new post/page editor called Gutenberg was recently introduced. For now, our instructions will include references to both the “Gutenberg” editor and the “Classic” editor.

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.


Make Sure Your Files are Web-Ready

File Quota

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. In general, your video and audio files must be kept smaller than 5MB and images should be smaller than 2-300 KB.

Quota Info: 200MB is available per blog, while each file can be no larger than 5MB.

Optimizing Files

All multimedia file types have 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 making your media unwatchable/unlistenable.

A few 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!
  • 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.
  • Delete any unused images from your blog’s Media manager, to free up the space.

Optimizing Images

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!

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.

Uploading Media Files

If you have an image, an audio file (preferably MP3) or a video file (formatted for web, often in .mov format) that you would like to include in your blog, you will first need to upload it to the server. (Note: you can also upload and link to other items, such as Word and PDF documents).

Please note that WordPress is not a video streaming service, and is therefore not the ideal place to upload your video content. We recommend uploading video content to a streaming service (like Youtube, Vimeo or even Google Drive) first, and then embedding it into your blog post.


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

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


Adding images and media using the “Classic” editor

Embedding an image using the “Classic” editor

These instructions will only be useful if you have activated the “Classic Editor” plugin. Otherwise, please see the instructions related to the default editor, “Gutenberg”.

  1. Make sure you are in the Editor for the post or page you would like to embed an image in.
  2. Just above the main post textbox, you will see Add Media – click the icon.
  3. In the new window that appears, notice that you are in the tab ‘Media Library’, where you can select from the files that have already been uploaded to your site.
    • If you have already uploaded the image to your blog, simply locate and click on the image you wish to embed. Skip to step 5.
    • OR, click the ‘Upload Files’ tab to upload new files from your computer.
  4. To upload a new file:
    • Click the Select Files button. You will be able to locate the file on your computer – select it and click the Open button. Alternatively, you can try dragging and dropping the image file into the dashed box.
    • After it has uploaded, you will see the “attachment details” for that image.
  5. Look at the “attachment details” panel for the selected image; identified by a thumbnail of the image.
    • We recommend entering data for the Title, Alternate Text and Description — the text in these areas can be searched and lead traffic to your blog.
    • More importantly, the Alternate Text is used by screen readers to describe the contents of your image to people who are visually impaired.
    • Captions are optional.
  6. In the “attachment display settings”, you will see Alignment and Size options. Take a look at the options, and choose which is best for you. Which size you choose will depend on the theme you are using, and how much space there is to display your image.
  7. At the bottom of the window, click the blue Insert into Post button. This will place the code for the image in your post. You will be brought back to your blog post. Be careful not to change any of the code that was inserted into the post for the image.
  8. Complete the rest of your blog post (you can add whatever you like above or below the image code), and publish when ready.

Linking to a media file using the “Classic” editor

These instructions will only be useful if you have activated the “Classic Editor” plugin. Otherwise, please see the instructions related to the default editor, “Gutenberg”.

  1. In the left-hand menu, click the Posts heading. If you need to start a new post, click the Add New link. Otherwise, locate the post you want to add media to, and click on the title to edit it.
  2. Just above the main post box, you will see Add Media – click the icon.
  3. In the new window that appears, notice that you are in the tab ‘Media Library’, where you can select from the files that have already been uploaded to your site.
    • If you have already uploaded the image to your blog, simply locate and click on the image you wish to embed. Skip to step 5.
    • OR, click the ‘Upload Files’ tab to upload new files from your computer.
  4. To upload a new file, click the Select Files button. You will be able to locate the file on your computer – select it and click the Open button. Alternatively, you can try dragging and dropping the image file onto the window. After it has uploaded, you will see the “attachment details” for that image.
  5. Look at the “attachment details” panel for the selected file, including fields for adding a Title, a Caption and Description.
  6. Near the bottom of the window, click the Insert into Post button. You will be brought back to your blog post, which will now have a link to the media file. Be careful not to change any of the code that was inserted into the post for the media.
  7. Complete the rest of your blog post (you can add whatever you like above or below the media code), and publish when ready.

Embedding videos using the “Classic” editor

See this page for a list of third-party sites that can be embedded in this way. This list includes some great multimedia sites, like Youtube, Vimeo, Soundcloud, Hulu, Flickr, SlideShare, TED and more!

These instructions will only be useful if you have activated the “Classic Editor” plugin. Otherwise, please see the instructions related to the default editor, “Gutenberg”.

  1. In your web browser, go to the video you want to embed in your blog post.
  2. Copy the URL for the video by highlighting the text in the address bar of your browser, then holding down the Ctrl key on your keyboard and then clicking the C key (CMD+C on a Mac). Alternately, you can go to the menu in your browser and select Edit, then Copy.
  3. Go into your blog, to the edit screen for a post or page in which you would like to embed the video.
  4. Click the ‘Text‘ tab at the top of the box containing your page/post contents. Place your cursor where you would like the video to appear. It will need to be on its own line in the post, so don’t put it next to any other text, images, etc.
  5. Paste the URL you had copied earlier, by holding down the Ctrl key on your keyboard and then clicking the V key (CMD+V on a Mac). Alternately, you can go to the menu in your browser and select Edit, then Paste.
  6. You will not see the video embedded in the edit window – you will need to preview or publish the post/page and view the front-end version of the page.