1. HandsOnWP.com @nick_batik@sandi_batik
How The WordPress
Media Library Works — 2018
Austin WordPress Meetup
April 16, 2018

2. HandsOnWP.com @nick_batik@sandi_batik
WORDPRESS MEDIA
LIBRARY
• The WordPress Media Library contains all
the files you’ve uploaded to your WordPress
site, with the most recent uploads listed first.
• Media is typically uploaded and inserted into
the content when you are producing a Page,
Post or Podcast

3. HandsOnWP.com @nick_batik@sandi_batik
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

4. HandsOnWP.com @nick_batik@sandi_batik
TYPES OF MEDIA
SOURCES• Create your own - you
hold the copyright
• Pay for it - you purchase
permission to use
• Ask for Permission -
contact owner and
request use with
attribution
• Free sources - pay
attention to usage
restrictions!

5. HandsOnWP.com @nick_batik@sandi_batik
FEE-BASED IMAGE
$OURCE$
• Shutterstock
• iStock
• Adobe Stock
• Dreamstime

6. HandsOnWP.com @nick_batik@sandi_batik
BEST 2018 SOURCES FOR
FREE QUALITY STOCK
IMAGES• Pixabay (my current go-to)
• Unsplash
• Gratisography (odd but Interesting)
• Flickr
• Pexels
• Negative Space

7. HandsOnWP.com @nick_batik@sandi_batik
INTRODUCING
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.”
• Creative Commons Search

8. HandsOnWP.com @nick_batik@sandi_batik
UNDERSTANDING
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.
• https://creativecommons.org/licenses/

9. HandsOnWP.com @nick_batik@sandi_batik
WHY DO I NEED IMAGES ON MY
WEBSITE?
Images conjure specific emotions and feelings that
complement your website’s content

10. HandsOnWP.com @nick_batik@sandi_batik
IMAGES BRING A PAGE TO
LIFEOur brains process visual content faster and
retention of this visual content tends to be higher as well

11. HandsOnWP.com @nick_batik@sandi_batik
USING THE WORDPRESS
MEDIA 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.

12. HandsOnWP.com @nick_batik@sandi_batik
EDITING IMAGES IN THE
WORDPRESS MEDIA
LIBRARY• The WordPress media library gives you the
ability to edit images.
• Click on an image, then click the Edit Image
button. Now, you can crop, rotate, flip or scale
the image.
• For example, you can rescale this image and
then click the Save button. Now, click the
Update button.

13. HandsOnWP.com @nick_batik@sandi_batik
WORDPRESS MEDIA
LIBRARY MULTI-FILE
UPLOADER
• If you have more than one file to upload at
once, you can easily switch to the multi-file
uploader.
• Just drag and drop multiple files here to be
added to your WordPress Media Library.

14. HandsOnWP.com @nick_batik@sandi_batik
ADDING IMAGES
THROUGH PAGES/POSTS
• Determine where you’d
like to insert your image
in your post.
• 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.

15. HandsOnWP.com @nick_batik@sandi_batik
ADDING MEDIA
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

16. HandsOnWP.com @nick_batik@sandi_batik
ADDING IMAGES IN
WORDPRESS
• 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.

17. HandsOnWP.com @nick_batik@sandi_batik
ADDING IMAGES IN
WORDPRESS• 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.

18. HandsOnWP.com @nick_batik@sandi_batik
PRO TIP # 1
• Name images with descriptive keywords (SEOLove for
Images)
• 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.

19. HandsOnWP.com @nick_batik@sandi_batik
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

20. HandsOnWP.com @nick_batik@sandi_batik
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

21. HandsOnWP.com @nick_batik@sandi_batik
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

22. HandsOnWP.com @nick_batik@sandi_batik
PRO TIP # 5
• A Word About 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.

23. HandsOnWP.com @nick_batik@sandi_batik
ACCESSIBILITY TIP
• 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”

24. HandsOnWP.com @nick_batik@sandi_batik
ADDING IMAGES IN
WORDPRESS
• 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.

25. HandsOnWP.com @nick_batik@sandi_batik

26. HandsOnWP.com @nick_batik@sandi_batik
ADDING IMAGES IN
WORDPRESS
• 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.

27. HandsOnWP.com @nick_batik@sandi_batik
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.

28. HandsOnWP.com @nick_batik@sandi_batik
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.

29. HandsOnWP.com @nick_batik@sandi_batik
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.

30. HandsOnWP.com @nick_batik@sandi_batik
• After clicking on “Create
Gallery”, click on every
image you want to be in
that gallery.
• You can always add
more 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.

31. HandsOnWP.com @nick_batik@sandi_batik
ADVANCED SETTINGS
• In this edit screen you can change the size of the
images, number of columns of the gallery, and
where (or if) the images link to. The “Insert Gallery”
button adds it to you page or post.

32. HandsOnWP.com @nick_batik@sandi_batik
ADVANCED SETTINGS
• Once a gallery is added, clicking on it lets you edit or
delete it.

33. HandsOnWP.com @nick_batik@sandi_batik
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.

34. HandsOnWP.com @nick_batik@sandi_batik
MEDIA LIBRARY GRID VIEW
• Filtering Options —At the top of Grid View, you can filter the media by
media type and date:
• All media items —This dropdown allows you to select, by media type 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 dropdown 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.

35. HandsOnWP.com @nick_batik@sandi_batik
DELETE MEDIA
• 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.

36. HandsOnWP.com @nick_batik@sandi_batik
ATTACHMENT DETAILS CHANGES
ITS APPEARANCE & INFORMATION
BY MEDIA TYPE• File name – The name of 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 media file
• Dimensions – (Image files only) The dimensions of
image media
• URL – Read only display of a direct link to the media file.

37. HandsOnWP.com @nick_batik@sandi_batik
ATTACHMENT DETAILS CHANGES
ITS APPEARANCE & INFORMATION
BY MEDIA TYPE• 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.

38. HandsOnWP.com @nick_batik@sandi_batik
ATTACHMENT DETAILS CHANGES
ITS APPEARANCE & INFORMATION
BY MEDIA TYPE• 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.

39. HandsOnWP.com @nick_batik@sandi_batik
ATTACHMENT DETAILS
• 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 has Edit Image button at the lower
left

40. HandsOnWP.com @nick_batik@sandi_batik
WORDPRESS MEDIA
LIBRARY LIVE DEMO / Q&A

41. HandsOnWP.com @nick_batik@sandi_batik
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

42. HandsOnWP.com @nick_batik@sandi_batik
WORDPRESS COMMUNITY
GET CONNECTED — Join and contribute to the Austin WordPress
Tribe at: http://www.meetup.com/austinwordpress.
We look forward to seeing you at a #WPATX meetup soon

43. HandsOnWP.com @nick_batik@sandi_batik
Sandi Batik
WordPress evangelist, consultant, trainer, curricula
developer, author, unapologetic geek, unrepentant
capitalist, lucky enough to do what I love everyday. I’ve
served as Austin WordPress Meetup co-organizer since
2010. With my husband Nick Batik, co-founded Pleiades
Publishing Services in 1992 and Hands-On WordPress
Training in 2010.
Follow me @sandi_batik / @WPATX
Contact me at: handsonwp.com
https://www.linkedin.com/in/hsandrachevalierbatik
Presenter

44. HandsOnWP.com @nick_batik@sandi_batik
Nick Batik
Started in web development in 1994 and have been a
WordPress consultant, and web developer since 2007.
A WordPress evangelist, I’ve served as Austin
WordPress Meetup co-organizer since 2010. With my
partner, co-founded Pleiades Publishing Services in 1992
and Hands-On WordPress Training in 2010.
Follow me @nick_batik / @WPATX
Contact me at: handsonwp.com
https://www.linkedin.com/in/nicholasbatik
Presenter