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

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.
25. Editing Images
26. Select the image to view the editing option popup.
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?