Images in WordPress

by Drew Conroy


Posted on January 9, 2019


Scattered Social Media Icons along with one of WordPress

Note: This post is from our video tutorial on Images in WordPress

Today we are going to go over images in WordPress.  We have already worked with them a little in past videos but now we are going to get more in depth.

If you have been following along in this WordPress Beginner tutorials Series I had you copy some Lorum Ipsum text to use in our pages and posts. I got it from the Mashables article on “Unique Lorem Ipsum Generators”.

Go to anyone of the Generators and grab about 6 paragraphs. You will need some images as well. The easiest way is like we did before, just Google anything you want. If this is your first time watching these videos I will walk you through uploading images from Google.

As an example, I searched for cats. Then click on the images tab in Google. From here, right click on the image you want and then click “Save Image As”. Save the images to your desktop. Repeat this process to get 4 more images saved on your desktop.

Login into your Wordpress Dashboard. From the left side panel click “Media” then the “Add New” button at the top of the page. You can use the “Select Files” button to upload the images. But the easiest way is to drag and drop the images into the square area on the page from your desktop.

Once you have uploaded the images, hover your cursor over “Pages” on the left panel then click “Add New” from the flyout.

Add a title for this Page. I am going to call mine “Services”. Then I need you to paste in those 6 paragraphs that you copied from one of the Lorem Ipsum Generators.

Take your cursor and click into the first paragraph about 4 or 5 words, then hit enter on your keypad, making a space. Highlight the text you just seperated from the paragraph. We are going to make it an H2, bold it and then center it.

Now take your cursor and place it at the end of the first paragraph and left click once. Then click the “Add Media” button.

This will of course look familiar if you have been following along in this WordPress Beginner Tutorials Series. This is your Media Library where we can upload images or use images already in the library. We also have the option of creating a gallery, setting a Featured Image and inserting an image using a URL.  

Again, to upload an image, make sure you are in the “Upload Files” tab then click the “Select Files” to navigate your computer, for an image to upload. You can also drag and drop your images into this area as well.  

Select an image from your computer by left clicking, then click the “Open” button to upload it. Off to the right on the screen you will see fields where you can enter in meta data for your image.

At a minimum you want to enter in the title and alt text

 Both the Title and Alt Text are good for SEO which is short for Search Engine Optimization. For the Title I am going to enter in cats. The purpose of the Alt Text is to describe the image so that search engines and screen readers can understand what the image is.

The Caption will show up on the page just below your image. We are going to leave that ‘as is’ along with the Description.

We will leave the “alignment” at none but we have the choice of floating our image to the left, right or center. That is something I think you are better off doing from the actual page or post.

When you upload an image, WordPress automatically creates different sizes of that image. The sizes you get to choose from will be determined by your image. The choices I have to choose from are: Thumbnail, Medium’ Large and Full Size. We are going to go with Large.  Then click “Insert into Page”.

Once you have inserted your image, hover your cursor over it. That will bring up a row of options. You can align your picture left, right or center. If you click the pencil icon, it will bring up the image properties. You can edit the “Caption”, “Alt Text”, and set the Image left, right, center or none. You can also set the “Image Size” and “Link To” properties. You can choose the “Edit Original” image or “Replace” it with a new one.

If you choose to “Replace” the image, it will give you the option to get an image from the Media Library or you can upload one. Clicking the  “Edit Original” will bring up another page.

From the left hand corner, you can flip, rotate, undo or redo changes to the image. Put your cursor on the grayed out icon in the far left hand corner. Left click and drag it to your image. If this does not work, try right clicking, then left clicking, then left clicking again to bring up the cropping image tool... Click outside the image to cancel using the tool.

A man on a laptop looking at a WordPress image

You can resize the image by entering in a dimension in one of the boxes. WordPress will automatically fill in the other box with a number to keep the aspect ratio.  Then click the “Scale” button to resize your image.

If you do not like the scaled image, just click the “Restore Original Image” text, a dropdown will reveal a “Restore Image” button you can click to change it back.

When entering a aspect ration, you are able to lock the crop selection tool to that aspect ratio while holding down the shift key.

Keep in mind, WordPress suggests for best results is to try scaling the image before you crop, flip, or rotate it. Images can only be scaled down, not up.  If you have made changes to your image click “save”. To exit the image editor click ‘cancel’. Then if you are happy with your settings click “Update”

Let’s add another image. Start by clicking your cursor at the end of the fourth paragraph and hitting enter to make a space. Then click the “Add Media” button. From the “Upload Files” tab click the “Select Files” button and upload an image from your computer.

Once the image has been uploaded, fill in the metadata on the right that you want.  


Under “Attachment Display Settings” for Alignment, select right. If you remember, in a past video we aligned some images from inside the editor. You can do it from here as well. In the “Link to” dropdown menu select “Custom URL”. In the field that appears below it add “https://wordpress.org/” Now your image will link to WordPress.  Click the “Insert into page button”.

Let’s add a Gallery. Take your cursor and left click all the way down at the end of your content. Hit enter twice to make some space. Then click the “Add Media” button.

Make sure the “Media Library“ is selected then click the “Create Gallery” text link. Left click on all the images you want to include in your Gallery. Then click the “Create a New Gallery” button down to the right.  Once you do that then you can drag and move your pictures around in the order you want them.

In the right hand corner, you can choose how you want to link your gallery. I am going to choose “None”.  You can also choose how you want to display your images by the number of columns. As well as randomize the display order, and image size. I am going to select thumbnail.

When you are done click “Insert Gallery” and you can see the gallery has been inserted.  To edit the gallery, l eft click on it then click the pencil icon in the corner. That will bring you back to the gallery edit page.  

To delete any images from the gallery, click on the image then the X in the upper right hand corner of the image. To add additional images to your gallery, click the “Add to Gallery” text link in the upper right corner. You can select additional images from your media library or upload more.

To add images you uploaded to your gallery, left click on the image to select it. Then click the “Add to Gallery” button.  Add the metadata you want to add then click the “Update Gallery” button. This will take you back to your page, then click the “Update” button on the page. Click the “Preview Changes” to view those changes.  If you double click on any of the images in your gallery it will bring up the full sized view.

Check out ourWordPress Beginner Tutorials Series on our YouTube Channel.

Thanks for reading - Have a Great Day!

Drew & The Webstop.net Crew