How The WordPress Media Library Works — 2018

 The WordPress Media Library Has Become So Much More Than Just An Image Manager

Good photos, logos, icons and other media on a site are key to a website’s appeal, popularity and conversion rates. This month’s Austin WordPress Beginner classes continue our “Back to WordPress Basics” series with an in-depth review of the WordPress Media Library. The class discussed uploading media in pages and posts, including the media settings, size options, as well as default image sizes – resizing images, creating thumbnails and the value of the alt tag and captions for both Accessibility and SEO.

The presentation also demonstrated how to use the WordPress built-in image alignment features and help attendees understand how images interact with the text; and will include wrapping text around images, changing margins, padding and borders around the images within the content and when and how to use the ‘Featured Image’ option. Photoblogs and Galleries were also be discussed as well as copyright-free sources for images. We kept the focus of this class on native WordPress functionality rather than third-party plugins.

SomeWordPress Media Library Basics

The WordPress Media Library contains all the files you’ve uploaded to your WordPress site, with the most recent uploads listed first. When we discuss uploading media into the WordPress Media Library, remember media can mean images (.jpg,.gif, .png), video files, audio files, even PDFs and other document types. Typically WordPress users upload and insert the media into the content when they are producing a Page, Post or Podcast.

Types of Media

Media files you can upload to use on your WordPress site

• Images – .jpg, gif, .png
• Video – .mp4, .m4v, (.mpeg-4, .mov (QuickTime), .wmv (Windows Media Video)
• Audio – .mp3, .m4a, .ogg, .wav
• Document – .pdf, .doc, .odt, .psd, .xls, .xlsx

There Are Several Types Of Media Sources

DYI — If it is within your skill set and you have the time, you can create your own media under your personal copyright. Many successful Bloggers have harnessed the capabilities of their mobile phone to capture images, record podcasts and produce instructional videos. It has never been easier to produce your own quality media.

Use Fee-Based Image Sources — There are dozens of reputable vendors for images, film clips and audio resources. When you purchase permission to use their material, please pay close attention to their ’Terms of Use’ and follow them carefully. You can use a simple Google search “Music for Podcasts” and find dozens of both fee-based and some open sourced audio files

My Favorite Sources For ‘Fee-Based’ Images Are:

• Shutterstock – https://www.shutterstock.com
• iStock – http://www.istockphoto.com/
• Adobe Stock – https://stock.adobe.com
• Dreamstime – https://www.dreamstime.com

Best 2018 Sources For Free Quality Stock Images

There are many free online sources for images. Again it is critical that you read the Terms of Use Carefully and pay attention to usage restrictions. Many of the ‘Free-Use’ sources have attribution requirements IE: This Photo is used with permission from, I am the Photographer.  I have included a list of my favorite free image resources.

Pixabay – https://pixabay.com (my current go-to)

Pixabay features one of the biggest collection of free stock photos and illustrations online. It is packed with well over a million public domain images – not only photos, but also illustrations, vector graphics, and even a handful of videos. Its selection of landscape photography is particularly strong.

Unsplash – https://unsplash.com

Unsplash offers amazing images from both professional and semi-professional photographers. The site is a well-curated collection of beautiful photos donated by skilled photographers.There are fewer images than you’ll find on As with all the stock photography sites here, it’s not necessary to credit the photographer, but Unsplash notes that it’s nice to add a simple credit with a link back to their profile as a courtesy.

Gratisography – https://gratisography.com/

A collection of fun and surreal photos that are a quirky collection of pictures by talented photographer and graphic designer Ryan McGuire. It’s not essential to credit Ryan when you use his work, but he appreciates it if you do.

Pexels- https://www.pexels.com

Pexels provides high quality and completely free stock photos licensed under the Creative Commons Zero (CC0) license. All photos are nicely tagged, searchable and also easy to discover through our discover pages.

Negative Space – https://negativespace.co

Free stock pictures from up-and-coming photographers. Anyone with a camera is invited to contribute which aims to give amateur photographers a platform to share their work with the world and support fellow creatives.

Flickr – https://www.flickr.com

Flickr is an image sharing website where people upload their images and add in a license. Using the Flickr “advanced search” option, you can find images based on these licenses. You need to search for images with a “Creative Commons (CC)” license. This will give you the photographs which are legally allowed to be used for commercial and non-commercial purposes.

The Best And Last Free Source I Want To Share With You Is Creative Commons

Creative Commons provides free, easy-to-use legal tools that give everyone from individual “user-generated content” creators to major companies and institutions a simple, standardized way to pre-clear usage rights to creative work they own the copyright to. CC licenses let people easily change their copyright terms from the default of “all rights reserved” to “some rights reserved.” You can review the Creative Commons images and possible usage restrictions and start your Creative Commons Media search here –https://search.creativecommons.org/

Understanding The Creative Commons Licenses

The Creative Commons copyright licenses and tools forge a balance inside the traditional “all rights reserved” setting that copyright law creates. Our tools give everyone from individual creators to large companies and institutions a simple, standardized way to grant copyright permissions to their creative work.

Ask For Permission

If you notice the perfect image and would like to use it on your site, sometimes you can track down the owner and get WRITTEN permission to use the image with their required attribution. Never use an image without permission. If you place an image on your site, without the permission or not within the usage agreement, the copyright holder can issue a “Take-down’ notice.  A takedown notice is the first step in a legal action that will probably cost you time and money.

Why Do I Need Images On My WordPress Website?

Let’s start with the easy stuff…images bring a site to life. They communicate a thought, a mood, an action in seconds before the site visitor reads a single word. Our brains process visual content faster and retention of this visual content tends to be higher as well. There are also tactical reasons to use images on your site. More and more modern themes are using images as a visual index of the blog or podcast.  An effective ‘White-Hat SEO Best Practice is using images to promote your site on Google Images.  Naming images with descriptive keywords in the Alt Tag and the Description options in the media library = is another way to lead readers to your site.

Using The WordPress Library

To visit your WordPress Media Library, expand the Media menu from the WordPress Dashboard. The Media Library page will show all of the media items you currently have in your media library. To add a new media item to your library, click the ‘Add New’ link. From here, upload a new image. Once your image has been uploaded, you’ll see it has been added to the library.

Editing Images In The WordPress Library

The WordPress media library gives you the ability to edit images easily. To edit an image, click on the image, then click the ‘Edit Image’ button. That will open a field that allows you to crop, rotate, flip or scale the image. For example, you can rescale this image and then click the ‘Save’ button, then click the ‘Update’ button.

Using The WordPress Media Library Multi-File Uploader

There are times you may want to upload several image files at once. In that case, you can easily switch to the multi-file uploader, then just drag and drop multiple files here to be added to your WordPress Media Library.

Adding Images To WordPress

Determine where you’d like to insert your image in your post, place your cursor there and click. Above the Post editor toolbar, you’ll see an Add Media button. Click the Add Media button and you’ll see the Insert Media box. If you do need to upload Media, even if that Media is not related to a Post or Page, then you need to use the Media Add New Screen. Your WordPress site uses the media library to store all of your media like images and videos. From this box, you can choose to either upload a new file or use an existing file in from the media library. To upload an image, click the Select Files button. Find the image you’d like to use and click open. Now that your image has been uploaded, you’ll see it has been added to the media library. On the right side of this box, you’ll see the attachment details for this page. Here you can change the Title, Caption, Alt Text and Description. You can also choose the alignment of the image (such as center, left or right), where the inserted image should link to, the actual URL of the image and the size of the image.  Make sure the image has a checkbox and click the Insert into post button.  Now you’ll see your image has been added to your post. If you click on this image, you should see an edit box above the image. If you click the pencil icon, you’ll now see another box open for editing the details of the image. Here you can change the size of the image based on percentages (which can be a handy tool for resizing) or you can update the title and alternative text. You can also select this image to link nowhere or to link to the actual image file.

Pro Tip #1

• Conform to the exact measurements indicated by the theme or plugin specifications for fixed sized elements like sliders.
• For standard website display, make sure your resolution is set at 72 dpi.
• However, if you may need high resolution (220 PPI, 264 PPI or 326 PPI) for Retina- display devices.

Pro Tip # 2

• Common image file types are JPEG, JPG or PNG
• Use JPG for better compression/faster page loads
• PNG is generally used when a transparent background is needed such as a logo

Pro Tip # 3

• Add Meta-Information to the WordPress Media Manager to Optimize SEO
• Having your images indexed by search engines helps get traffic to your site
• Be sure to take the time to correctly label each image for effective SEO
• Media Manager makes image optimization easy

Pro Tip # 4

• Keep SEO Meta Information In Mind When Editing Media
• Insert keyword-rich words in the Title, Caption, Alt Text, and Description.
• Separate words in the Title using spaces not like — dontdothis.jpg
•  Search engines, such as Google, do not know what is in your image (yet).
• They rely on your filename, titles, alt, and descriptions to index your picture

Pro Tip # 5

• A Word About the Importance of Site Accessibility
• Using descriptive ALT tags helps web users who might be visiting your website via an Accessibility platform such as a screen reader.
•  A visually impaired visitor to your website will not be able to see your images, but the screen reader will tell them what it says in the ALT text.• A good alt tag of this image might be: “Screenshot of the WordPress 4.3.7 Media Library Screen showing some of the available images in the Library”

Using Advanced Settings

If you click the advanced settings tab, you’ll see the URL of where the image file is hosted on your site, the actual width and height of the image in pixels, the CSS Class, styles and image properties that add padding around the image.

Image Management

Return to the image in your post. The next icon in the upper right corner will delete the image out of the post.

Creating Galleries

• If you click the Add Media button again, you’ll see the same insert media box.
• On the left side of this box, you’ll see options to create a gallery and set the featured image.
• Once you have more images in our media library, you’ll be able to add an entire gallery of images into the post.
• After clicking on “Create Gallery”, click on every image you want to be in that gallery.
• You can always add more images later. You can also remove images if you change your mind.
•  Click the “Create a new gallery” button to go to the next step – Edit Gallery.
•  In this edit screen, you can change the size of the images, the number of columns of the gallery, and where (or if) the images link to. The “Insert Gallery” button adds it to your page or post. Once a gallery is added, clicking on it lets you edit or delete it.
•  Once a gallery is added, clicking on it lets you edit or delete it.

Adding A Featured Image

• The featured image of the post is sometimes used by your WordPress theme.
• Go ahead and choose this image as our featured image and return back to the post editor.
• Now, you can preview the post and see that your image has been added.
  MEDIA LIBRARY GRID VIEW Filtering Options —At the top of Grid View, you can filter the media by media type and date:
•  Filtering Options —At the top of Grid View, you can filter the media by media type and date:
• All media items —This drop-down allows you to select, by media types — such as Images, Audio and Video or Unattached to any Posts nor Pages, which Media are displayed in the Table of Media. By default, “All media items” is selected and all of your Media are displayed.
• All Dates —This drop-down allows you to select, by date, which Media are displayed in the Grid View. By default, “Show all dates” is selected and all of your Media are displayed.
•  Search box —you can enter a word, or series of words to search and display all the Media meeting your search words. The search results will be updated as you type.
  DELETE MEDIA To delete media items, click the Bulk Select button at the top of the screen.
•  To delete media items, click the Bulk Select button at the top of the screen.
•  Select any items you wish to delete, then click the Delete Selected button.
• Clicking the Cancel Selection button takes you back to viewing your media.

Attachment Details Changes Its Appearance And Information By Meda Type

• Filename – The name of the media file
• File type – The MIME Type of media file
• Uploaded on – The date when media file was uploaded
• File size – The file size of the media file
• Dimensions – (Image files only) The dimensions of image media
• URL – Read-only display of a direct link to the media file.
•  Title – The name of the media. A title is often shown on attachment pages and galleries if themes or plugins are designed to display it.
• Caption – A brief explanation of the media.
• Description – An explanation of this particular media.
• Alt Text – (Image files only) The alt text for the image, e.g. “The Mona Lisa” to describe the media. Used for accessibility.
• Artist – (Voice files only) Singer, composer or producer of this media.
• Album – (Voice files only) Album title that includes this media.
• Uploaded By – author who uploaded the Media.
• Uploaded To – Title of the Post or Page that contains this Media. Click on the title to view that Post or Page in an edit Screen. If the Media was unattached to any Post or Page, this line does not appear.
•  View attachment page —shows the media in a simulated view of how the image would look when displayed in your Theme • Edit more details —displays the Edit Media Screen. See the Edit Media for details on editing Media information
• Delete Permanently —deletes the media. • Also, image files have Edit Image button at the lower left

TheWPATX Beginner’s How to Use the WordPress Media Library Media -2018. This Meetup will with Demonstrations of the various features we discussed and a  Q&A.

After Class Resources

Media Library Resources

• The Ultimate Mega Guide to Using Video With WordPress
• Image SEO: Optimizing images for search engines
• Image Optimization
• Using the Media Library in WordPress
• How To Find Free Images For Your Blog Using Flickr

WordPress Community

 Nick and I urge you to join and perhaps contribute to the Austin WordPress Tribe by volunteering to take notes for our wpauston.com website, present at WPATX meetups or helping with our annual WordCamp. You can always find the current class schedule at https://www.meetup.com/austinwordpress/

We look forward to seeing you at an Austin WordPress Meetup soon.

How The WordPress Media Library Works — 2018 Slide Deck

I hope these class notes help. I have included a link to the class Slide deck below. I’m sorry if the transfer from Keynote to PowerPoint format sometimes does odd things to the headers and some images.

Follow me @sandi_batik / @WPATX /  Contact me at: handsonwp.com / LinkedIn  https://www.linkedin.com/in/hsandrachevalierbatik