Image Mastery within WordPress: Upload, Edit, Display, and Share with Ease

Image Mastery within WordPress: Upload, Edit, Display, and Share with Ease

With so many options in WordPress to edit and display your images, it can get confusing – “How can I rotate my image?” “How can I display my images in rows and columns?” Learn how to use the built-in tools and other plugins to upload, edit, and quickly display your images. You will also learn how to ensure those images look good when shared on social media.

Presented at WordCamp San Diego 2017 // March 25, 2017

Ecf1ed72f102d378dfd3b426fad1f66b?s=128

Amber Hewitt

March 25, 2017
Tweet

Transcript

  1. IMAGE MASTERY WITHIN WORDPRESS Upload, Edit, Display, and Share with

    Ease
  2. Who the h*ck am I?

  3. Amber Hewitt graphicgoo.com @graphicgoo

  4. How to Get Images • Shoot your own images
 (BONUS:

    you own the copyright!) • Public Domain (FREE)
 LibreStock - librestock.com • Creative Commons - creativecommons.org
 Flickr - flickr.com/creativecommons • Stock Photography
 iStock, Getty Images, Veer, Creative Market
  5. How NOT to Get Images • Google Image Search •

    Downloading from other websites • Photographing copyrighted works
  6. Before You Upload That Image

  7. Before You Upload… • Reduce the pixel size!
 iPhone 6S+

    photo is 4032 x 3024 pixels • Reduce the file size!
 Average iPhone 6S+ photo size is 2 MB • Make the title of your image file relevant to the subject matter for better SEO.
 (IMG_3285.jpg should be yellow-flower.jpg)
  8. img_3285

  9. Image File Formats

  10. JPEG Good for photographs

  11. GIF Good for images with limited colors (line art)

  12. Animated GIF

  13. PNG Any image with transparency (be careful - file size

    can be large)
  14. Image Apps • Photoshop/Lightroom (Mac, Windows) • GIMP (Mac, Windows)

    • Paint.NET (Windows) • Pixlr (Web-Based) • Luminar (Mac) • Pixelmator (Mac)
  15. Image Apps (Mobile) • Pixelmator (iOS) • VSCO (iOS, Android)

    • Snapseed (iOS, Android) • Enlight (iOS) • Metapho (iOS) - View & remove metadata
  16. Uploading Images

  17. DEMO

  18. Place the cursor where you want the image to be

    in the post/page and then click the “Add Media” button.
  19. Drag & drop your image(s) here or click the “Select

    Files” button to select the image(s) from your computer.
  20. After the image is uploaded, it will appear in the

    Media Library.
  21. None
  22. None
  23. None
  24. None
  25. Editing Images

  26. Select the image to view the editing option popup.

  27. None
  28. None
  29. None
  30. None
  31. None
  32. None
  33. None
  34. None
  35. None
  36. Image Plugins

  37. Jetpack • GALLERY WIDGET
 The Gallery Widget provides you with

    a simple way to display a photo gallery or slideshow in your blog's sidebar. • CAROUSEL
 With Carousel active, any standard WordPress galleries you have embedded in posts or pages will launch a gorgeous full-screen photo browsing experience with comments and EXIF metadata.
  38. Jetpack • PHOTON
 Photon is an image acceleration and editing

    service for sites hosted on WordPress.com or on Jetpack-connected WordPress sites. • TILED GALLERIES
 Tiled Galleries allow you to display your image galleries in three new styles: a rectangular mosaic, a square mosaic, and a circular grid.
  39. Image Slider Plugins Soliloquy Meta Slider

  40. Image Gallery Plugins NextGEN Gallery Envira Gallery

  41. Other Image Plugins • IMSANITY
 Automatically resizes huge image uploads.

    • FEATURED IMAGE ADMIN THUMB
 Adds inline thumbnail image to admin columns. • REGENERATE THUMBNAILS
 Allows you to regenerate your thumbnails after changing the thumbnail sizes.
  42. Sharing Your Images on Social Media

  43. Image Hover Plugins • MONARCH BY ELEGANT THEMES
 Social media

    sharing (includes image hover). • WWM SOCIAL SHARE ON IMAGE HOVER
 Easily add social sharing icons on every WordPress image hover. • JQUERY PIN IT BUTTON FOR IMAGES 
 Highlights images on hover and adds a Pinterest “Pin It” button over them for easy pinning.
  44. Facebook & Twitter Plugins • YOAST SEO
 Includes options for

    specific images for Facebook and Twitter. • WP FACEBOOK OPEN GRAPH PROTOCOL
 Adds proper Facebook Open Graph Meta tags. • OPEN GRAPH PROTOCOL FRAMEWORK 
 Adds proper Facebook Open Graph Meta tags.
  45. Facebook & Twitter Plugins • FACEBOOK OPEN GRAPH, GOOGLE+ AND

    TWITTER CARD TAGS
 Inserts Facebook Open Graph, Google+/ Schema.org, Twitter and SEO Meta Tags. • JM TWITTER CARDS
 Easy integration of Twitter cards in WordPress.
  46. Questions?