WordPress images – How to manage them

It is a fact that while creating a WordPress website, you may face problems managing your photos. The major problem you may face is that when you insert an image to your post, it will not appearn at the exact location that you see while creating your post. Here is an example:

Let’s say you want to add an image and you want to aling it to the right and you want to have it displayed inside your first two paragraphs as shown in the screenshot below (click to enlarge):

Wordpress image 1 example

The image may appear well in your admin area but when you publish the post you will see sth like this (click to enlarge):

WORDPRESS IMAGE 2 EXAMPLE

As you can see, the image is located till the second line of the second paragraph. So, there is a difference between the appearance of the image in the admin area and the appearance of the image in your website. What you can do for this? You should learn exactly the WordPress Image Management system. If you learn the basics, then you will be able to know how the image will appear in your website after your modifications. In this example, the only way to make your image appear inside the two first paragraphs is to set “vertical space=40px” through “Advanced settings”

How to add your images to your WordPress website

There are two main ways to add your images to your WordPress website. The most common way is while you write a post, you click to the small icon above the post:

wordpress image iconThen you will be redirected to this screenshot:

inserting a WordPress ImageThen you can simply click to “Select Files” and browse your folders in your computer and select the image you want to upload. (Alternatively, you can insert an image from another webpage by clicking “From URL“, or you can insert an image from your website that you already have upload in your website through the Library feature that is located under “Media” in your WordPress Dashboard. )

After selecting the image from your computer (or from other sources) you will be able to make the basic setting directly before inserting the image to the post. This is the screenshot you will see after selecting the photo:

Image Basic SettingsLet’s see each element here:

Title: By default, the name of the image file, but you can change it if you want. For SEO reasons, you need your keyword in the title of your image

Alternative Text: For SEO reasons, you need to fill in this field with the keyword you want to target through your article, it may be relevant to your title and should be relevant to the content of your article.

Caption: The text you will put here, will be displayed under the image.

Description: The description you put here will be displayed in your WordPress dashboard.

Link URL: The URL to which the image will be linked. When you click to File URL, then the link of the image will be displayed. It’s better to leave it as it is, so if the visitors click to the image, they will view the image in its real dimensions. If you want to use the image to redirect your visitors to other webpage, you can click “Post Url” and set the URL of the webpage. Then when your visitors click to the image, they will be redirected to the url you set there.

Alignment: Here you set the position of the image inside your post or page.

Size: The size of the image in pixels

After making the changes you want, just click “Insert into Post” and you are almost done! You may need more changes than these in the basic settings. For example, let’s say you insert an image and after the settings you made before, you publish your post and you see sth like this:

Setting margins to the images

As you can see, there is no margin between the text and the image. This really doesn’t look at all good. So, you need to set that there will be a margin between the image and the text. You need to add both vertical and horizontal space. So, you edit your post and you click once to the image you want to change its settings. After clicking once the image, you will see this icon on the top of the image. You click the icon to edit the picture.

Edit a WordPress imageAfter clicking to this icon, you will be able to make advanced settings as shown in the image below:

advanced wordpress image settings

After clicking to the tab “Advanced Settings, you go directly to “Image Properties” and you take care of the “Vertical space” which is the space between the image and the text that is located above or below the image. The Recommended Verical space is 10px in order to have your image displayed well. The “Horizontal space” is the space between the text on the right and on the left of the image. The Recommended Horizontal space is 10px to have your image displayed properly.

In the previous example, since we put the number “10” in both Vertical and Horizontal space fields, then the image will appear as you can see here:

advanced image settings

As you can easily observe, it looks much better now!

A common problem in the position of a WordPress image

Many WordPress users don’t know how to put their image exactly in the position they want. We will exaplain the main problem and the solution to this problem with one example. Let’s say you just uploaded an image and when you publish it you see sth like this:

common wordpress image problem

The problem is that you want your image to go to the top of the second paragraph. In other words you want your image to go one line up and look like this:

advanced image settings

How to set the exact position of your WordPress Image

The most common thing that most user do is just trying to drag and drop the image to the top, but in WordPress this doesn’t work. What you need to do is this:

1) Locate the word where you want your image to be displayed. In this example, you want your image to be displayed after the word “have” ( in the first line in the second paragraph).

2) Drag and drop the image as shown in the picture below (click to enlarge). You need to see your cursor BEFORE the word “have“.

SOLVING THE WORDPRESS IMAGE PROBLEM

3) In WordPress admin area you may not see any difference but when you update your post you will see this:

Wordpress image position

The image is aligned on the right of the word “have” and it is located inside the first line of the paragraph. If you want to align the image to the left, you do the same process and you need to see your cursor in the beggining of the line ( on the left)

Resize your image inside your WordPress post

If you want to resize your WordPress image, simply click to one of the 4 corners of the image and move the corner to the center of the image to reduce its size as shown in the picture below:

Resize a WordPress image

While resizing your image, you will be able to see the new image dimensions. It is not recommended to enlarge your image since it will not look nice. On the other hand, you are free to reduce the image size without affecting the quality of the image.

Large images in your posts – How to insert them properly?

Before inserting an image to your WordPress website, you need to know the width of your main content area. For example, if the width of your main content area is 500 pixels, it isn’t recommended to insert images with width more than 500 px. Although if you want to add images with width more than the width of your main content area, you need to follow this process:

1) Upload the picture WITHOUT reducing the image size ( size: Full size)

2) After uploading the image, reduce the image width inside your WordPress post as explained before.Take care to set the new width about 500px

3) Then the image will appear smaller but you can enforce your visitors to click to the image and then they will be able to see the picture in its real dimensions (Just add a “click to enlarge” phrase)

Media Library: Organize your images

Instead of uploading your images each time you make a new post, you can upload your images to your library and then insert the images to your post from your library. Just go to “Add new” that is located in the “Media” inside your WordPress Dashboard

Wordpress media libraryYou can add new images to your library easily! After clicking to “Add New” just browse your files and select the images you want to upload to your library.The files that are in your library will not be published until you insert them to a WordPress post or page.

Furthermore, you can add to your library other media files, or pdf files etc that then you can easily insert to your posts using the “Upload” Button on the top of your WordPress post area. 

Leave a Reply