Join Morten Rand-Hendriksen for an in-depth discussion in this video Moving an image to a new location, part of WordPress 4 Essential Training.
- As you start adding images into your content, you'll invariably run into a situation where you either place the image in the wrong place in your content, or when you place the image in what you think is the right place in the content, and then look at it on the front end, you realize hmm, that doesn't look quite right, so I need to move it. Now, this is a fairly common scenario, and it's one that you'll encounter all the time, so I'm going to show you how to move images inside the post. I already have an image in my post, and when I click to Edit my post, you can see it down here.
Now, the rational thing would be for me to able to simply click on the image, and then use my mouse to just click and hold and drag it around. You'll notice I can't do that with this image, and there's a good reason for it. Currently, the image I added has a caption on it, and if we go and look at the text version of this post, you'll see why I can't drag and drop it. So here's the image, the image is wrapped inside an anchor tag, and then we have the image itself, so it says here img, and then blah blah blah, and then we have the URL to the image and everything else, and that's the end of the image, followed by the anchor tag.
But, the image has a caption on it, and the image caption is wrapped inside this thing called a shortcode that you see in WordPress. So here's the beginning of the caption, and down here is the end of the caption. And the reason why we can't move the image right now is because of this piece of code. Because if we move the image, we would move it away from the caption, so then you would have the caption sitting in one location, and the image sitting in another location, and that simply will not work. So here we have two options, you can either do it the hardcore coder way, which is to simply grab all of this, so the image code, the link, and the caption, cut it out and paste it in somewhere else, but then you can't actually see what's going on.
So I have a trick for you that's much easier. Go to where the image is in your post and click on it, then go to Edit the image, find the caption field, highlight the caption, and use Ctrl or Cmd X to cut out the caption, then click Update, so now the image doesn't have a caption. Now that it doesn't have a caption, you can grab the image and move it around. So now we can move it to whatever location we want it to appear, so maybe up here. The image will now appear here instead, then I can go re-Edit it, paste the caption back in, Update again, now the caption is there, the image is there, everything is right, click Update, View the post, scroll down, and then I see, hmm, that actually looks worse then what it was before, so I'm going to move it back.
So I click Edit Post, scroll down, find the image and click on it, click Edit, find the caption, cut it out, Update, and grab the image, drag it down to where I want it to appear, just clean up a little bit, like that, then click the image, paste the caption back in again, Update, and Update my post, View the post, and now everything looks correct.
So, if you have regular images, and you don't have a caption on the image, then you can simply grab the image and drag and drop it around inside your editor. If you do have a caption on the image, you need to first cut the caption out, then reposition your image, and then paste it back in again. Or, if you're lazy, like I am sometimes, and you don't want to do all that extra work, you can also simply click on the image, remove it, click somewhere else in the editor, Add Media, select the same image again, and you'll notice that all the information is saved over here on the right-hand side, and then click Insert into post, image is added back in, and you just reposition it where you want it to appear.
Update, View the post, and you're good to go. So, in the end, you have a lot of options. You just have to figure out which one works best for you.
Note: This course covers an older version of WordPress, which features the Classic Editor. Watch this course only if you are using the Classic Editor plugin or using WordPress 4.9 or earlier. Otherwise, watch WordPress 5 Essential Training, which covers the new Block Editor experience.
- Creating posts and pages
- Formatting text
- Publishing and scheduling posts
- Adding images, audio, and video
- Bulk editing posts and pages
- Customizing themes and menus
- Using widgets
- Extending WordPress with plugins
- Editing users profiles
- Configuring settings
- Getting new readers
- Keeping WordPress up to date and secure