Now that we’ve covered how to create a blog post, it’s time to take a closer look at working with images in WordPress. While the last post included some information on adding images to your posts and pages, you might be wondering what else you can do with them.
In this post we will explore the WordPress Media Library, in order to help you understand where your images, and other media files, are stored once they are added to your website. We will also look at how you can carry out basic editing on your images, including changing their size with the scaling or cropping tools, as well as rotating and flipping them.
Finally, we will cover how to add image galleries to your posts and pages. This feature of WordPress makes it easy to insert a selection of images into a post, and then configure how they are organized. You can also control what happens when a visitor clicks on one of the images in the gallery.
If you want to get a better understanding of how WordPress handles images and other media files, as well as what you can do with them, this guide to the Media Library will get you up to speed.
The WordPress Media Library Explained
Every WordPress website has its own media library. Each time you add an image to a post, page, or elsewhere on your website, it is automatically added to the media library. This library of media files, such as images, video, audio, and other items, can be found under the Media item on the sidebar menu of your WordPress website’s admin area.
Once you’ve opened up the media library, you can then change the view from either list or grid layout. You can also filter the items by type or date, as well as searching the library to specific files.
Inspecting Items in the Media Library
Clicking on an item in the media library allows you to inspect the file and find out more about it. The attachment details screen displays information about the file. This includes its name, type, upload date, and file size and dimensions.
You can also see which post the image was uploaded to and therefore, where it is being used on your website. The URL field on the attachment details screen displays the direct link to the file. This can be useful if you want to manually link to the media file from one of your posts or pages, or even externally from your website. Examples of this could be in an email or social media post.
By default, every image and other type of media file that gets uploaded to your website, also gets its own attachment page. This is a page on your website that includes that file, as well as some other basic information about the file. When inserting an image or other media file into a post or page, you can choose to link to this attachment page, or simply display the image.
Adding Files to the Media Library
Although any images, or other media files, you insert into your posts and pages are automatically added to the media library, you can also add them directly to the library yourself. You might want to do this if you’d like to make a number of files available to your co-authors for use in their posts, or you need to link to the files from elsewhere on your site, or link to them externally, without publishing them in a post.
Adding the images directly to the media library is very straightforward. By clicking on the Add New item under the Media sidebar menu, you can then drag and drop them into place. Alternatively, you can click the Select Files button, to locate the files on your computer the old fashioned way. Whichever option you choose, you can select multiple files at once, in order to save time.
Once the files are in the library, they can be edited and inserted into your posts and pages by clicking on the Add Media button on the post editor screen.
Editing Images in WordPress
When viewing the attachment details page for an image, you might have noticed an Edit Image button. Clicking this button allows you to make some basic changes to the image. These basic image editing features include: cropping, rotating, or flipping images.
However, you can also proportionately scale an image to reduce its dimensions, while still maintaining its aspect ratio. Furthermore, you can also crop an image by dragging the cursor over it to make a selection. This allows you to select the area to be kept, with the rest of the image being discarded.
After you’ve made any changes, don’t forget to save the image before returning to the media library. Now you can insert the new version of the file in to your posts and pages. Any previous instances of the image used on your website will remain as they did before.
WordPress Media Library Settings
Whenever you upload a new image to your website, WordPress creates three more versions of that file: thumbnail, media, and large. Each of these three versions has a different set of dimensions, or physical size. If necessary, you can change these three default sizes through the Media Settings screen.
As most good WordPress themes are built to work best with specific images sizes, when you change themes, the new theme may adjust these settings. This is to ensure any images uploaded match the design and layout of the theme. Therefore, in most cases, it’s best not to change these settings yourself.
Through the media library settings, you can also set how the files are organized on your server as you upload them.
Cleaning Up the Media Library
As each image you add to your WordPress website is automatically added to the media library, the size of the library can quickly grow. While you won’t want to delete any images that are used in your posts, you may well want to delete the images in the library that haven’t been used on your site.
Thankfully WordPress makes it easy to see all the images or other media files, that haven’t been inserted into a post. By selecting Unattached from the filter drop down list, you can then view all the unattached files in the media library.
These are the files that were either uploaded directly into the media library, rather than being inserted into a post first; or they are files that were added into a post, but that post has since been deleted.
If you are sure you no longer need these files, they can be deleted in one fell swoop, by clicking on the Delete Selected button.
Creating WordPress Image Galleries
As well as inserting individual images into your posts and pages, WordPress also lets you create basic image galleries. This feature gives you the ability to display multiple images, which your readers can then view the thumbnail of. They can then decide whether to click to view the full size image, or not.
After clicking on the Add Media button, instead of inserting a single image into your post, click on the Create Gallery button.
From the create gallery screen, you can select multiple images to include in the gallery. To make the selection, hold down the Ctrl key on your keyboard as you select the images to be featured in the gallery.
After you’ve made the selection, you can click on the Create Gallery button to proceed to the next step. From this screen you can give your images an optional caption, and choose how the gallery is displayed.
When you are ready, clicking the Insert gallery button adds the images to your post. Now your readers have the option of simply viewing the image thumbnails, or clicking on them to full the larger version.
If you want to add or remove images from the gallery, you can select the gallery from the post editor, and then click on the pencil edit icon.
Now you can continue to work on the image gallery, before clicking the Update gallery button to reinsert it into your post or page.
Conclusion
Hopefully you’ve now got a good understanding of how WordPress stores and manages the images and other media files that you’ve added to your website.
Being able to use the Media Gallery and its image editing features, gives you the ability to quickly make basic changes to your media files, rather than opening them up for editing in another application. While these tools won’t replace dedicated image editing software, they can certainly reduce your reliance on them for basic tasks.
Using WordPress image galleries can also be a handy way to work with images more effectively on your website. Working with image thumbnails, which automatically link to larger versions of your photographs and other images, can help your pages load faster, while also allowing your visitors to see more of your media content, on one page.
If you have any questions about working with images in WordPress, using Avada with WordPress, or another features of this software, please leave a comment below.
The Avada theme seems to create about 11 versions of an image uploaded through the media interface. Is there a way to reduce that?
Hi Todd,
The images are generated to be used for different areas of the theme and shortcodes. We crop the full image size to use it for those areas.
You can delete them from functions.php from the theme, remove add_image_sizes call, but please note, that full size image will be used when those sizes are not found.
Thanks!
Hi there.
I’m trying to remove the add_image_sizes call from the functions.php theme file, however I cannot locate this cal in the file. Has something changed?
Hi David! Open up a support ticket and our team will be able to help answer that. Thanks!
Hello, Joe! Great post, especially for beginners.
I have a question: I have my Avada downloaded on WP and in the Media Library I don’t see Image Gallery function.
Any idea?
Also, since it was suggested in your post not to mess up with default image sizes (Media Settings), how I can be sure that my cropping and resizing is absolutely ideal for fastest page loading and SEO optimized?
Thank you!
Hi Ella!
I can answer this one for you … when you are on a page or post the gallery option will show. Go to any page or post or create a new one, then click the “Add Media” button. When the popup window shows, you will see “Create Gallery” on the left hand side.
Thanks!
A great plugin to help work with media once your library gets larger is this, which adds category functionality to the media library (just like posts you can add and categorize) and it adds a new dropdown to your filtering in the media library and popups when working inside posts and pages: https://www.de-baat.nl/WP_MCM
Thanks for the suggestion, I will be sure to take a look at that plugin.
Joe
Can you use the same upload media file in two or more product pages?
The images that I have uploaded in the media library are suddenly no longer visible. When I upload new ones, they also do not feature. Before they were. Does anybody have an idea what could be wrong and what I van do about it?
Hi Gerry!
This sounds like a config issue of some kind, or a plugin conflict maybe. If you are using Avada, our support team can assist, Signup and post a new ticket with these steps: http://theme-fusion.com/avada-doc/getting-started/free-forum-support/ If you are not using Avada, please contact the theme author you are using.
Thanks!
I am having an image upload error. Any ideas.
Hello!
I would recommend searching on google for the exact error you receive to find if it is common or not with a solution. If you are using Avada, please submit a ticket for us through our support system and our team can check: http://theme-fusion.com/support-ticket/
Thanks!
What do those little buttons bellow “Description” do? (such as “b-quote” and “pull tags”) Thank you!
Hi ..
thanks for a very useful post for beginners …
can you please detail out difference between save as a draft and publish feature and how to finally publish the blog once editing is done. ‘
Hello! Save as a draft will keep the post hidden to your viewers, only you or other admins of the site will be able to view it when logged in. Publishing the post makes it live on the web and viewable to anyone who visits your site.
Hope this helps!
I have used all of the space available for my media library, what can I do now?
Hello! You should contact your host provider and see what they can do, most likely you need to upgrade your available server space.
Hi!
In our workflow we upload images to the media library and then use them in slides for the Fusion slider.
Despite being used in the slide(r)s, these image files still show up as ‘unattached’ in the library, which makes it a pain (= virtually impossible) to clean up the library by periodically deleting the really unused files.
Is there any way to make them display their attachement to a slide/slider?
Thanks!
If they are attached to a FDS through the featured image box, they should show as attached. We can take a look for you, please submit a ticket through our support system.
Thanks!
Thanks Luke (and Ammar from Avada Support). The suggested workaround for this ‘WP-gotcha’ does work. Thanks again for your time!
Fantastic, happy to hear it!
Hi Luke,
I have the same problem with my media library – would you mind posting the solution you got from Ammar?
THX
vegaa
My request refers to user “webweber” August 17,2015. TXH vegaa
Hi Leonardo
Here’s Ammars reply:
>>>
If you first upload the media to your library and then assign it to your Fusion Slide. It will come come up as Unattached..
If you upload the image directly to the slide from the Featured Image window, It will NOT come up as Unattached..
So you need to assign the images directly to your Fusion Slides to make them not appear as unattached.
>>>
this workaround does work. But of course it would be nice if we could do it the intuitive way (use files that are already in the media library)
I find the ML confusing and difficult to use when I want multiple versions/shapes/sizes of an image. Can you please help me understand how best to do it so I have easy use of different shapes and sizes of the same original image? I will ask my question in different ways, as it is difficult to explain.
I have one master image that is 4:5 and want to use it like that AND I want to crop a 4:1 version and have that available for a slider, but I don’t want to lose the flexibility to create other crops of the same image and use them in multiple places. Do I have to create my cropped versions in PS and then upload all of them? If so, how do I tell them apart when the ML doesn’t show the shapes?
Example: I have put an image 2000px square in the media library and placed it on a page. I also want to use it in a Revolution Slider at 1400px and have a 4:1 aspect ratio version for a slider that uses only 1/4th of the image height. And I want to have a 250px square version. I want to have flexibility in using the image in other spots at other sizes and shapes.
I understand that prior uses of the image are maintained. However, the media library shows the most recent cropped version. If I want to use the earlier larger version and recrop it in another configuration, how is that best done?
I’d also like to know if there is a plugin that makes it possible to see the shape of the photo (I have several in different shapes and sizes).
Hi @Larry, this may be the dummy solution, but it should work immediately – see below. I add my +1 for the solution you are after, which is getting a ‘real’ UI representation of the image aspects/proportions on the ML. anyway:
create crops in either PS or wp crop tool.
rename them like:
base.jpg original at 1/5 ratio
base_c4.jpg for 1/4 crop
base_slide1.jpg for the slider crop etc’
base_sq_940.jpg for a square 940px image
you can then sort them easier by name/search for “base” and know it’s the same image
the other way round which can further complex life but can bw right for some case is creating folder structure for each ratio or each standard size you need and place the image you have cropped with the same name in that folder.
Question/Situation- I have a standard 600×900, 321kb photo that I’ve uploaded to the Media Library. However when looking at the pic in the ML, I am already seeing that the pic is already cropped. It also show up this way on the web page. Also, I do not have “Cropped Thumbnail” checked. How can I get the image to show up at normal size so I can apply it on the web page normal size? Appreciated any assistance.
It should not be cropping in the ML, its hard to say why its doing that without seeing it. If you are an Avada user, submit a ticket for our support tam and we can check.
Thanks Luke, I’m not an Avada user but was able to figure it out, it’s a setting actually in the picture itself.
ML makes all images fit into the same proportions in the matrix view. Switch to the other view to see the shapes.
I have 16 versions of any image. If I check it on the html code, avada use only one version, 300×225. If I go there to check which file is used, no file is used and media library shows only the original version. If I check in backend (image is used with image frame) there is the original version used. Is there a easy way to clean up the media library, because I have over 5000 images files in different versions (only about 200 or 300 images) now and BackWpup won’t work any more, so I need to clean the library.
Hello! Something seems off here, please open a ticket with our team and we can check it out.
Hi,
I am having a real headache. The media button does not work on one of my pages, Tutor’s page – it’s fine on all the other 25 pages. When I want to add text no problem but the image button does not work. Neither do the text and visual options buttons. I have tried on all different browsers but no avail. I have emptied all my caches .I deactivated all my plug-ins and found that by process of elimination when I deactivated four of them it worked. These four were: Wordfence,Updraft plus,Securi and Yoast seo. I have been told by my web designer that I cannot get rid of these. He tells me that the media button works from his computer. I have tried this now on my iPad and my iMac and the media button on that particular page will not work on either. All he is telling me is that it must be my browser but it must be all of them because I have tried everything. Pleeeeease can you help???
Hello!
Sorry for the delay here. This sounds like a plugin issue or possible hosting issue. I’d contact your host to see what they say, also try to disable all your extra plugins. If you are using Avada, you can submit a ticket through our support system to get assistance also.
Finally found the answers. Thanks
Fantastic, thanks.
How much space do I have in my Media Library? I have uploaded about 24 images and now when I try to upload more I get told that there is an error in uploading.
Hello! This will depend on your server configurations and how much space you have. I’d contact your host to see what is going on, it should be much larger then 24 images regardless of their original size.
I’ve got to say that Avada is proving to be a pain in the butt with regards images. I’m in the process of creating a directory-style website (one wordpress site to replace 12 existing sites) and that will require me importing somewhere around 1200-1400 listings, all with images. Having looked at a freshly imported version of a demo site, I can see that every image imported has 17 variants. I truly do not want 17 x 1400 totally unwanted images giving me a database bigger than the NHS.
I think the solution is to use a different theme when importing data and then try to work out how the hell one stops avada creating file confetti without asking if I want it. Unbelievable..
Brian,
There are not 17, if so then you have plugins doing some of them, Avada has 13 total and those 13 are needed for various parts of the theme (related posts, projects, blog layouts, etc). If we did not do that then the original image size would be used in all cases which kills performance. Generating and pulling the correct image size for the specific area is how it should be done.
If you wish to disable some of those image sizes, you can easily do so: https://theme-fusion.com/avada-doc/special-features/reducing-image-size-generation/
However if you do that, please understand the consequences as outlined in the first paragraph I just type.
Thanks
Hi,
Is there a media file manager plugin or plugins that are fully compatible with Avada.
My basic requirement is to organise my images into folders so that images are easier to locate when I am creating a new page or post.
Thanks in advance for any suggestions
Hello!
There is not one that we have used specifically so I cannot say for sure. But in general if you find a plugin you like, it should work with Avada, Try it out, if you have any issues you can submit a ticket here: http://avada.theme-fusion.com/customer-spotlights/
hello,
i have an image in the library for example named bestpic.jpg. the photo url is http://www.mydomain.com/. . ./wp-content/…/bestpic.jpg. i put this picture in a page as a photo or in a slide, whatever.
then i go to the that page and see the image. i right click it and select “copy image address” . i figure the image address is wp.com/www.mydomain.com/. . /wp-content/../bestpic.jpg?w=400.
as you see, my page is getting the image from wp.com. seems my library is loaded to wp.com. why is that? can i change it? can i make it to load the image from my site and not from wp.com ?
thank you very much
Hi mori,
If using Avada, signup and submit a ticket at this link and our team will help: https://theme-fusion.com/avada-doc/getting-started/avada-theme-support/
If using another theme, I’d get in touch with that theme author to find out what is going on.
Thanks
Hi there. So I have a ton of images on my site that I just realized need to be resized. Can I simply go into the Media Library, resize and save? Or do I need to reload them to where they are on my site?
Thanks! Michelle
HI,
Just looking for ways to actually find the original images as I have some whoppers that need cutting down. How do I get to them?
Second question on “Unattached” That function does not pick up images that you are using as a slider, or in a directory listing?
Why would that be?
Thanks
The original images would be on your server, or you can find them in the media library. The second question I am unsure about, I’d ask the theme author of the theme you are using. If it’s Avada, you can submit a ticket here: https://theme-fusion.com/support-ticket/
Hi Joe,
Could you tell me how to CENTER a wordpress media library? I’m using in tabs and nothing is working.
Thanks!
Melissa
Hello,
I’d recommend getting in touch with your theme maker and asking, if it’s Avada, signup and submit a ticket with these steps: https://theme-fusion.com/avada-doc/getting-started/avada-theme-support/
Thanks!
attempting to delete unused photos from the media library, and can not find the “unattached” button. Is it not available in the Free version of wordpress?
Hello!
All WordPress versions are free, so should be the same. I’m not familiar with the unattached button. If you are using Avada, you can submit a ticket and our team can check it out.
Thanks!
Hello Luke,
Thanks for a great walk through of the media library. I have a mystery for you that is not related to Avada, since the site in question is not using the theme.
I’ve rotated an image because the orientation was wrong after uploading. The image was then displayed in a post and in frontend it looks fine. But in lightbox the image is still displayed with the original (wrong) orientation. The issue is the same on iPhones.
Dont the rotate-function in media library affect the files exif?
Hope to hear back soon since I’m quite lost.
Hi Liz!
Thanks for the comment. That is a strange one. Yes it should affect the files from what I know. I could not say without seeing it, but most likely it’s an issue with the lightbox itself, for which I’d recommend getting in touch with it’s author.
Thanks!
I don’t understand.
I thought I purchased the Avada theme because it could help me build beautiful photo galleries and embed video into pages and posts?
If your tutorial is about how to use the basic, native WordPress functionality to build a gallery then what did I purchase the Avada theme for?
Shouldn’t your tutorials show how to use the Fusion Builder and Avada Elements to build beautiful, custom galleries on posts and pages?
Confused.
Hello There 🙂
We not only create articles about Avada, we create articles about WordPress in general, as this one is.
You can learn how to do that with Avada via our docs, wither through a portfolio section, or using something like an image frame, or even the default WP gallery. All themes make sure default Wp functions work, and this article was built to explain how to use it for WP users.
If you have Avada related questions, you can check our support center with docs and videos, or submit a ticket to our team and they will gladly answer: https://theme-fusion.com/avada-doc/getting-started/avada-theme-support/
Thanks!
Hello,
I was trying to replace the an the main image in our homepage and accidentally permanently deleted it. The image still shows up on the front end however it cannot be found in the media library. How can i change the image now? I have read so many tutorials and nothing has helped! Please advise
Hi Mike,
That would either be cache (browser, server, plugin) or there is a second cpy of the image uploaded somewhere. If using Avada, post a ticket for us after signing up for an account: https://theme-fusion.com/avada-doc/getting-started/avada-theme-support/
Thanks
Hello,
I am trying to replace the main image on our website however I accidentally deleted the file in media library. Every tutorial I read does not help. Can you please let me know how can this be done?
Thank You
If I could I would have 🙂 This would depend on your theme, what the “main image” is (that could mean many things), where it’s located at, etc. It’s very specific to your own site and setup and not something we could answer without seeing it and understanding. If you are using Avada, submit a ticket and we will help. If it’s not Avada, go to the theme author and ask, they will help.