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
   

   View Slide

2. Who the h*ck am I?
   

   View Slide

3. Amber Hewitt
   graphicgoo.com
   @graphicgoo
   

   View Slide

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
   

   View Slide

5. How NOT to Get Images
   • Google Image Search
   • Downloading from other websites
   • Photographing copyrighted works
   

   View Slide

6. Before You Upload
   That Image
   

   View Slide

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)
   

   View Slide

8. img_3285
   

   View Slide

9. Image File Formats
   

   View Slide

10. JPEG
    Good for photographs
    

    View Slide

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

    View Slide

12. Animated GIF
    

    View Slide

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

    View Slide

14. Image Apps
    • Photoshop/Lightroom (Mac, Windows)
    • GIMP (Mac, Windows)
    • Paint.NET (Windows)
    • Pixlr (Web-Based)
    • Luminar (Mac)
    • Pixelmator (Mac)
    

    View Slide

15. Image Apps (Mobile)
    • Pixelmator (iOS)
    • VSCO (iOS, Android)
    • Snapseed (iOS, Android)
    • Enlight (iOS)
    • Metapho (iOS) - View & remove metadata
    

    View Slide

16. Uploading Images
    

    View Slide

17. DEMO
    

    View Slide

18. Place the cursor where you want the image to be in the
    post/page and then click the “Add Media” button.
    

    View Slide

19. Drag & drop your image(s) here or click the “Select Files”
    button to select the image(s) from your computer.
    

    View Slide

20. After the image is uploaded,
    it will appear in the Media Library.
    

    View Slide

21. View Slide

22. View Slide

23. View Slide

24. View Slide

25. Editing Images
    

    View Slide

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

    View Slide

27. View Slide

28. View Slide

29. View Slide

30. View Slide

31. View Slide

32. View Slide

33. View Slide

34. View Slide

35. View Slide

36. Image Plugins
    

    View Slide

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.
    

    View Slide

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.
    

    View Slide

39. Image Slider Plugins
    Soliloquy
    Meta Slider
    

    View Slide

40. Image Gallery Plugins
    NextGEN Gallery
    Envira Gallery
    

    View Slide

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.
    

    View Slide

42. Sharing Your Images on
    Social Media
    

    View Slide

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.
    

    View Slide

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.
    

    View Slide

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.
    

    View Slide

46. Questions?
    

    View Slide