Images and Media

Images and Media

Best Practices for Media Files

  • Use the recommended image sizes for slider, hero, page/post header, and content images.
  • To comply with UF accessibility requirements, always use alt text on images.
  • To reduce page loading times, resize images to match the size you need, rather than using images with very large dimensions. You can resize in an image editor such as Photoshop or Pixlr (free) before uploading, or scale your images in WordPress.
  • Optimize your images before uploading. TinyPNG significantly reduces the file size of png and jpg images without compromising quality.

Media Library

In the Media Library, you can add images, PDFs, and other files. Access the Media Library by choosing Media from the navigation menu in the WordPress dashboard.

Allowed File Types

The Media Library allows jpg, jpeg, png, gif, eps, svg, pdf, doc, docx, ppt, pptx, xls, xlsx, and ics files.


To conserve space, video uploads are not allowed on HWCOE-hosted sites. We recommend you upload your video to a sharing site such as YouTube or Vimeo, then embed the video in your page or post using the Share link provided by those platforms. WordPress will automatically embed videos when you copy and paste the link into the edit window.

If your unit does not have a YouTube account and your video is relevant to the college, contact us to request that it be uploaded to the Gator Engineering YouTube account.

Embeds From Other Sites

WordPress supports automatic embeds from a wide variety of social media and other platforms.

Add Files

There are multiple options to upload new media files:

  1. From the dashboard, choose Media > Add New
  2. (Classic editor) From within the edit window of a page or post, choose the Add Media button, then choose the Upload Files tab
  3. (Block editor) Add an Image block or File block, then select Upload

If you upload a media file while editing a page or post, the file will be attached to that page or post. You can detach it from its listing in the Media Library.

Screenshot of link to detach media from page or post

To add an already uploaded media file to a post or page, choose the Add Media button (classic editor) or add an Image or File block and select Media Library. Choose Edit to edit the file details, then enter alt text, a caption if desired, and select the alignment and image size. Then choose Insert Into Page (be sure to update the page).

Screenshot of Attachment Details settings

Edit Files

WordPress allows you to rotate, flip, crop, and scale images.

In the Media Library, mouse over the image you wish to edit and choose Edit, then Edit Image.

To flip or rotate, simply select one of the Rotate or Flip buttons.

Screenshot of Flip and Rotate Image buttons

To crop, select Crop, drag the handles to where you want them, and select Crop again.

Screenshot of Image Crop interface

To scale, enter a new width or height in the text fields under Scale Image. The opposite dimension from the one you change (width or height) will automatically change to preserve the aspect ratio of the image.

Screenshot of image scaling interface

When you’re finished editing your image, select whether the changes should apply to all image sizes, only thumbnails (the images that appear in archive listings), or all sizes except thumbnail. Be sure to select Update to save your changes!

Screenshot of image thumbnail settings

Replace Existing Files

If you want to replace an image or file, rather than uploading a completely new version you can replace the old one. (Note: this is enabled by a plugin, which you will need to install if you are running your own instance of WordPress.) Replacing media will keep existing image links intact without you having to fix them.

In the Media Library, mouse over the file you wish to replace and choose Replace Media.

Screenshot of link to replace media item

You will then be prompted to upload the new file, and choose whether you wish to keep the same file name and date or replace them. Set these options and upload, and all references to the original image will be updated with the new image.

Screenshot of replace media upload screen