How To Insert And Format Images Into WordPress Posts And Pages

How To Insert And Format Images Into WordPress Posts And Pages

How To Insert And Format Images Into WordPress Posts And PagesAdding images to your content can help make your website or blog look more attractive, lively and professional. Images can also help to create a better impression with your readers and deliver a stronger presentation in your sales message.

In other tutorials, we show you how to upload images and other media files to your WordPress site using the Media Library.

We also show you how to edit images in your WordPress Media Library.

In this tutorial you are going to learn how to insert and format images into your Content.

Watch the video below and then complete the step-by-step tutorial to learn more about using images in your WordPress content.

How To Insert And Format Images Into WordPress Posts And Pages: Step-By-Step Tutorial

There are several ways to source images for inserting into your posts and pages.

You can:

  • Insert an image from your site’s Media Library
  • Upload an image from a folder in your hard drive
  • Insert the URL of an image stored in an image folder either in your own server or on another server (e.g. a remote file storage location).

Warning

Important: Make sure that you have permission to use the image(s) on your site. Image licensing companies and owners of copyrighted images will take legal action against you if you use images on your site without permission or violate the terms and conditions of your licensing agreements.

How To Insert Images From Your WordPress Media Library

Make sure that you have already completed this tutorial.

To insert an image from your WordPress Media Library, go into your Posts or Pages section and open (edit) your post or page, then place your mouse cursor where you want your image inserted into the content …

How To Insert And Format Images Into WordPress Posts And Pages

Click on the Add Media button above the content editor window …

How To Insert And Format Images Into WordPress Posts And Pages

A pop up window will display the Insert Media options. Select the Media Library tab to view all media you have uploaded to your WordPress site …

How To Insert And Format Images Into WordPress Posts And Pages

Select All media items from the Media Library drop down menu to view all media items uploaded to your site …

How To Insert And Format Images Into WordPress Posts And Pages

You can also view only the media items you have attached to your post or page by selecting Uploaded to this post from the Media Library dropdown menu …

How To Insert And Format Images Into WordPress Posts And Pages

Note: You can also use the Media Library drop down menu to filter and display only images, audio and video files.

Select the image you want to insert into your post or page and then click on the Insert into post button …

How To Insert And Format Images Into WordPress Posts And Pages

Your image will be inserted into your post or page …

How To Insert And Format Images Into WordPress Posts And Pages

Important

Note #1: You can also insert an image gallery from your media Library into your posts and pages. For more details see this tutorial: How To Add Multiple Images Into WordPress Posts And Pages Using An Image Gallery

Note #2: To exit the Insert Media screen without performing an image action, just click on the “X” at the top of the window …

How To Insert And Format Images Into WordPress Posts And Pages

How To Upload Images From A Computer Hard Drive

To add your own images to a post or page, first, make sure that you already have an image created and ready to be uploaded or inserted in an “images” or graphics folder in your computer.

Next, go to your WordPress Visual Text Editor and click inside the post or page where you want the image to be inserted. The image will be inserted wherever your cursor is flashing.

Click on the Add Media button above the content editor window …

How To Insert And Format Images Into WordPress Posts And Pages

A pop up window will display the Insert Media options. Select the Upload Files tab to display the media uploader, then either drag-and-drop your image file into the box that appears in the screen with a dotted border, or click on Select Files to locate and upload your image …

How To Insert And Format Images Into WordPress Posts And Pages

Note: For a detailed tutorial on using the WordPress Media Up-loader go here.

Locate the image you want to upload, then select it and click Open in the File Upload window …

How To Insert And Format Images Into WordPress Posts And Pages

Your image will begin uploading …

How To Insert And Format Images Into WordPress Posts And Pages

Once your image has been uploaded, it will display as the selected item. Click the Insert into post button …

How To Insert And Format Images Into WordPress Posts And Pages

Your image will be inserted into your post or page …

How To Insert And Format Images Into WordPress Posts And Pages

How To Insert An Image From A URL

Warning

Important: Do not link to images hosted on an external server without permission – this is called “hotlinking” and it’s frowned upon by most webmasters and website owners, as it uses up their bandwidth and costs them money. You can set up your own external data storage account for hosting images and files remotely using a service like Amazon S3.

To insert an image from a URL into a post or page, click on the Add Media button …

How To Insert And Format Images Into WordPress Posts And Pages

The Insert Media screen will open on your browser window. Click the Insert from URL link in the Insert Media menu …

How To Insert And Format Images Into WordPress Posts And Pages

Enter your image URL in the Insert from URL field, your image title in the Title field and click Insert into post

How To Insert And Format Images Into WordPress Posts And Pages

Useful Tip

Useful Tip: If you use a content editor enhancing plugin like the TinyMCE Advanced plugin, you can quickly and easily insert images into posts and pages by simply clicking on a menu icon …

How To Insert And Format Images Into WordPress Posts And Pages

This will bring up an Insert/Edit Image box like the one shown in the screenshot below, allowing you to enter an image URL, image description, title, etc. before inserting the image into your post or page…

How To Insert And Format Images Into WordPress Posts And Pages

How To Insert and Format Images In To WordPres Posts Or Pages

Once you have uploaded and inserted an image into your post or page using one of the methods shown above, the next step is to format your image so it displays well on your site.

In this section you will learn a number of different ways to format images in WordPress.

How To Format Images In The Insert Media Screen

Before inserting an image into a post or page, the Insert Media screen gives you a number of options for editing and formatting your image file …

How To Insert And Format Images Into WordPress Posts And Pages

To learn more about editing media in the Media Library, see this tutorial.

The Attachment Display Settings allow you to specify a number of formatting options for your image:

You can select an Alignment for your image …

How To Insert And Format Images Into WordPress Posts And Pages

Left: Place the image on the left of your post or page content. Text is wrapped around the image.

How To Insert And Format Images Into WordPress Posts And Pages

Center: Center your image on the post or page. Text is not wrapped around the image.

How To Insert And Format Images Into WordPress Posts And Pages

Right: Place the image on the right of your post or page content. Text is wrapped around the image.

How To Insert And Format Images Into WordPress Posts And Pages

None: No image alignment. Text is not wrapped around the image.

How To Insert And Format Images Into WordPress Posts And Pages

You can also associate your image with a Link To destination …

How To Insert And Format Images Into WordPress Posts And Pages

Custom URL: Select this option to link your image to a URL of your choice (e.g. your home page or product page). Clicking on this image in a post or page will send the visitor to the URL location specified in the Custom URL field …

How To Insert And Format Images Into WordPress Posts And Pages

Media File: Select this option to link your image to the folder where your image file has been uploaded. Clicking on this image in a post or page opens up a full size copy of your image on your visitor’s browser …

How To Insert And Format Images Into WordPress Posts And Pages

Attachment Page: Select this option to link your image to the media attachment page. Clicking on an image inserted into a post or page with this option will open up the file’s attachment page (see this tutorial for information about attachment pages) …

How To Insert And Format Images Into WordPress Posts And Pages

None: Select this option if you want to remove all links to the image. When an image with this setting is inserted into a post or page and someone clicks on it, nothing will happen …

How To Insert And Format Images Into WordPress Posts And Pages

You can also choose a Size for your image …

How To Insert And Format Images Into WordPress Posts And Pages

Note: You can change the default size of your image thumbnails in the Media Settings page …

How To Insert and Format Images In To WordPress Posts Or Pages

Adjusting Image Placement And Size

You can move an image around your text by selecting it with your mouse, then dragging and dropping it into a different area of your post or page editor window …

How To Insert And Format Images Into WordPress Posts And Pages

To edit an image once it has been inserted into your post or page, click on the image with your mouse and select the Image Edit icon …

How To Insert And Format Images Into WordPress Posts And Pages

The Edit Image screen will open up …

How To Insert And Format Images Into WordPress Posts And Pages

In the Edit Image screen, you can do the following:

Size: This allows you to scale your image from 100% down to 60% of its current size. This is useful if you want to adjust the size of your image to something other than the default full size, Large, Medium, and Thumbnail size options presented when you insert the image. Slide your mouse over the settings to enlarge or reduce the size of your image, then click to set the size option.

Alignment: This is where you control how your text aligns or wraps around your image. Select either left, centre, or right alignment and the image preview will change to show you how this will affect the image and text on your page.

You can also specify a Title for your image, Alternative Text (Alt text), Caption, and Link URL (See the previous sections of this tutorial and this tutorial for more details about these options.)

When you’re done editing your image, click Update to save your new settings, or Cancel to exit the screen without saving your changes …

How To Insert And Format Images Into WordPress Posts And Pages

How To Resize Images – In-Content Image Resizing

You can resize your image directly in the Visual editor by clicking on the image, selecting any of the standard resizing handles and move the mouse to make the image smaller or larger …

How To Insert And Format Images Into WordPress Posts And Pages

Note: the image may become distorted or blocky, depending on how you resize it.

How To Insert and Format Images In To WordPres Posts Or Pages

How To Resize Images – Adding Thumbnail Images To Posts

To add a thumbnail image to your post, place your cursor where you want the thumbnail image to appear in your content and click on the Add Media button

Using Featured Images In WordPress Posts

This will bring up the Insert Media screen …

How To Insert And Format Images Into WordPress Posts And Pages

Select the image you want to insert into your post as a thumbnail and then choose Attachment Display Settings > Size > Thumbnail from the dropdown menu in the Attachment Details column …

How To Insert And Format Images Into WordPress Posts And Pages

Click Insert into post

How To Insert And Format Images Into WordPress Posts And Pages

Your thumbnail image will be inserted into your post in the location where you placed your mouse cursor …

How To Insert And Format Images Into WordPress Posts And Pages

Note: To change the default size of your thumbnail images, see this tutorial.

Using The Advanced Settings Tab To Edit Your Image

To access the Advanced Settings tab, click on the image edit icon…

How To Insert And Format Images Into WordPress Posts And Pages

Click on the Advanced Settings tab…

How To Insert And Format Images Into WordPress Posts And Pages

In the Advanced Image Settings section you can:

  • View the Source URL of your image (if your image is stored in a different server, enter the full URL to the image here)
  • Enter a custom Size for your image or click on the Original Size button to restore the image to its original size
  • Enter a CSS Class – You can add or override CSS classes for your image here.
  • Add Styles – Apply individual CSS styles to the image.
  • Adjust Image properties like adding a border (enter “0” for no border, or specify a border width in pixels, e.g. “2”), vertical spacing and horizontal spacing (enter the number of pixels for these).

Below the Advanced Image Settings you will find the Advanced Link Settings section. This includes the following options:

  • Title: Enter text here to display the image title as a tooltip (the text will appear when visitors hover their mouse button over your image).
  • Link Rel: You can add link rel attributes to your images (e.g. nofollow).
  • CSS Class: Use this field to apply a CSS class to the link.
  • Style: Use this field to apply individual CSS styles to the link.
  • Target: Select whether you want the link to open in a new window or the same window.

Remember to click the Update button to save any changes made to these settings …

How To Insert And Format Images Into WordPress Posts And Pages

Useful Tip

Tip#1 – If you notice that an image appears to be distorted, or if you replace an image on your server with another image of a different size, then click on Image Edit > Advanced Settings > Original Size button to restore the image dimensions to its correct size …

How To Insert And Format Images Into WordPress Posts And Pages

Remember to click the Update button to save your settings …

How To Insert And Format Images Into WordPress Posts And Pages

Congratulations! Now you know how to insert and format images into WordPress posts and pages.

WordPress is huge and can sometimes be overwhelming about where to start. As you move on to the next Page, you will have a clearer picture of where to start and making progress to building a professional WordPress Site.

Related Tutorials

 

 

 

 

error: Content is protected !!