Uploading images to post contents
When creating or editing a WordPress page or post, you can easily embed many different types of media at any time using the WordPress Add Media tool.
Embeddable media include:
- Documents of various types
The following will take you step by step through the process of embedding media into your content.
Step 1 – Placing your cursor
In order to embed media in your page or post content, you must first insert your cursor in the place in the text where you want the media to appear.
Step 2 – Click the Add Media button
Once you’ve placed your cursor on the line where you want your media to appear, click on the Add Media button to launch the media uploader interface, then select the Insert Media option from the list of actions in the left side of the media uploader window.
As of WordPress Version 3.9, you may also drag media directly onto the editor to upload them.
Step 3 – Add or Select Your Media
You can upload or select the media you want to add to your page or post by choosing from either of the following options in the center of the media uploader window:
- Upload Files: Upload the media you want to use from your computer by dragging it into the upload area.
- Media Library: Select from any previously uploaded media in the media library by clicking on the one you wish to add to your page or post.
Once you have selected or uploaded the media you want to add, you will see a checkbox next to the thumbnail confirming your selection, and you will see the selected media displayed in the Attachment Details pane on the right hand side of the media uploader interface.
Step 4 – Attachment Details
Title – The name of this media.
Caption – Brief explanation.
- Left: Aligns the image on the left hand margin, and any text that is on the page wraps (or flows) around the image to the available space on the right.
- Right: Aligns the image on the right hand margin, and any text that is on the page wraps (or flows) around the image to the available space on the left.
- Center: Aligns the image to the center of the page, with no text displayed around it.
- None: Inserts the image in to the page with no alignment
- Attachment Page: Links your inserted image to its WordPress media attachment page.
- Media File: Links your inserted image directly to the original, full-size version of the file.
- Custom URL: Allows you to set a custom link URL for your inserted image to link to when clicked.
- None: This setting will remove the link completely, rendering the image “un-clickable”.
Read only display of the media URL or web address.
- Thumbnail: Displays a small thumbnail-sized version of your image on the page/post. Note, by default the Thumbnail size is a square, so some cropping of your original image may occur.
- Medium: Displays a medium-sized version of your image on the page/post. This is a good size to use with Left/Right alignments, as it leaves sufficient space for legible text to either side.
- Large: Displays a large-sized version of your image on the page/post. Note: WordPress will determine the width of the content column of your theme, and display the largest possible image for that space.
- Full Size: Displays a full-sized version of your image on the page/post. Note: WordPress will determine the width of the content column of your theme, and display the largest possible image for that space. If your original image is larger than this column width, the full size of the image may not be displayed.
Available sizes depend on what sizes were generated for the image at the time it was uploaded based on the sizes in Settings > Media compared to the original image size. New image will only be generated if it the dimensions are equal to or smaller than the original image size.
Audio and video files have embed options instead of alignment, link, and size options.
- Embed Media Player
- Link to Media File
- Link to Attachment Page
Step 5 – Inserting Media
Once you have determined your embed settings, click on the Insert into post or Insert into page button at the bottom right to add the media. After the media uploader window closes, you will see the media in the editor window.
There are several options available for modifying image details after an image has been added. To change image details, click on an image in the editor and then click the edit icon to open the Image Details screen, or remove the image by clicking the “x” icon. You can adjust the alignment of image by clicking Align left, Align center, Align right or No alignment icons.
The Image Details screen can be used to modify image attributes for individually inserted media files. Click the “Advanced Options” heading to see additional options.