Add Media/Media Library

The “Add Media” button is used to add files to your page whether they are documents or images.

Click to enlarge.

We use the WP Media Folder plugin to organize our media. This offers powerful search features and the ability to sort your media into folders.

NOTE: Please refrain from uploading videos to the Media Library, instead, use a service such as Youtube or Vimeo. There are built in elements that support these services. There is an upload limit of 8MB.

One the left is a tree view, you can also click on any folder to drill down into sub folders. Along the top you will find sort options, search tools, the ability to create new folders, and a checkbox to view only media you’ve uploaded.

NOTE: If a folder does not exist for your department, please create it.

NOTE: Please do not use the Gallery functions. They are not working properly and can damage the site.

NOTE: Near the top left there is an upload tab next to Media Library .  

This will upload files to the current folder. If you have not navigated to your department’s folder first, you will be uploading outside of the folder structure.

Uploading Media

  1. Navigate to the folder you’d like to upload your files to, either your department folder, or a subfolder of your departments folder. r
  2. Click the “Upload File” tab in the upper left , or on the “Media Library” tab, drag the files from a Windows Explorer window into the folder. When you hover over the area with the file, the screen will turn blue and instruct you to drop your files to upload (see right).
  3. Once your file is uploaded, select it to view the attachment details.

Click to enlarge.

Click to enlarge.

Attachment Details

In the top right you’ll see basic information on the file(Filename, date uploaded, file size, and image size). Beneath that you are provided with two options:

Edit Image: This will open a basic image editor that will allow you to scale, rotate, crop, and flip an image.

Delete Permanently: This option will delete the file permanently.

In the second section, there are insertion options as well as meta data to help find the image later.

URL: This is the URL to the image. There are some feature that will require you to enter this.  

Title: In the case of documents, this is the link text that will show.

Caption: This caption will be added beneath an image on your webpage.

Alt Text: In the event that someone can not see the image, or is using a screen reader, the alt text will pre presented instead. It should be descriptive and capture the nature of the image. Please be sure to add this to ensure our site remains accessible to all audiences. If the image serves no purpose other than decoration, check the decorative box further down.

NOTE: If neither is added, your image will post with an additional image as a reminder(see: right).

Description: If a visitor goes to the attachment page for the image, as shown in the URL field, they will see the description beneath the image. You might include it to name the subject of the image, or the event where it was taken. It can also make your images easier to find when using the search box.

Folder Cover: Checking this box makes this image the picture featured on the folder in the media library. It may help to locate your files.

Link to & Link Target: These options are currently not functioning, do not use.

Decorative: Check this box if the image is only decorative, this is an alternative to alt text.

Click to enlarge.

Using Media in Your Page

Images

To add an image to your page:

  1. place the cursor as close to where you’d like it as possible, and click . You will be taken to the Media Library.
  2. Navigate to the desired folder, And either upload or select the image you wish to add.
  3. Review the attachment details on the right and ensure that the image has either alt text or is marked as decorative as described in the upload instructions.
  4. Scrolling down to the bottom of the attachment details, set the attachment display settings.
    • Alignment: The position of the image. This can be adjusted later.
    • Link To: You can have the image link to other pages. Selecting one will open fields to define the target. The options are:
      • Media File
      • Attachment Page
      • Custom URL
    • Size: Choose a size for your image. There are several default sizes to choose from, as WordPress automatically re-sizes images when they are uploaded. This can be adjusted later.
  1. After you’ve set your options, click  at the bottom right. The image will now appear in the editor.
  • Clicking the image will reveal a white box at each of the corners of the image. Clicking and dragging on these will resize the image.
  • Hovering over the image will reveal the image toolbar 

    • This bar contains alignment options (denoted by the first 4 icons above), the editor (denoted by the pencil icon), and an option to remove the image (denoted by the “x” icon).
      • Aligning the image will wrap the text around it as pictured in the icons.
  • You may also click and drag the image to reposition it in the document.
    • As you drag, the image will be semi-transparent. Pay close attention to the cursor beneath, that is where the image will be placed.

Documents

  1. Place the cursor where you want the document link to appear and click  .
  2. Navigate to the desired folder.
  3. Either upload or select the document you wish to add.

NOTE: The attachment details are similar to inserting images, however, pay special attention to the title field. The title field is the link text that will appear in your page, and link to the document.

NOTE: If the document is a PDF you will have an additional option, PDF Embed. If this is turned on, the PDF will display on the page rather than have a link to it.

4.  When you are finished defining the attachment details, click .

Previous
Next