The WordPress Media Library allows you to easily upload, crop, re-size, edit, remove, and rearrange all your media. The Media Library is not limited to just images, below is a list of accepted media that you are allowed to upload.
Accepted Filetypes
| Images | Audio | Documents | Video |
|---|---|---|---|
|
|
|
|
To view your Media Library you will first need to edit a post or page. Above the big textbox (Main Editor) you will see a button labeled Add Media. A window will pop up that has two tabs: ‘Upload Files’ and ‘Media Library’. On the right you have the options to ‘Insert Media’ or ‘Create Gallery’. Now that you know where to find the Media Library, let’s back up and learn how to position our images.
Adding an Image to Post
Before we open our Media Library you will want to figure out where in your editor where you want to add your image. Whether you want the image on the left side or right side, you will always want to put your cursor on the farthest left side before the text. Wherever your cursor is will be the exact line that the image will be added to. Next, click the Add Media button located at the top right directly above your editor. You will then want to click the Upload Files tab at the top of the window. Here you can either drag you files from your desktop to the box or browse to them directly by clicking the Select Files button. WordPress will immediately upload the file(s) and add them to your Media Library. Once the file has completed uploading an Attachment Details panel will appear on the right hand side.
In the right sidebar you will see a thumbnail of the image you uploaded. Next to the thumbnail will be some details such as the filename, upload date, width x height, and a very powerful tool which is the Edit Image link. Edit Link will allow you to manipulate the image before it is actually saved to the server or inserted into a post. If you click the link it will open an ‘Edit Image’ page.
Edit Image
To get to the Edit Image page you will need to open the Media Library. Click an image and on the right you will see a thumbnail of the image along with a link that is labelled Edit Image, once clicked you will be redirected a page with the image that you uploaded or selected. Above the image will be controls:
- Crop– This is the default button. You can click your mouse on the image and drag to crop the image. Once you click and drag a box, you can modify this crop box by clicking and dragging the 8 boxes at the corners and sides. To make the box size proportionally you can hold shift when re-sizing the crop box. Click inside the crop box to move it around and to cancel cropping you can click the grayed out area outside the crop box. To commit the crop, click the Crop Button (top left).
- Rotate Counter-Clockwise – This will physically rotate your image left (Counter Clockwise). You can click this button as many times as you want and it will continue rotating your image.
- Rotate Clockwise – This will physically rotate your image right (Clockwise). You can click this button as many times as you want and it will continue rotating your image.
- Flip Vertically – Will flip your image to the opposite vertical (up and down) side.
- Flip Horizontally – Will flip your image to the opposite horizontal (left and right) side.
- Undo and Redo – You can use these tools to undo a mistake or past work on the image. This will only work in the current session, as soon as you save your changes or close the window you will lose the opportunity to use Undo and Redo.
To the right of the image you will see that you can Scale Image which will allow you to enter either the Width or the Height you would like the image to be, WordPress will then scale the image proportionally. WordPress may prompt you to Continue / Cancel, but don’t worry – it will allow you to Restore Original Image before you commit your changes.
Image Crop gives you the options of Aspect Ratio and Selection. Aspect Ratio will be the proportional width and height of the image as a ratio. Examples include: 1:1, 4:3, 16:9, etc. Crop Selection will be the Width : Height of the crop box. You can set this or it will change dynamically as you change the crop position. When you are finished, below the image you can click either Cancel to disregard any changes or Save to commit any changes.
Attachment Details
- Title – This text will appear when the user hovers over the image. This must be changed from the original image title for changes to take effect.
- Caption – The Caption will appear below the image and is mostly used as a very short description of the image.
- Alt Text – Alternative Text is used to help those with disabilities understand what the image is. Only seen by screen readers and Search Engines.
- Description – This extra field is used to fully describe the image. Although this is not used by default, we can certainly add this to your theme per your request.
The Attachment Display Settings which is below our Attachment Details is very important. This will dictate the size of your image, alignment and where it is linking to which will change depending on your needs. Below is an explanation of the functionality of each setting:
- Alignment – There are four options to choose from which will do exactly what you would expect:
- Center will align your image to the center of the page.
- Left will float your image left moving any text or other images to the right of this image.
- Right will do the exact opposite, floating the image right and moving any text or images to the left of the image.
- None will add the image exactly where you left your cursor and will remove any previous alignment properties such as Center, Left or Right.
- Link To – There are four options to choose from:
- Media File & Attachment Page will add a link to your image that when clicked will open your image in the current window.
- Custom URL This is useful for linking images to other pages inside or outside of your website.
- None will remove any links to the link so that when clicked it does nothing and goes nowhere.
- Note: Even though the above settings will add a link to the image, it is still advised that once inserted you edit the link and open the link into a new tab.
- Size – Size defines how large or small your image is. Image sizes show as following: WidthxHeight for example: an image that shows 1024×800 will be 1024 pixels wide and 800 pixels tall.
- Full Size is going to be the biggest size you’re able to set into a post, 1024×1024 is the default maximum but can be changed upon user request.
- Medium Size is going to be the middle size. The default for this is going to be 300×300 but can be changed upon request.
- Thumbnail is going to be small and square. The default for a thumbnail is 150×150 pixels but can be changed upon user request.
- Note: We can add more image sizes upon request but usually these three default sizes work for most situations.
When you are satisfied with all the image settings you can click the Insert into page button at the bottom of the window. Now that the image is added, we can change the position if needed by clicking the image and dragging it to where we would like to see it.
To edit or remove the existing image, first click the image and a pair of small boxes will appear on the top left corner of the image. The first box will allow you to edit the current image. The second box will remove the image from the current page. Click the left box, which looks like a pencil so we can edit the image. A pop up window will appear. Here you’ll see Image Details and toward the bottom we have “Advanced Settings” which you can click to expand. Advanced Settings is exactly as it sounds and usually users won’t need to go into them. The top half of this new window is going to be the same as the above Attachment Display Settings.
Advanced Options will be below the Attachment Display Settings. You may have to click the text to expand the options. The most important setting here is the Target setting. This can also be changed from the editor.
- Image Title Attribute – This text will appear when you mouseover the image.
- Image CSS Class – This is somewhat a developer setting. You can assign a special tag or “class” to the image which can display it in a specific or different way than the other images without this “class”. Unless specified by IQComputing, this field is not used.
- Target – When checked, it will open the image link up in a new window, keeping the user on your website. It is recommended to do this with any and all external links on your website.
- Link Rel – Adds a relationship between the link and the image. Not recommended changing the set values.
- Link CSS Class – Exactly the same as the above Image Class except it applies to the link around the image, if the image is a link. Again unless specified by IQComputing, this field is not used.
Adding PDF to Post
Before we add the PDF to our post we need to figure out where in the content the PDF will be. Very similar to adding an image, your cursor needs to be on the same spot where you want your PDF to be inserted. Once we have that found we can click the Add Media button directly above the WordPress editor. This will open a screen where you’re able to view, edit, delete, and rearrange all your media files attached to the specific post. When the Media Library window is open we can either drag your PDF into the Media Library or click the Upload Files tab on the top left of the screen at which point you may click the “Select Files” button and find your PDF to upload. Once uploaded you’ll see some options on the right side, very similar to Image Uploads:
Attachment Details
- URL – This field is uneditable but if you want to link specific text without changing the attachment title, you can copy the URL from here.
- Title – Whenever you insert your PDF into the post content, this will be the text used to link the PDF. If the text is irrelevant to the file ( e.x. “Click Here” ) it’s a better idea to keep the title the same and copy / paste the URL in the above field. If you decide to link the URL directly, read Managing Website Links.
- Caption – Unless requested, caption is never displayed on anything except images and galleries.
- Description – Unless required, description is never used.
You do not need to change the options under Attachment Display Settings as both Media File and Attachment Page go to the file directly. Unless specifically requested, the attachment page is never used. Once you’re satisfied with your settings, you may click the blue Insert into Post button. This will insert the PDF link using the title you assigned into the point where you left your cursor. The final caveat is that since PDFs and similar files do insert as links, they will also open in the same window ( having your user leave your website to view the PDF ). To change this click the newly inserted link then find a “paperclip” icon toward the top of your editor. Click the paper click to popup an “Edit Link” box then click the checkbox which reads “Open link in a new window/tab” and click the blue Update button at the bottom.