WiscWeb - Using Media Library to add images or documents
In this document:
Purpose
The Media Library serves as the central file storage location for a WordPress site where images and documents can be uploaded to and then made available for either viewing or downloading by site visitors.
Requirements
There are several key pieces of information to be aware of as you are using the Media Library:
- The maximum file size for uploading items to your WiscWeb media library is 24MB. If you need to upload a larger file, consider using the Box service.
- The following file types are allowed in the Media Library: dxf, stl, vsd, dotx, csv, jpg, jpeg, png, gif, mov, avi, mpg, 3gp, 3g2, midi, mid, pdf, doc, ppt, odt, pptx, docx, pps, ppsx, xls, xlsx, key, mp3, ogg, wma, m4a, wav, mp4, m4v, webm, ogv, wmv, flv, rtf, tif
- File types are limited to increase security and accessibility of the files to audiences. Again, if you need to make certain file types available that are not allowed, consider using the Box service.
- Files should follow recommended naming conventions. You can read more about this at WiscWeb - Recommended file naming conventions for media.
Uploading to the Media Library
Begin by clicking on the Media option in the left menu. Your full media library will appear. If you have images in the library, they will appear here.
- Click the Add New button.
- You can search for the items to upload by clicking on the Select Files button, otherwise you can drag items onto the screen to upload items automatically.
- Your images will appear on the screen. You can change your view between List or Grid with the toggles in the upper left corner of the library.
You can also filter the items that you see by clicking in the two pull down menus - the first to view by type, the second to view by upload date. You can also individually select items by clicking the Bulk Select button.
Working In Grid View
Within this view, you have a visual representation of the items in your library through thumbnails; documents that are within your library will display with their file name in the thumbnail.
Individually clicking on an item will select it, and open that image or document's informational window.
Here are some of the key items to note within the Attachment Details screen for an image:
- File name: Provides you with the file name of the item you selected.
- Dimensions: The width and height of the image.
- Title: The name of the item that you uploaded. This value will be shown in some instances when it is placed on a page or within a post.
- Caption: This provides your information about the image. A caption will be displayed when an imaged is placed on a page or post, but can be edited or removed when it is placed.
- Alt Text: The alt text for an image is a value that is placed within the code and does provide another location to describe what it is. However, an important use of alt text is for making items on your page accessible. Visit the Policy website to learn more about UW-Madison's accessibility policy. Visit the it.wisc.edu website to learn more about how to write alt text.
- Description: Further information about this particular item.
Working in list view
Within this view, your media library items are listed within a table with other pieces of information.
Here are some of the key items to note within the List View. Note that you can sort the columns of this table by clicking on the linked headers:
- Checkbox: Select this item to do any bulk actions on.
- File (thumbnail list): Provides a preview of the image in a thumbnail image. Next to this is the file name linked which would take you to the edit screen.
- Uploaded to: This will tell you what Post or Page the item that this item is contained on.
Additionally, list view offers the two options detailed below:
File size in list view
In June of 2023, WiscWeb added the option to see a "file size" column within your Media Library list view.
The purpose of showing this content is so that you can see how large your images/files are and determine you want to downsize/adjust. Really large images can impact page speed/performance so it is recommended that you review these sizes and scale down when needed.
It is important to note two caveats with this column view:
- WordPress only started tracking file size for uploads in meta data in May 2022. Therefore, you will only be able to see file sizes for images posted on or after that time. If your image or file was uploaded before May 2022, this column will be blank.
- Unfortunately, this column is not sortable. Due to the nature of how this data is stored, this would be a very resource intensive query. WiscWeb has opted not to include this at this time as there could be performance impacts on the service.
Alt text in list view
In June of 2023, WiscWeb added the option to see a "alt text" column within your Media Library list view.
The purpose of showing this content is so that users can clearly see 1.) if alt text appears for a certain image and 2.) if it makes sense for that content. If no alt text appears, it is highly recommended that you add it in: WiscWeb - Using Alternative (Alt) Text Also, consider revising the alt text if it isn't a good representation of what the image is.
It is important to note one caveat with this column view:
- Alt text only pertains to images. You will see a blank spot next to other files (like PDFs).
Placing images
Images can be placed on pages or within posts using a variety of page elements (such as the Image Carousel or Featured Content Block), or by simply clicking the Add Media button within a Text Block.
Linking to documents
The Add Media button can also be used to create a direct link to a document within your Media Library.
- Place your cursor where you want the link to be inserted, and click Add Media.
- Locate the document that you want to link to.
- Be aware that by default, the Title of the document that you uploaded will be used as the linked text.
- Click on the document and then click Insert into page.
- The link will appear, with the text again being set to the Title of the document. To change this linked text:
- Click on the link
- Click on the edit icon (pencil)
- Click on the Link options icon (gear)
- Update the Link Text field
- Click Update