0,00 USD

No products in the cart.

Monday, April 12, 2021

The WordPress Media Library: Adding and Working With Images and Media Files in WordPress

Zip's working on writing his first post. But images are so integral to most blog posts, so let's do a brief tutorial on using the WordPress Media Library to upload not only images but files and other media.

Home » WordPress and Blogging » Sloth Makes a Blog » Blog Basics » The WordPress Media Library: Adding and Working With Images and Media Files in WordPress
0
(0)

This tutorial is a basic, beginning, introduction to the WordPress Media Library. We’re not yet going to go over image optimization nor regenerating thumbnails — we’ll get to that in another post.

I’m slowly working with Zip on writing that first post on Slothverse.com. We’ll have the results and a tutorial soon.

One part of writing WordPress posts is adding images. Your posts don’t HAVE to have images at all — but images can make your post stand out and shine, they can illustrate a point, they can add than extra je ne sais quoi to your article.

Working with images in WordPress is a subject that merits a post all to itself. I had planned to write about this subject a bit later, but I realized it warranted adding before we talk about using the WordPress block editor. Images are such an integral part of most blog posts.

A Word About What WordPress Does with Images

I feel that this warrants an explanation as I had a client who just wanted help with understanding WordPress so he could continue to work, with more success, on a project he had already started. I found he was uploading a bunch of the same images in different sizes to his website.

While you may want to do this in a few, specific, cases, most of the time you do not need to do this because of how WordPress handles images:

One image in WordPress turns into many.

When you upload an image to WordPress, it “crunches” your images into several images. The image will still show as a single image in your media library but “behind” that is actually several images. By default, WordPress will have:

  • A square 150px by 150px “thumbnail.”
  • A 300 px Medium-Sized image.
  • A Large image
  • The original.

However, themes may add on more image sizes. Some plugins will tack on even more image sizes. One day, you may find that your website is producing a large bundle of image sizes for every image you upload.

Using the WordPress Media Library to Add an Image

WordPress Media Library thumbnail view

To add an image to the Media Library, click Add New under “Library” in the left-hand menu. If you’re in the Media Library already, you can click Add New from the button on top. Alternately, you can choose the plus sign and then Media from the admin bar.

You’ll then see the upload area (circled in blue) above. Here, you can drag files from your computer. Or you can click the button to open a window to find and upload files from your computer.

From the Media Library screen, you can also search and browse images you’ve uploaded and you can use the toggles (circled in green) to switch between a view with multiple thumbnails or a vertical list view. Doing so provides more information about the images and allows you to bulk delete photos if you’d like.

WordPress Media Library List View
The media library in list view.

The photo above shows list view. Here, you can check off boxes and use the dropdown to bulk delete images, see who uploaded them (if you’re blog is multi-author), see if they’re “attached” to a specific post, view a link to any comments on the media item (if you’ve allowed comments, and see when they’re uploaded.

In the future, when Zip starts using an image optimization plugin, he’ll also be able to acess some information here about image optimization stats for each image.

Image Editing in the WordPress Media Library

If you hover over the image title in list view, you’ll see some links. One of them is Edit. If you click Edit, you’ll end up on a page like this (minus the cute sloth, unfortunately):

WordPress Media Library Image Editing Screen

On this page, you can change the image title, and under the image you’ll note some other settings you can change:

Alternative Text

Also called “Alt Text.” Here it says it’s to “Describe the Purpose of the Image,” and to leave it blank if its purely decorative.

Zip’s lazy, sloth-like inclination is just to leave it blank and avoid the effort of entering alt text for any image he uploads. But he needs to overcome this because Alternative Text is important.

Why enter alt text?

The real use for Alt text is to use in screen readers. If a person with a visual disability is using a screen reader, it will read the alt text of the image to them. It’s an accessibility feature.

Another reason you may want to add alt text is for search engine optimization. Keywords in your images can help to tell search engines what your post is all about and may help you rank for a term. SEO plugins like Yoast can help you know when to add keywords to your alt text — and when you may have gone overboard in doing so. However, it’s often a challenge to describe an image in a way that would work for a screen-reader and include the keywords you want to use. I shudder to think how many of my posts would sound if read by a screen reader.

Caption

A caption, of course, is shown under your image. I often don’t use a caption for images. However, it’s handy if you want to cite an image source. You can also add a caption directly under a picture as you’re creating/editing a post or page.

Description

If you’d like to write a description for your image, you can do so here. When you upload an item to the Media Library, an attachment page gets created for that media item. You can choose to have WordPress show the attachment page for an image or just the image. If you show the attachment page, this is where you’ll see the description.

Then, of course, click update to save your changes. You can also view the image URL on this page — useful later if Zip ever needs to specifically link to the image.

Edit

You’ll also notice an Edit button just under the photo. Click it and:

WordPress Media Library image editing screen

Voila! A page with some editing tools. Now we can resize, crop, edit, and rotate images right within WordPress. I prefer to use other editing tools and rarely use these, but it’s nice to know they’re here if I need to do a small edit on an image I’ve already uploaded.

Adding Images in Your WordPress Post

When you either choose Featured image from the right hand settings menu or add a post via the post block in the post editor, you’ll see a screen like this:

Uploader

You can click the Media Library tab and choose from images you’ve already uploaded, or you can upload things via drag or drop or browsing from your computer just the same way you did from the media library.

What Kind of Images Can I Add to the WordPress Media Library?

Most image file types are accepted by the WordPress Media Library. You can add:

  • .png
  • .jpg and .jpeg
  • .gif
  • .ico

Note that you cannot upload .svg files here. I’ve needed to use .svg files in some projects and had to upload them using FTP or the File Manager in cPanel.

Is the WordPress Media Library Only For Images?

No, the Media Library is NOT only for images. In addition to images, you can add:

Audio and Video Files

Video files, particularly, take up much space. I’d recommend considering uploading to a separate service such as YouTube or Vimeo and then embedding that in your page instead of direct video uploads (unless the video is for a background video for your page.)

Similarly, if you don’t wish to upload sound files to your media library, you can upload them to Soundcloud and then embed them.

However, the WordPress Media Library does accept the following file types:

  • mp4
  • .mov
  • .mpg
  • .wmv
  • .ogv
  • .3gp and .3g2

Document Files

You can upload files such as PDFs, Word Documents, and such to WordPress. You can then link to them so your site visitor can download them.

If you, however, want your visitor to view a file — a PDF, for instance — directly on your webpage, you’ll need to install a PDF viewer. Several plugins for viewing PDFs on your page are available in the WordPress plugin repository.

You can upload the following document file types to WordPress:

  • .psd
  • .pdf
  • .doc and .docx
  • .txt
  • .xls, .xlsx

There! Now that we’ve covered that, I think we can review the WordPress block editor as Zip gets on with writing his first post.

How many hot cups of coffee does this post or page deserve?

Click on an icon to rate it.

Average rating: 0 / 5. Vote count: 0

No votes so far! Be the first to rate this post.

As you found this post useful...

Care to share?

We are sorry that you found this post to be like a weak cup of decaf.

Let us improve this post!

Tell us how we can improve this post?

Coffee Image for Email Subscribe
Get Caffeinated!

OK, we can't send you caffeine--or even coffee-- but we can send you new content. Subscribe to our email list and get new posts delivered to your inbox. If you don't specify preferences, you'll be signed up for a weekly digest of new posts in all categories, as well as occasional promotional emails and surveys. However, if you would like to customize the frequency and type of content you receive, you can sign up here.

Cheryl
Cherylhttps://www.caffeinejournal.com
Cheryl is a former Occupational Therapist and WordPress enthusiast who became a writer in some parallel universe and occasionally, but infrequently, publishes things in this one. She writes two blogs (or is it three) which she won't quit because she knows that blogs, in her case, are like a hydra and if she cuts one off two more will take its place. When she's not doing that, she enjoys hiking, cycling, kayaking (formerly fast, now ebike), messing around with Adobe illustrator, making assorted things, meditating (though she wouldn't call that "like," and reading. She normally doesn't speak about herself in the third person, but she sometimes uses "we" in the royal sense while writing this blog. She lives in Poulsbo, WA with her spouse, her youngest adult daughter, a very old mutt, and a Siamese cat.
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments

You may also be interested in:

Recently Popular

Share this
Send this to a friend