We will walk you through the WordPress Media Library to help you learn effectively how to add images and media elements to your WordPress. Images and media files are very important in WordPress.
Now, talking about media elements in WordPress or any other site, it is divided into two main categories. One is “Local Content” which is uploaded to the site and the other one is “Embedded Content” which is stored somewhere else. It links up like the attachment to the post or page where it was added.
Now, you click on “Add Media” when you upload and add an image to the post, you are using the attachment post data to display the image in your post. Once you create that attachment post, you can add the same image with the same data to other posts as well. Each image lives in its independent attachment post so necessarily, so you don’t have to re-upload the images again.
Now, when you upload an image, WordPress automatically saves that image and also creates many different versions of that image for you to use like a large image, a medium image, and a square thumbnail.
You can choose the size of the image you want to add to a post. WordPress will provide the correct image file for the size you pick.
How to add images to posts and pages in WordPress?
It is important to understand how to add images to posts and pages.
You can try this by adding some images to the newly created post. There are different ways of adding images to your posts. You can add images to posts and pages directly from the content editor.
First, you need to go to the editor and where you want your images to appear. You need to place your cursor in the empty field and create a line where you want your image to go. You can now click on the Add Media button at the top, and this opens your insert media panel.
Now, by default WordPress will always open this panel in the media library mode that shows off all the media items that you have previously uploaded into WordPress. As you start building out your site, you’ll have tons of materials there, and the whole idea is if you upload an image once, you can then use it again and again on different pages. This is the benefit of having a media library. To upload a new file, you can click Upload Files, and from here, you can either click the Select Files button to open a file explorer on your computer, or you can simply navigate to the folder that has the images you want, grab the image you want, and just drag and drop it into the insert media dialog.
Once the image is uploaded to your site, you can switch back to the media library where you can see the image or images you just uploaded get highlighted, and then on the right, you get all the information about your attachment. At the top, you will see a preview of the entire image followed by the file name. Then you will have the date it was uploaded, and the size both in terms of file size and physical size. If you want to edit your images, you should do it before you upload them to WordPress. If you want to delete the image permanently, you can also do so. If you wipe it out completely, it will no longer be in WordPress. WordPress also indexes your image. You can also select the image sizes.
You can now click the Insert into the Post button which inserts selected images to selected places in the post content editor. We can see images in small sizes with a caption. Once you click on the image to style and the original image, you can update and see the changes in the front end.
Using featured images
In addition to adding single images to the content of the post itself, you can also associate a single image with your post and that single image can be displayed outside the context of the content itself. These are called featured images. They play a vital role in both your WordPress site and also when your WordPress content gets shared on social media.
If you go to the right-hand panels and scroll to the bottom, you can find this Featured Image panel. The panel has only one button that says Set featured image. As you click the button, this opens a different version of the media uploader. So here you see you can only Upload Files or select files from your Media Library. So you can click Upload Files, go to my folder with images, and grab the image that you want to upload.
Now instead of this image being added to the content of your post, you can see it appeared in the Featured Image panel. This is the preview of what the featured image will look like and if you want to, you can click Remove featured image, take it away, and then add a new one. But if you think this is the correct one, you can click Update. You will see some changes as you go and view your post.
Having a featured image in the post speaks more than your words. It speaks up for your whole story. It has the power to convince readers to go through your posts.
The featured image is displayed outside the post at the top. And this is important to remember, different themes will display featured images in different ways. Some will crop them, some will leave them in their standard format, some place them at the top of their post, some place them to the side of their post, and some even place them in the header of their post, it all differs between themes.
The featured images should be displayed above the title of your post. But that’s not the most important part of the featured image. If you go to the front page of your site now you’ll see the featured image appear at the top.
Now you can look at embedded content starting with images from other sites. When you add an image to a webpage you are not adding the image to the page. You are adding a code reference that tells the browser where the image file is. Once the image is added to the page, the browser will take it, cut a hole in it, and then takes the image file and places it inside that hole. So basically, you can add an image to your site even if the image was not uploaded to your site.
You need to know how this is done in WordPress using a very common scenario.
For example, if you have a bunch of images and you can upload them to an image-hosting site like Flickr.
You can do that but you have to follow the guidelines for Flickr and you have to do it in the right way to add images in WordPress.
You can follow the same procedure as when you added regular images. You can find where you want the image to appear. You can add a new line and then click Add Media.
But instead of choosing Insert Media there and Upload Files or choose from the Media Library you can go to the left-hand side and choose Insert from URL. There you can enter a URL to any type of media content.
So, in this case, you will go back to the Flickr site, search for the item and get the URL to the image files itself and you can do that by clicking the Download button in the bottom right-hand corner. Select view all sizes and define the size. You can check the medium 800 sizes. 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 the image. You can see a preview of the image. You can add a caption. Then you can add an alternative text. And just like with any other image, you can choose an alignment for the image. You can add a link.
The image now appears in your post just like any other image. You can click on it to get the tools to change alignment. You can also edit the image information so you can edit the caption, alternative text, alignment, and where it links to, but you cannot edit the image size because the size is controlled by Flickr and you can follow the same procedure as when you had added regular images. You can find where you want the image to appear. You can add a new line and then click Add Media. But instead of choosing Insert Media there and Upload Files or choose from the Media Library you can go to the left-hand side and choose Insert from URL. There you can enter a URL to any type of media content.
So in this case you will go back to the Flickr site, search for the item and get the URL to the image files itself and you can do that by clicking the Download button in the bottom right-hand corner. Select view all sizes and define the size. You can check the medium 800 sizes. 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 the image. You can see a preview of the image. You can add a caption. Then you can add an alternative text. And just like with any other image, you can choose an alignment for the image. You can add a link.
The image now appears in your post just like any other image. You can click on it to get the tools to change alignment. You can also edit the image information so you can edit the caption, alternative text, alignment, and where it links to, but you cannot edit the image size because the size is controlled by Flickr and you also can’t replace the image with something else.
After the process is done correctly you will now see the image appear just like any other image in your post except this image lives on Flickr. This will work just fine as long as the image is actually on Flickr and it is up and running. It will take some of the load off of your server as you are pulling content from someone else’s server. Scroll and click update and view posts.
Now even if you know how to use images from other sources, you need to be very careful. If you want to use images from other sites on your site you have to follow strict guidelines about attribution and ownership.
Adding content from YouTube and similar sites
Very good content on the web can be found in audio and video formats. When you find a great YouTube video or a SoundCloud file that matches your topic, you may want to share it on your blog. WordPress and a technology called oEmbed will make your job easier.
Once you find a good video on YouTube, you can add it to your post. You have to copy the URL from the address bar and paste it into your content editor.
Once you have a playable YouTube video inside the editor, you can click on it and it plays, just like any other YouTube video would. You can even click the edit button and change the URL if needed.
This YouTube video will work how you wanted. So no embed code, no fancy anything, you just simply go and copy the URL from YouTube, paste it into the content editor, and it appears.
Not just YouTube but it also finds support on sites like Vimeo, SoundCloud, Twitter, Flickr, TED, and so on.
Now you can click update and view posts.
At the bottom of your post, for instance, you want to add a map to the location of “Kathmandu”. So you can go to Google Maps and enter “Kathmandu Nepal”. Now you have the map location.
On the left sidebar menu, you need to click on the share icon and then you can share a link or embed map. This gives you the option of a Share link, but in this case, if you want an Embed link, click on Embed on Map. Then you will copy this URL into its entity.
Go back to WordPress, and you have to switch from Visual to Text view. Then you go to the bottom where you want your map to appear and you paste it in. This code will go to Google and it will place the map. You can also change some settings like the width attribute, and manual height as per your requirement.
If you now switch back to the Visual view and scroll down, you’ll see something that looks weird but will eventually become the map right there. And then you can click update, and go and view the post, and if everything works correctly, if you scroll down, you will see the full functional map placed within the context of your post. You are not hosting these files. Instead, you’re merely cutting a hole in your site and displaying YouTube or Twitter or SoundCloud, or Google Maps in that hole.
This chapter is explained more in detail in our tutorial videos.
You can find below, the link to our WordPress Tutorial Part 3:
Adding Images and Media elements
We shall talk more about WordPress in our next tutorials and blogs.
For our video tutorials, please subscribe to our Youtube Channel TrilogyDigital Pathshala.