Join Morten Rand-Hendriksen for an in-depth discussion in this video Adding images from other sites, part of WordPress 4 Essential Training.
- At the beginning of this chapter I said there are two groups of media content you can add to your site, local content where you upload content into WordPress like we've done so far in this chapter, and embedded content. Now we're going to look at embedded content starting with images from other sites. When you add an image to a webpage you're not actually adding the image to the page. Instead, you're adding a code reference that tells the browser where the image file is sitting. Then the browser will take the page, cut a hole in the page, and then grab the image file and place it inside that hole.
That means you can add an image to your site even if the image was not uploaded to your site. However, there are some restrictions to this which I'll address a little later on in this movie. So let's look at how this is done in WordPress using a very common scenario. Let's say you have a bunch of images and you've uploaded them to an image hosting site like Flickr. Now you want to use one of those images in a post or a page. You can do that but you have to follow the guidelines for Flickr and you have to do it in the right way. So the first thing we need to do is go to WordPress, go to the post and then edit the post, and then we're going to follow the exact same procedure we did when we added regular images.
So I'll scroll down here and find where I want the image to appear. I'll add a new line and then click Add Media. But instead of choosing Insert Media here and Upload Files or choose from the Media Library I'm going to go to the left hand side and choose Insert from URL. Here I can enter a URL to any type of media content. WordPress will figure out what that is and then give me more contextual options. So in this case I'll go back to Flickr and get the URL to the image file itself and I do that by clicking this Download button in the bottom right hand corner.
Selecting view all sizes. Then I need to define the size. I'm going to check the medium 800 size. Right click on the image, copy the image URL, go back to WordPress and paste it in. Now WordPress will go and check out what this file is and figure out, "Oh, this is an image." So here's a preview of the image. I can add a caption. Then I can add an alternative text. And just like with any other image I can choose an alignment for the image.
I'm going to set that to center. And also add link. Now here's the thing. Because we're grabbing an image off Flickr we have to follow the Flickr guidelines for how you can input images. And the Flickr guidelines for images stipulate two things. First of all you have to follow these specific creative commons license that's attributed to this image. So in this case the creative commons license for all of my images is share like with attribution meaning you can share them but you have to give proper attribution and you can't earn money from them. So I have to give proper attribution for the image.
I'll do that by going in here to the caption and saying, "By Morton Rand-Hendriksen." This has to be in the caption so it's visible. It's not enough to give attribution just in the alternative text. And then I also have to make the image into a link that points directly at the image page inside Flickr. So I'll go to the page, grab the URL, go back to WordPress and choose Link To Custom URL and then paste in the URL for the image page. Now that all that's done and I'm following Flickr guidelines I'll click Insert into Post.
The image now appears in my post just like any other image. I can click on it to get the tools to change alignment. I can also edit the image information so I can edit caption, alternative text, alignment, and where it links to, but I cannot edit the image size because the size is controlled by Flickr and I also can't replace the image with something else. Finally because I'm using the link to point somewhere else I'm going to check this open link in new window or tab under Advanced Options. Click Update.
Scroll to the top. Update my post and go and view the post. And if everything works correctly you'll now see the image appear just like any other image in your post except this image lives on Flickr. And this will work just fine as long as the image is actually on Flickr and Flickr is up and running and it'll take some of the load off of your own server because you're now pulling content from someone else's server. Now that you know how to use images from other sources I'm going to caution you against doing this too often because if you want to use images from other sites on your site you have to follow strict guidelines about attribution and ownership.
And this can be a legal quagmire. One of the challenges of publishing content on the web is that even though everything is available to you you can't do whatever you want with what you find. Yes, you can find any image you want on the web and either embed it as I just did in this example or download it and upload it to your site. However, unless you have the explicit permission of the right holder to do so you are not legally allowed to use that image. Rather than dive into the legal complexities of right ownership let me give you a simple rule to follow.
Use only images that you either, one, took yourself, two, paid someone to take for your, or, three, have the explicit written permission of the rights holder to publish. In all other cases do not use the image. This may sound extreme but it may save you from costly legal battles in the future. And the great thing is there are millions of photos online you can use with permission as long as you provide proper attribution. Many photographers now publish their photos under what's known as the Creative Commons License or CC License for short.
The CC License grants everyone the rights to use photos posted on sites like Flickr provided they follow certain restrictions. If we go back and look at my photo for example you'll see it's published under CC by no meaning you can use them as much as you like as long as you provide proper attribution and they are not used for commercial purposes. That means you can add them to your blog as long as you add a caption saying I'm the photographer and you are not earning money by displaying my image. If you want to learn more about creative commons and how to use images legally, I suggest you go check out creativecommons.org and look at the different types of licenses.
So to wrap it up use your own images or pay someone to take your images, and if you need to use an image you find online ask for the rights to do it first and you'll be safe.
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