WordPress
Training & Support at Georgia Southern

Images and Other Files in WordPress

Adding images and other files is very easy in WordPress. Once you upload these images and files into your Media Library, it’s a simple process to insert them into a Page, News Post or Content Block. For other files such as Word documents or PDFs, it will be necessary to create a link to that file within your content so that your viewers can see and download them (if necessary).

In order to upload a file to the Media Library, it will need be smaller than 2 MB. If your image is too large than you will need to either scale the image down and/or compress the image. You can read more about Optimizing Images on our Graphic and Images page. If you have a document or PDF that is too large you may want to host that file on Google Drive. You can find information on Embedding Google Documents (Sheets, Docs, Slides, etc.) (tutorial on WordPress.com) or Publishing Files with Google Drive.

Currently you can upload only these file types to a University WordPress site: jpg, png, gif, pdf, doc, docx, xls, xlsx, ppt and pptx.

NOTE: To use a video in your content see our Posting Videos guide.

Uploading an Image or File

In order to place an image or file into your content there are two steps:

  1. Upload the image or file
  2. Insert the image or file into your content

To upload your image or file, you can:

  1. Select your Media Manager and upload your image there
  2. Use the Add Media button while creating a Page or News Post

NOTE: WordPress does not overwrite files, meaning that if you need to adjust the image (outside of WordPress’ options) it is best to delete the image and then upload it after you make the necessary adjustments. Otherwise, you could end up with several copies of the same image.

Upload Using the Media Manager

To upload using your Media Manager, click the Media link under the Dashboard Menu.

On the Media Library screen, you will need to select Add New which is located next to Media Library. This will cause a box with a grey dotted borders to appear. To upload your image or file, you can either drag and drop the image or file onto this screen from your Finder or File Explorer, or use the Select Files button to open a window that will allow you to browse your computer and find the image or file.

Your uploaded image or file will then display in the first position on the list or grid view below the options bar.

Upload Using the Add Media Button

Using the Add Media button is useful if you find that you need to add a file or image while you are currently working on a Page, News Post or Content Block. Simply click the Add Media button below the title field in order to begin.

Add-Media

The Insert Media window will show you images already uploaded to your site, and will allow you to upload a new image or file. The Insert Media screen defaults to the Media Library tab (located at the top).

Insert Media

To upload an image, select the Upload Files tab. From there, you can either drag and drop your image or file into the window or use the Select Files button to browse for for files on your computer.

Inserting an Image

Attachment detailsOnce your files are in the Media Library and you have opened the Add Media screen, you will need to select the image, file or multiple images you want to insert into your Page, News Post or Content Block. As you select your files or images, WordPress will will place a blue border with a blue box in the top right corner with a white checkmark on your selection.

Once an image has been selected, you will see the Attachment Details and Attachment Display Settings options.

Attachment Details

The Attachment Details display a preview of your image with details such as name, upload date, file size, image dimensions and options to Edit Image and Delete Permanently.

NOTE: Unlike Pages and News Posts, an image or file in the Media Library is completely removed from your WordPress site when deleted. If you have multiple users working on your site, it is important to have a backup of your images and files on a departmental Google Drive or a shared drive.

The fields that make up your image properties are as follows:

URL
This is a direct link to where the file is stored within your WordPress Site

Title
If a user hovers over an image in your content, he or she will see a tooltip with the image title

Caption
In the Georgia Southern themes, captions display as italicized, centered text under the image with a light grey border around both the image and caption.

Alt Text
The “alternate” text displays when the browser cannot render the image, and is also used as descriptive text for screen readers. These descriptions are very important for website accessibility.

Description
If used, this text is displayed on the attachment page.

Attachment Display Settings

The Attachment Display settings are the last four fields located at the bottom right of the selected image screen.

Alignment

This allows your to select whether you want your image to align left, center, right or none. You can select the alignment by using the dropdown list.

Link To

This allows you to change the way your image is linked within your content. Your options are:

  • Media File
    • This will allow you to link the full size image.
  • Attachment Page
    • This is a page generated by WordPress in which the image is embedded. If the image is clicked on from the Attachment Page it will load the full size image.
  • Custom URL
    • Allows you to link to any URL. This is helpful if you need to link an image to a page outside of your site or to another page within your site.
  • None
    • This option removed the link from your image.. This is highly recommended as the default option for images on our WordPress sites unless you specifically need to use an image (such as a button or banner) to direct users to another page.

Size

Once you upload your image, WordPress will automatically create several sizes for you to choose from. The size dropdown list gives you the following options:.

  • Thumbnail
    • This is a 100px wide version that will adjust the height according to the image’s size.
  • Medium
    • This is a 250px wide version that will adjust the height according to the image’s size.
  • Large
    • This is a 550px wide version that will adjust the height according to the image’s size
  • Full Size
    • This will place in the image at the size that the image was originally uploaded.

Inserting Your Image

Now that you’ve selected all of your images properties, details and settings, your final step will be to click the Insert Into Page button at the bottom right. Your image will then be placed into your content.

Image Editing

Once you have placed the image into your content, you have a few options to edit it.

Selecting the image will bring up a small bar that has several options: align left, center, right and none along with edit (denoted by a pencil icon) and remove. Clicking on the edit option will bring up a window called Image Details. Here you will see many of the same settings that you edited when you first placed in your image.

Two new options of note are the Size and Edit Original.

Under the Size heading you have a new option called Custom Size. This will bring up two text fields, one for width and one for height. You can enter a number of pixels in either field and WordPress will adjust the other field to maintain the image’s aspect ratio. Be aware that if you try to scale up a photo (use a larger size then the image was uploaded with) the image may become blurry or pixelated.

Edit Original allows you to edit the uploaded file, as well as crop, rotate, flip and scale  the image. Using these options will update the uploaded file. If you find that your changes do not work with the photo you will need to delete the image and reupload the original image.

Inserting a Document

The process for inserting a document file (Word documents, PDFs and the like) is only slightly different from image file. Once you have uploaded your document file using either the Media Library or the Add Media button, you will need to link to that file in order for users to see it. Word documents and PDFs do not directly display inside your content. (If you want to embed the document into the page you can use our Embedding Google Documents (Sheets, Docs, Slides, etc.), tutorial on WordPress.com, guide to accomplish that.)

To link to a document file, use the Add Media button then select the file in the Media Library. You will see many of the same options offered for images. The biggest difference is that you have two ways of linking to the file, either directly to the Media File or to an Attachment Page. It is highly recommended that you use the Media File option. This will allow users to click on the link and download the file or display it in a new tab.

Select your choice and click the Insert Into Page at the bottom right. This will place in a link with the file name as your link text. To edit the link, click on it to display a small grey box with the option to edit or remove the link.. Click on the pencil/edit icon to edit the Link Text. Also be sure to check the Open Link in New Window/Tab. This will open the file in a new window when a viewer clicks on it.

If you want to link an image to a file, you will need to update your image’s Link To properties and select Custom URL. Paste the URL of your document file into the Custom URL field of the Image Details screen.

Managing your Media Library

Because there is a storage limit on the amount of images and files that can be uploaded to WordPress, it is important that you manage your Media Library.

Media library

The Media Library has several of the same options that the Pages and News Posts screens do. You can sort by type of file. You can also filter by the update time. Searching is also great option if you are trying to find a specific file.

Selecting an image in the Media Library will bring up a preview of the image along with several Attachment Details. It includes all the details that are shown while uploading or editing your image along with who the image was Uploaded By and what Page or News Post the image was Uploaded To. This information can be helpful in finding media that might be attached to old content that it can be removed.

We highly recommend going through and auditing your Media Library every few months. This will help you to stay within your storage space limit and ensure that only actively used images and files are being stored within your site.

NOTE: We do not host audio or video files on WordPress. If you want to use either audio or video for your site see our Posting Videos guide.

Last updated: 5/24/2016

WordPress Training & Support • Georgia Southern University