Overview
When designing or editing a Wp page or blog post, it is possible to insert images anytime using the Wp Media Uploader tool. Here's how one can add an image, step-by-step, using the media uploader:
Step One - Placing your cursor
In order to insert an image to your webpage or blog post, you must first insert your cursor in the place in the text where you want the photo to appear. By placing your cursor within your text, you can add photos in line with your content. You can also put your cursor on a blank line if you want the photo to appear by itself instead.
Hint: It's a good idea to place your cursor on the left margin of your text, although you may want the photo to appear on the right. That's because there's a special setting called Alignment that allows you to control whether the picture seems to be on the right or the left side of the text. It even controls exactly how text flows around the image automatically.
Step Two - Click on the Add Media button
When you've placed your cursor on the line where you would like your image to appear, click on the Add Media button to launch the media uploader interface, after which you'll choose the Insert Media option from the list of actions in the left side of the media uploader window.
Step Three - Add or Choose Your Image
You can add or select the image you would like to add to your page or post by choosing from either of the following options in the center of the media uploader window:
Publish Files: Upload the photo you want to use from your computer by dragging it into the upload area.
Media Library: Select from any previously added photos in the media library by clicking on the one you wish to add to your page or post.
Once you've selected or uploaded the image you want to add, You'll see a checkbox near the thumbnail confirming your choice, and see information about it displayed in the Attachment Details pane on the right hand side of the media uploader interface.
Step 4 - Attachment Details
The Attachment Details pane displays a small un-cropped thumbnail of the image, as well as important details like the filename, date uploaded, and image dimensions in pixels.
There are also action links that allow you to Modify Image, which takes you to the Edit Image page, or to Delete Permanently to remove the photo from your site.
Moreover, you can actually modify the following media information:
Title: The title of this media. Caption: The caption for this image. The text you enter here will be shown below the image. Alternate Text: Enter the Alt text for the image, e.g. "The Mona Lisa" to describe the media. Description: A description for this particular media.
Step 5 - Attachment Display Settings
The Attachment Display Settings pane controls how the image is displayed when viewed on the website.
You have choices to set how you would really like the image aligned on the page (in relation to the text and margins) and what the link behavior of the image will be, You can also set what size image you would like to display on your page.
Image Alignment
The Alignment setting helps you decide where you would like the image to appear in your content area and how it interacts with any text on the page. You've got the following image alignment choices to choose from:
Left: Adjusts the picture on the left hand margin, and any text that is on the page wraps (or moves) around the image to the available space on the right. Right: Adjusts the image on the right hand margin, and any text that is on the page wraps (or moves) 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.
Image Link
The Link To settings determines the URL/web address to which the image is going to be linked when clicked on by a visitor to your site. You might specify the following image link settings:
Attachment Page: Link your inserted picture to its Wordpress media attachment page. Media File: Link your inserted image directly to the original, full-size version of the file. Custom URL: Enables you to set a custom link URL for your inserted picture to link to when clicked. None: This setting will remove the link completely, making the photo "un-clickable".
Image Size
The Size settings determine the size of the image that you're adding to your site. By default Wordpress creates a range of four image size for you to choose from:
Thumbnail: Displays a small thumbnail-sized version of your image on the page/post. Note, by default the Thumbnail size is a square; therefore some cropping of your original image may occur. Medium: Displays a medium-sized version of your image on the page/post. The perfect size to use with Left/Right alignments, as it leaves sufficient space for readable text to either side. Large: Displays a large-sized version of your image on the page/post. Note: Wp 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: Wp will determine the width of the content column of your theme, and display the largest possible image for that space. In case your original image is larger than the column width, the complete size of the picture may not be displayed.
The Sixth Step - Inserting the image
When you have determined your image settings, click on the blue Insert into post or Insert into page button, to add the image to your page or post. Once the image uploader window closes, you'll see the image in the text manager window, including a preview of the alignment of the image, in case you have specified an image alignment.
At any time, you can edit the image settings simply by clicking on the Edit Image button in the upper left hand corner. You can actually remove the image from your page/post by clicking on the Remove Image button.
When designing or editing a Wp page or blog post, it is possible to insert images anytime using the Wp Media Uploader tool. Here's how one can add an image, step-by-step, using the media uploader:
Step One - Placing your cursor
In order to insert an image to your webpage or blog post, you must first insert your cursor in the place in the text where you want the photo to appear. By placing your cursor within your text, you can add photos in line with your content. You can also put your cursor on a blank line if you want the photo to appear by itself instead.
Hint: It's a good idea to place your cursor on the left margin of your text, although you may want the photo to appear on the right. That's because there's a special setting called Alignment that allows you to control whether the picture seems to be on the right or the left side of the text. It even controls exactly how text flows around the image automatically.
Step Two - Click on the Add Media button
When you've placed your cursor on the line where you would like your image to appear, click on the Add Media button to launch the media uploader interface, after which you'll choose the Insert Media option from the list of actions in the left side of the media uploader window.
Step Three - Add or Choose Your Image
You can add or select the image you would like to add to your page or post by choosing from either of the following options in the center of the media uploader window:
Publish Files: Upload the photo you want to use from your computer by dragging it into the upload area.
Media Library: Select from any previously added photos in the media library by clicking on the one you wish to add to your page or post.
Once you've selected or uploaded the image you want to add, You'll see a checkbox near the thumbnail confirming your choice, and see information about it displayed in the Attachment Details pane on the right hand side of the media uploader interface.
Step 4 - Attachment Details
The Attachment Details pane displays a small un-cropped thumbnail of the image, as well as important details like the filename, date uploaded, and image dimensions in pixels.
There are also action links that allow you to Modify Image, which takes you to the Edit Image page, or to Delete Permanently to remove the photo from your site.
Moreover, you can actually modify the following media information:
Title: The title of this media. Caption: The caption for this image. The text you enter here will be shown below the image. Alternate Text: Enter the Alt text for the image, e.g. "The Mona Lisa" to describe the media. Description: A description for this particular media.
Step 5 - Attachment Display Settings
The Attachment Display Settings pane controls how the image is displayed when viewed on the website.
You have choices to set how you would really like the image aligned on the page (in relation to the text and margins) and what the link behavior of the image will be, You can also set what size image you would like to display on your page.
Image Alignment
The Alignment setting helps you decide where you would like the image to appear in your content area and how it interacts with any text on the page. You've got the following image alignment choices to choose from:
Left: Adjusts the picture on the left hand margin, and any text that is on the page wraps (or moves) around the image to the available space on the right. Right: Adjusts the image on the right hand margin, and any text that is on the page wraps (or moves) 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.
Image Link
The Link To settings determines the URL/web address to which the image is going to be linked when clicked on by a visitor to your site. You might specify the following image link settings:
Attachment Page: Link your inserted picture to its Wordpress media attachment page. Media File: Link your inserted image directly to the original, full-size version of the file. Custom URL: Enables you to set a custom link URL for your inserted picture to link to when clicked. None: This setting will remove the link completely, making the photo "un-clickable".
Image Size
The Size settings determine the size of the image that you're adding to your site. By default Wordpress creates a range of four image size for you to choose from:
Thumbnail: Displays a small thumbnail-sized version of your image on the page/post. Note, by default the Thumbnail size is a square; therefore some cropping of your original image may occur. Medium: Displays a medium-sized version of your image on the page/post. The perfect size to use with Left/Right alignments, as it leaves sufficient space for readable text to either side. Large: Displays a large-sized version of your image on the page/post. Note: Wp 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: Wp will determine the width of the content column of your theme, and display the largest possible image for that space. In case your original image is larger than the column width, the complete size of the picture may not be displayed.
The Sixth Step - Inserting the image
When you have determined your image settings, click on the blue Insert into post or Insert into page button, to add the image to your page or post. Once the image uploader window closes, you'll see the image in the text manager window, including a preview of the alignment of the image, in case you have specified an image alignment.
At any time, you can edit the image settings simply by clicking on the Edit Image button in the upper left hand corner. You can actually remove the image from your page/post by clicking on the Remove Image button.
About the Author:
Our HD-Quality tutorial videos for WordPress Beginners will teach you how to use WordPress to create and manage your own website in about an hour.
