Skip to main content
/3 min read

Adding Images to WordPress

Image Upload Checklist

0/5
Master WordPress at Noble Desktop

Noble Desktop's WordPress Bootcamp teach themes, plugins, and custom site development.

Add images to your WordPress posts to enhance user experience. Visuals are not only great focal points but make your page look great!

Adding Images to WordPress

We’re going to create a post.

Remember, WordPress uses blocks. I want to attach an image that wraps this text around it. To do that, I have to go to Add Block, and the block that I’m adding, in this case, is an image. I can either upload one or go to my Media Library if it’s already there. And if you’re storing your images off-site so that you can save on storage (that all adds up the more you have inside your media folder), you can insert that by putting a link to where that picture is stored. Perhaps it’s on a cloud server.

We’re going to upload this locally to our Media Library. I have nothing there yet, so I’m going to upload it.

I’m going to select the picture that I want. And I’ll open that. When I do, it’s copying it to the Media Library as well as placing it in its own block. I’ve got some choices up top that displays types of available alignment.

I’m going to choose left alignment, but you’ll notice nothing happens right now. I can always go and edit that image, just like I would if I went into the Media Library.

What I’m going to do is resize this image so that the left alignment shows up. Notice that there’s a caption area in this particular theme so that I can input a caption. However, I’ve got this set for left alignment: notice these resize handles. When I move my mouse over them, I get the resize arrow icon. I’m going to shrink this down. Notice that once I do, the text starts wrapping around.

By having left alignment, it tells the photo how I want it aligned with the content around it, but it’s up to me to make sure that it’s the size it needs to be so that the content looks the way I want it to look.

Remember, this is responsive, so it’s not like print design. It’s not going to look precisely like this everywhere, but it gives you a lot more control over what the actual photo will look like in its placement on the scrolled page itself.

Go Beyond WordPress

Take WordPress to the next level and create engaging and responsive websites. The deeper your understanding, the greater your results. We offer the best Web Development & Design Certificate programs. Scheduling is flexible, so start growing your career today!

Video Transcript5 sections

1Full Video Transcript

2Getting Started with Image Blocks

Let's take a look at adding images into WordPress. We're going to be using a post here. Now remember, WordPress works off of these blocks, so I actually want the picture to wrap this text around it. In order to do that, I have to go to add block here, and the block that I'm particularly adding in this case is an image.

Now I can either upload one or go to my media library if it's already there. And again, if you're storing your images off-site so that you can save on storage, that all adds up the more that you have inside of your media folder. You can insert that by putting a link in to where that picture is stored, perhaps it's on a cloud server.