Adding Images and Multimedia

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

  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

  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 from Sites Like Youtube and Vimeo

Did you know?

Videos from some of the more popular video sites, like Youtube, can be embedded simply by pasting their URL into the Text edit screen of your blog post or page? Try this first – if this doesn’t work, you can try to paste the embed code instead of the URL.

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!

  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.