Download - How the WordPress Media Library Works
HandsOnWP.com @nick_batik@sandi_batik
How The WordPress Media Library Works
Austin WordPress Meetup March 20, 2017
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
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
• Audio Files
• Documents
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!
HandsOnWP.com @nick_batik@sandi_batik
FEE-BASED IMAGE $OURCE$
• Shutterstock - https://www.shutterstock.com
• iStock - http://www.istockphoto.com/
• Adobe Stock - https://stock.adobe.com
• Dreamstime - https://www.dreamstime.com
HandsOnWP.com @nick_batik@sandi_batik
SHOW ME THE FREE!!• Favorite Sources for Free Quality Stock Images
• Pixabay - https://pixabay.com (my current go-to)
• Unsplash - https://unsplash.com
• StockSnap - https://stocksnap.io
• flicker - https://www.flickr.com
• Pexels- https://www.pexels.com
• Snapwire - http://snapwiresnaps.tumblr.com
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.”
• https://wiki.creativecommons.org/images/3/35/Creativecommons-what-is-creative-commons_eng.pdf
• Creative Commons - https://search.creativecommons.org/
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/
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
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.
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.
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.
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.
HandsOnWP.com @nick_batik@sandi_batik
ADDING MEDIAIf 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
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.
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.
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.
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
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
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
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.
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”
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.
HandsOnWP.com @nick_batik@sandi_batik
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.
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.
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.
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.
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.
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.
HandsOnWP.com @nick_batik@sandi_batik
ADVANCED SETTINGS
• Once a gallery is added, clicking on it lets you edit or delete it.
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.
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.
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.
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.
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.
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.
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
HandsOnWP.com @nick_batik@sandi_batik
WORDPRESS RESOURCES
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
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 / @WPATXContact me at: handsonwp.com
https://www.linkedin.com/in/hsandrachevalierbatik
Presenter
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