Home > Help Center > Applications > WordPress > WordPress Insert Images in Posts and Pages

WordPress Insert Images in Posts and Pages

WordPress provides us with many opportunities to create rich and varied content, which is, in fact, the main reason for the success of any site if we believe (and we do believe indeed) in the cliché that content is a king.

For this reason, many useful options may remain unnoticed and therefore unused, which will ultimately deprive our content of those small details that should distinguish us from the competitive sites.

In this article we'll take a look at most available options to include images in posts and pages (both are using the exact same tools).

Optimize Your Images for Web

We'll explain image optimization in detail in another article.

For this article we upload a 960x640px image and then we supplied all Meta information for the uploaded image:

Attachment Title – this title is used internally by WordPress to sort images in the media library.

Caption – the text that you want to display with your image. Placement and styling the image caption depends on the chosen theme.

Alt Text – alt text or alternate text is a required field by the HTML specifications. It is displayed when a user's browser is unable to find the image. Search engines like Google use alt tag as a ranking factor in their image search results.

Description – This text will be displayed on the image attachment page. You can enter as much information as you want in the description field. Like the story behind a photograph, how you took the picture, or anything else that you want to share can go here. You can format the text and even add links in the description field.

We also checked what image sizes does our theme (twentysixteen) supports in Appearance > Editor > Theme Functions (functions.php) file:

wordpress insert image

We'll need this information later in the tutorial.

Insert Image in a Post

Open Administration > Posts, select any of the existing posts to edit or click Add New button to create new post.

Click inside the post where you want your image to appear and click Add Media button:

wordpress insert image

From Media Library choose your image. In the right side panel WordPress displays two sections – Attachment Details and Attachment Detail Settings.

In Attachment Details fields you see all Meta information for that image:

wordpress insert image

In Attachment Detail Settings section we select image alignment, image size and where it should link to.

Alignment options are self explanatory:

wordpress insert image

What does Link To options mean?

wordpress insert image

  • None – image is not a link
  • Media File – if you click the image it will load in a new screen at full size. Frankly, you don't need it because anyone can see the image In a new tab using right click on image and select Open image in new tab option.
  • Attachment Page – this link will open image attachment page with your formated keywords rich description and even links. Search engines will find and index this page because they will follow the link from your post. Do not miss the opportunity to create optimized attachment pages for all your images.

wordpress insert image

  • Custom URL – it is not suitable way to redirect users to affiliate product page, for example, because users will expect when clicking on the image to find information connected with the image.

Size options:

  • Medium – defined in Settings > Media screen
  • Full Size – the uploaded image size

wordpress insert image

wordpress insert image

Click Insert into post button to finish the selection. To save your post click Update or Publish button.

Now copy the text and the image from the post and paste it twice below. Click on images and using pop-up buttons align the first image in the center and the second image - in the right side of the post:

wordpress insert image

wordpress insert image

Your post should look like the screenshot below concerning images (we deleted some text to reduce screenshot dimensions):

wordpress insert image

Resize Image from within a Post

Click on any image and slowly move your mouse over image handlers until the cursor changes to two-way arrow. Than drag the mouse in any direction to reduce or expand image dimensions. In the example we are reducing image width to 110px:

wordpress insert image

Click on Edit button:

wordpress insert image

On the Image Details screen we see another option enabled – Custom Size showing the exact same new values for width and height:

wordpress insert image

If you want to save new values, click Update. If you want to restore the previous image delete the image:

wordpress insert image

and upload the original image again.

Or click Edit, in display settings select Size: Medim 300 x 200 and click Update.

Add Custom CSS

Click on the first image and click Edit button. On the Image Details screen click Advanced Options link:

wordpress insert image

In the Image CSS Class field enter img-dalm and click Update.

Repeat the step with the second image but enter different Image CSS Class img-dalm-circle.

The class in the Link Rel field is added automatically by WordPress.

Click Update to save changes.

Click Appearance > Customize then click Additional CSS link at the bottom.

Add this code in the window:

wordpress insert image

.img-dalm {border: 6px solid #bbb; padding:6px}
.img-dalm-circle { border-radius: 51%}

In the preview screen you should see this:

wordpress insert image

If the second image is a square we'll get perfect circle, when the image is a rectangle – the result is ellipse.

In this way you are able to use all CSS3 image and filter effects on your images. These custom CSS classes are saved only within current theme. If you want to save the effects click Save & Publish button.

WordPress Theme Supported Image Sizes

Click on the third image, click Edit button. In the Image Details screen in Details Settings section select Full Size:

wordpress insert image

Click Update in the Image Details screen, click Update on Edit Post screen and click Preview Changes:

wordpress insert image

The third image goes out of the content container and this size seems to be unsuitable. Probably if we start to resize our image at some point it will fit the content container width but this way of visually adjusting settings looks far from professional.

At the beginning of this tutorial we checked what image sizes does our theme support and we found these two values for width – 600px and 840px. And this is the answer of our question – the content container width is 600px while the whole post container width (including title and Meta section) is 840px.

So, we click on the image and set Custom Size to 600px width, WordPress will adjust the height automatically keeping the original file aspect ratio:

wordpress insert image

Set Align to Center or None.

Click Update in the Image Details screen, click Update on Edit Post screen and click Preview Changes:

wordpress insert image

Perfect.

Conclusion

It was long tutorial with lots of links, buttons, screens and settings to manage. Let's quickly list them here:

Insert image:

  • Click inside the post or page where you want the image to appear and click Add Media
  • Click on the selected image
  • In Attachment details enter Title, Caption, Alt Text and Description
  • In Attachment display settings select Alignment, Link To and Size options from the drop-down menus.

Edit image:

  • Click in the image
  • From buttons above the image you can change alignment – left, center, right, none (displays as left)
  • Select Edit to enter Image Details screen where you can edit all settings, also you can Edit original image or replace the image clicking corresponding button below the image
  • In advanced settings you can add Custom CSS classes to images and links and to use Theme Customizer to add CSS Custom code.
  • You can click on the image and drag the handles to set custom image size or you can use pre-defined custom size by using Custom Size in Image Details screen.

Congratulations to everyone that got to the end of this tutorial. We hope the information and examples will help you to use all image tools in WordPress with confidence.

#wordpress #images

Still not finding what you're looking for?

Contact our support team with any additional questions or concerns.

Contact support