Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Image Handling: Understanding the Basics of WordPress Media


Published on

Good photos, logos, icons and other images on a site are key to a website's appeal, popularity and conversion rates. Rich Plakas will review uploading images 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 SEO. 

The presentation will also demonstrate 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 will also be discussed, as well as some of the best plugins to use to manage and/or display images. We will close with a Q&A.

This session is designed to support those new to WordPress and is being repeated based on membership requests. Bring your laptops and your questions. See you there!

Reminder: As this is a class designed for those new to WordPress. We will not be discussing advanced image handling techniques. If you have advanced questions please save them for the Q&A at the next general WordPress Meetup. Thanks!

Published in: Internet
  • Login to see the comments

Image Handling: Understanding the Basics of WordPress Media

  1. 1. Image Handling: Understanding the Basics of WordPress Media Rich Plakas @RichP on Twitter
  2. 2. A Little Bit About Me ★ IT Background going back to the days of DOS & Novell ★ Began “messing” with WordPress in 2007. ★ Switched my focus from IT to WordPress in 2011 ★ I was tired of doing Windoze Updates & changing Printer Toners :-) ★ Joined the Austin WordPress Meetup Group In 2012. ★ I love BBQ & Craft Beer.
  3. 3. A Little Bit About Me ★ I run a WordPress Agency called Connected Systems ★ We help businesses with all aspects of their Digital Assets including: ★ SEO/SEM ★ Analytics and Website Optimization ★ Pay-per-Click Ads(Google Adwords & Facebook Ads) ★ Social Media ★ Ecommerce (WooCommerce) ★ Email Newsletters
  4. 4. Why Do I Need Images on my Website? "A Picture is Worth a Thousand Words” (Most of) our brains process visual content (images) faster and retention of this visual content tends to be higher as well.
  5. 5. Why Do I Need Images on my Website? Which Post Looks Better?
  6. 6. Where Do I Find Images? Besides taking or creating your own pictures, there is a vast collection of websites offering photos that you can place on your site. Many are free, and others charge fees. Here are some options for y’all to look at:
  7. 7. Free Image Websites Flickr(with Creative Commons filter) Stock Vault Dreamstime Stock Xchng Freebie Images Photogen Google Image Search (with Creative Commons filter) More image websites listed at: base/tutorial/finding-images/
  8. 8. Creative Commons Pictures Flickr
  9. 9. Creative Commons Pictures Google Image Search with “Labeled for reuse” Filter enabled:
  10. 10. Paid Image Sites PhotoDune Dollar Photo Club Shutterstock Dreamstime Fotolia DepositPhotos PhotoSpin iStockPhoto/Getty* (not recommended by me)
  11. 11. Adding Images The Media Manager was much improved starting with WordPress 3.5, You could now insert multiple images at once, create multiple galleries per post with drag-and-drop reordering, inline caption editing, and simplified controls. The new media manager also provides an easier way for users to insert videos into their posts. Users can now drag and drop images and video files from their desktops directly into each post. Adjusting the settings for each image — such as adjusting image size — has also been streamlined. And importing and embedding multimedia from other Web sites, like YouTube, has been eased as well.
  12. 12. Changes to Image Handling in WordPress 3.9 & 4.0 WordPress 3.9 Changes: “Edit images easily With quicker access to crop and rotation tools, it’s now much easier to edit your images while editing posts. You can also scale images directly in the editor to find just the right fit.” “Drag and drop your images Uploading your images is easier than ever. Just grab them from your desktop and drop them in the editor.” WordPress 4.0 Changes: “Explore your uploads in a beautiful, endless grid. A new details preview makes viewing and editing any amount of media in sequence a snap.”
  13. 13. How to Manage Photos in WordPress Library Size Your Photos Before Uploading Don’t slow down your site’s performance with extra large images. Resize and descriptively name image files, before uploading them to the WordPress Media Library. Pro Tips: Name images with descriptive keywords(SEO) 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.) 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.
  14. 14. Using 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. The new Media Manager makes image optimization much easier. SEO Tips In Edit 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.
  15. 15. 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. A good alt tag of this image to the right might be: “Screenshot of the WordPress 4.3 Media Library Screen showing some of the available images in the Library”
  16. 16. Opening the Media Manager Before you open your Media Library, position your cursor on the place you want the image to appear in your page or post and click. Go to the Add Media button at top left of your editing screen.
  17. 17. The Media Manager
  18. 18. The Media Manager
  19. 19. Upload New Media
  20. 20. Uploading and Selecting Files Once the Image files are uploaded to your WordPress Media Manager, you will automatically be switched over to the Media Library screen where you’ll have access those newly uploaded files (along with previously uploaded images). The files you’ve just uploaded will indicate that they are “Selected” meaning that the image or images will be check- marked and highlighted within a blue box. In addition, you have the choice of showing only the files uploaded to that particular post by using the pull-down menu in the top left corner. When you open the Media Manager, you will be shown all the image files in your Media Library.
  21. 21. Inserting Media Into A Post or Page
  22. 22. Inserting Media Into A Post or Page If you wish to use one of the images in the library, click on the image. When an image is selected and active, you will see that it has a blue border around it and a check-mark in the upper right corner. Adding Meta Information The selected image will appear in the right hand sidebar under ‘ATTACHMENT DETAILS.’ You can add meta information and captions in this area. The ‘ATTACHMENT DISPLAY SETTINGS’ area is where you indicate the image alignment on the page or post and the size options — Thumbnail, Medium, Large or Full size. Once you have filled out the descriptions and made the alignment and size choices, click the blue ‘Insert into page’ button in the lower right hand of the page. The image will then be inserted into your post or page.
  23. 23. Inserting Media Into A Post or Page Click ‘Publish’ or ‘Update’ and the image positioned in the text on your editing screen will appear on the published page or post . Images in the editing screen can be repositioned by drag-and-drop. Images Can be resized by clicking on the image once and then dragging a corner.
  24. 24. Inserting Media Into A Post or Page This is how the image will look on the published page:
  25. 25. Editing an Image on a Post or Page To edit an image, move your cursor over the image and click on it. The image toolbar will popup.
  26. 26. Image Details
  27. 27. Setting the Featured Image for a Post Depending on your Theme, the featured image of a post may be displayed on your sites home page. If you put your blog post on Facebook or other Social Media sites the will try to pull in this image as well.
  28. 28. Setting the Featured Image for a Post
  29. 29. Setting the Featured Image for a Post On the lower right hand side of your post edit page you will find “Featured Image”.
  30. 30. Setting the Featured Image for a Post Click on “Set Featured Image” and choose or upload an image file like we did previously for Post Images.
  31. 31. Setting the Featured Image for a Post If your image dimensions are less than 200px x 200px you will see this warning message about Facebook and other Social Media sites not picking up the image.
  32. 32. Live Demo
  33. 33. WordPress Galleries “Image galleries are a great way to share groups of pictures on your WordPress site. The Create Gallery feature of the WordPress media uploader allows you to add a simple image gallery to pages or posts on your site.” *From the WordPress Codex
  34. 34. WordPress Galleries
  35. 35. WordPress Galleries
  36. 36. WordPress Galleries
  37. 37. WordPress Galleries
  38. 38. WordPress Galleries Example of WordPress Gallery using Thumbnail Option
  39. 39. WordPress Galleries This is how the picture is displayed using the “Media” option
  40. 40. WordPress Galleries This is how the picture is displayed using the “Attachment” option
  41. 41. WordPress Galleries Live Demo
  42. 42. Using a Lightbox In WordPress As you have seen in the previous slides, the way WordPress display images clicked from a gallery is not ideal. Both require the user to click the browser back button to get back to the original post. There are 2 simple solution to this. One is to use a Light Box plugin.
  43. 43. Using a Lightbox In WordPress
  44. 44. Using a Lightbox In WordPress
  45. 45. Using a Lightbox In WordPress
  46. 46. WordPress Jetpack Carousel An alternative to using a light box plugin is to use the Jetpack Carousel feature. Jetpack is a free plugin from WordPress that contain the equivalent functionality of about 40 plugins!
  47. 47. WordPress Jetpack Carousel Once inside the Jetpack screen, click on “See the other 27 Jetpack features” and click on the “Photo and Videos” category filters.
  48. 48. WordPress Jetpack Carousel The Image Carousel setting can be found with your Media Settings.
  49. 49. WordPress Jetpack Carousel This is is how the Carousel displays an image that was clicked on from the Gallery.
  50. 50. Lightbox Live Demo As you can see both the a light box plugin or the Jetpack Carousel give the user on your website a much better image viewing experience!
  51. 51. Third Party Image Galley Plugins One problem with the built in WordPress Gallery functionality is that it’s NOT Mobile Responsive (at least not without you doing some custom CSS coding). This is probably the point where you will want to investigate and use a 3rd Party Gallery Plugin. As shown in the examples below the 3rd Party Gallery Plugin will make the gallery images larger and put them into a single row for easier viewing on a small screen. WordPress Gallery on iPhone 3rd Party Gallery on iPhone
  52. 52. Third Party Image Galley Plugins Two Popular WordPress Gallery Plugins
  53. 53. Embedding Youtube and Vimeo Videos Go to the Video in your Browser Copy the Video URL Paste into your Post or Page Publish/Update and Done!
  54. 54. Embedding Youtube and Vimeo Videos
  55. 55. Embedding Youtube and Vimeo Videos
  56. 56. Embedding Youtube and Vimeo Videos
  57. 57. Image Handling: Understanding the Basics of WordPress Media Rich Plakas @RichP on Twitter Q&A