$30 off During Our Annual Pro Sale. View Details »

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

Amber Hewitt

March 25, 2017
Tweet

More Decks by Amber Hewitt

Other Decks in Technology

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