How To Insert Images into WordPress Posts and Pages

Including images in an article is the best way to illustrate your ideas. Adding Images make your content interesting and make readers more engaging. WordPress makes it really easy to add images to your posts. In this article we will discuss how to insert images into WordPress posts (or) pages.

  1. Create a New Post/(Page), or Open an existing Post/(Page)

    To create new Post, from your wordpress Dashboard go to Posts>>Add New (To create new page, go to Pages>>Add New ).

    Add New
    Add New

    Note: If you want to add image to an existing post, open your  post. Go to  Posts>>All Posts>>click on the post’s title to view the edit page.

    Edit Post
    Edit Post
  2. Click the Add Media button

    Now you are in the post-write screen. Place your cursor where you want the image to appear and click the ‘Add Media’ button.

    Add Media
    Add Media

    Now you will see insert media screen. To insert image, you have following 3 options.

    insert image
    insert image
  3. Insert Your Image

    • Upload From Computer
      First let us see how to upload images that are already saved on your computer. Click on upload files>> Click on the ‘Select Files’ button.

      Select files

      Find image file from your PC and click on Open button. Wait for WordPress to upload and crunch  the image. Click on the blue Insert into post button to add the image to your post.

      Insert
      Insert

      Note: After uploading an image from your PC, You will see a number of options(attachment details and attachment display settings) on the right hand side. You can either use the default setting displayed there >> Click on the blue Insert into post button or see how to use these settings .

    • Insert from Media Library – If you already have uploaded images and have a Media Library in your blog, select from any  images in the media library by clicking on it, click on the blue Insert into post button to add the image to your post.
      Insert from Media Library
      Insert from Media Library

      Note: After selecting an image from media library, you will see a number of options(attachment details and attachment display settings) on the right hand side. You can either use the default setting displayed there >> Click on the blue Insert into post button or see how to use these settings.

    • Insert from URL

      Insert from URL
      Insert from URL
  4. Different settings for uploaded image – after uploading an image from your PC (or selecting an image from media library), You will see attachment details and display settings on the right hand side of the media up loader interface.
    Attachment details:
    Attachment Details section displays:

    • A small thumbnail of the image
    • File details
    • A links that allow you to Edit Image
    • A links that allow you to Delete image from your site.
    • Enter the title of this media.
    • Enter a caption that will be displayed below the image.
    • Enter the Alt text for the image to describe the media.
    • A description for this particular media.
    Image details
    Image details

    Attachment Display settings

    Display settings
    Display settings

    Alignment

    The Alignment setting controls where your image will be displayed and how it interacts with content on the page.

    Align
    Align

    Link To You can create different types of image links here.

    • Media File: This is default option.This will automatically link to full-size version of the file.
    • Attachment Page: Links your inserted image to its WordPress media attachment page.
    • Custom URL: Allows you to set a custom link URL for your inserted image
    • None: This setting will remove the link completely.

    Image size – The Size settings determine the size of the image you are adding to your site.

    Image Size
    Image Size

How to edit Image Attributes in an existing WordPress Post

You can always edit different image attributes such as the alignment of an image or alt/title/caption/description text of an image that already inserted in a post. Open the post in the post-write screen(follow step 1 on this page). Make sure that visual editor tab is selected. Click on the image you want to edit. You can see two icons over the image. The left icon (pencil Image) allows you to edit the image properties and the right icon (X Image) will delete the image from your content.

edit image
edit image

Click the edit image icon to edit the image properties. A  pop-up window will appear and you can edit the various image  properties there. The Edit Original button allows you to do some simple manipulations such as Crop, Rotate, Scale, and Flip Images. The Replace button allows you to replace the image entirely.

edit attributes
edit attributes

After making changes, click the Update button to save your changes. If you do not want to make any changes, click the small ‘x’ in the top-right of the pop-up window to close the pop-up.

Give Your Post a Thumbnail and Display it on the Home Page

There are circumstances where you want to display thumbnails in the post which will link to the post.

featured image
featured image

Well, WordPress introduced this feature in version 2.9 onwards. This article explains how to give your post a thumbnail then display it on the home page.

To use this feature you need to do  three important things:
1. Check to see if the theme supports thumbnails already – if so, go to step 3
2. If not, then turn on post thumbnail support.
3. Upload and set up featured image.

Step1: Check if this is enabled in your theme.

To display featured image in a post, you need to enable thumbnail support within your theme. Most themes support featured images by default.

How to check if this is enabled in your theme.
From your wordpress Dashboard, go to Posts>>AddNew. Now you can see post writing screen. If your theme supports featured images, you will see a meta box called featured images on the right hand side of the screen. Go to step3.

Featured Image
Featured Image

If you do not see this featured images meta box, this feature is not enabled in your theme.

Step2: Enable Thumbnail Support

How to enable Featured Images /  in wordpress
You need to add a small line of  code in  ‘functions.php’ file within your theme folder (wp-content/themes/theme-name/). From wordpress dash board go to Appearance>>Editor

Go to theme editor
Go to theme editor

Now you will see built-in Appearance Editor Screen. On the right there will be a list of the Theme Template files that can be edited. Click on functions.php.

edit functions.php
edit functions.php

Put the following code in functions.php file.

add_theme_support( 'post-thumbnails' );

Go back to your post write screen. Now you will see “Featured Image” box on your WordPress post writing screen.

Step3: Set featured image

Click on ‘Set featured image’ link.

Set up image
Set up image

Upload/select an image ( Refer the article >> How To Insert Images into WordPress Posts and Pages). Once you have selected the featured image and determined the image settings, click on the blue “Set featured image” button, to set it as the featured image for your page or post.

set up image
set up image

 

How to change Thumbnail Sizes

Default thumbnail sizes can be changed in WordPress’s Settings > Media screen.

Featured Image Size
Featured Image Size

However, after making any changes in  media settings screen, by default wordpress do not resize images on the fly. This means any featured images that were added prior to this remain unaffected. Resizing each of these images, manually, is not practical for anyone with hundreds of posts . In such a case, you can use the plugin called ‘Regenerate Thumbnails’ to regenerate the new image size.

  1. Install and activate the Regenerate Thumbnails plugin.(Refer the article>> how to install plugin)
  2. After activation , go to Tools » Regen. Thumbnails .There click Regenerate Thumbnail icon and let the plugin do its job.
    regenerate image
    regenerate image

    Note: You can also Regenerate thumbnails in bulk as shown below under Media  Library Page. Go to Media » Library from left menu. Select all the images for which you want to re-generate the thumbnails and choose “Regenerate thumbnails” in the drop down, press Apply.

    renerate thum
    regenerate thumb

    Alternately, you can regenerate thumb for single images in the Media Library. Pass mouse over the image row, then you will see Regenerate Thumbnails link.

    regenrate thum
    regenerate thumb

How to Set up a default featured image

If you forget to set up featured image for your post an empty box will be show next to your post. One way to avoid this is by saving a permanent default featured image. There is a plugin called ‘Default Featured Image’ that let you set up a default image as featured image. (You may solve this by using following plugins also: Require Featured Image – that let you publish the post only after setting featured image  , Auto Set – to set the first image of your post to Featured Image ). Let us see how to set up  Default Featured Image.

  1. Install and activate the Default Featured Image plugin.(Refer the article >>  how to install wordpress plugin)
  2. After activation, go to Settings » Media .There you can see new options to set up default featured image.

    Upload image
    Upload image
  3. Now you are done! This default image will display in posts with no featured image added manually.

How to Create a for Your WordPress Post

http://www.wordpressluv.com/how-to-create-a-custom-thumbnail-for-your-wordpress-post/

How to Add Multiple Post Thumbnails/Features

http://www.wordpressluv.com/how-to-add-multiple-post-thumbnailsfeatures-images-in-wordpress/

How to Create a Custom Thumbnail for Your WordPress Post

To make your blog more appealing to look at, use the post’s featured image as a thumbnail beside your latest post. Sometimes, WordPress’s default thumbnail sizes don’t fit the bill so this procedure will also help create sizes to any size you want. All you need to do is to edit a snippet that is located in your WordPress functions.php, add a few lines of code. Then attach an image of your post using featured images plugin.

After that, you need to edit a few lines of code into your index.php file or into single.php file if you want the posts to appear on the full articles.

 

Read full instructions here: http://www.cheesetoast.co.uk/create-custom-thumbnail-size-wordpress-posts/