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:
- Upload the image or file
- Insert the image or file into your content
To upload your image or file, you can:
- Select your Media Manager and upload your image there
- 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.
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).
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
Once 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.
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:
This is a direct link to where the file is stored within your WordPress Site
If a user hovers over an image in your content, he or she will see a tooltip with the image title
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.
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.
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.
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.
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.
- 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.
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:.
- This is a 100px wide version that will adjust the height according to the image’s size.
- This is a 250px wide version that will adjust the height according to the image’s size.
- 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.
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.
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.
Optimizing Images for the Web
To maximize your website’s storage limit, you’ll need to resize large images before uploading them to WordPress.
- Department theme banner images: 940 x 265 pixels (px)
- Department theme internal page images: width less than 800 pixels
- College & Unit theme banner images: 1140 x 325 pixels
- College & Unit theme internal page images: width less than 800 pixels
Resizing images can be done easily without special software. See the instructions below for your operating system or within WordPress. You can also use software like Adobe Photoshop to optimize images for your website – use their predefined settings to save images for use on the web.
- Navigate to the image you want to resize. Right click the image and open with “Photos”
- Right click the image in the Photos application. Select “Resize”
- Select “Define custom dimensions”
- In the “Width:” area, input a value less than 800 or if resizing a banner image consult the sizes above.
- Make sure “Maintain aspect ratio” is checked. A quality of 80% should be good, if you want the file size to go down a bit more (take up less space) you can reduce the quality but be careful of going too far.
- Click “Save revised copy” and save the image. Upload to WordPress.
- Navigate to the image on your computer, right click and select “Edit” to open the Paint editor.
- In Paint, click “Resize” in the top toolbar and an options panel will appear.
- Select the radio button to resize by “Pixels” and then enter a new value (less than 800) for “Horizontal.” You will see the Vertical value will automatically be calculated to maintain the aspect ratio.”
- Click the “Ok” button to apply the changes.
- Save the resized image and upload to WordPress.
- Navigate to the image you want to resize. Right click the image and open with “Preview”
- Go to “Tools” at the top of the screen. Select “Adjust Size…”
- On the pop up that appears over your image, next to the lock icon, make sure the dropdown is set to “pixels” (it is probably set to inches when you first look at it.)
- In the “Width:” area, input a value less than 800 or if resizing a banner image consult the sizes above.
- Make sure the “Resolution:” is set to 72 pixels/inch and make sure “Scale proportionally” is checked then click ok.
- Go to “File” and click “Save” if you want to save over the original image. Go to “File” and click “Duplicate” to create a copy of the original file then click “Save” to save the file and rename if you wish.
- Upload to WordPress.
Inside WordPress Media Library
- Click “Media” in the left sidebar. Upload the image you want to resize. (if the image is larger than 2mb you will have to resize the photo outside of WordPress)
- Click on the image you want to resize. (if you are resizing an image already uploaded, it is recommended that you download the image and re-upload it so that you do not edit the existing image that may already be on other pages)
- On the popup, click on “Edit Image” under the image.
- On the right side you will see a column that shows the current dimensions. Under “New dimensions:” change the left number (the width) to be less than 800 or if resizing a banner image consult the sizes above.
Last updated: 3/29/2019