Image Handling - WordCamp Las Vegas 2014

Image Handling - WordCamp Las Vegas 2014

Enhancing the Image Handling Capabilities of WordPress

5738e42ffe39911ed8b10a0eb3e4d632?s=128

GreenDream

December 14, 2014
Tweet

Transcript

  1. Image Handling Enhancing the Image Handling Capabilities of WordPress WordCamp

    Las Vegas 2014 • @SteveRypka • GreenDreamWeb.com
  2. The Issues • Client experience (easier vs. more difficult) •

    Time spent on image management • Site appearance • Site performance • Server space
  3. • Client experience • Make it easier for them •

    No need to resize images prior to upload • Featured images handled automatically if they forget • Time spent on image management • No need to create “custom” thumbnails • Automatically avoid image bloat • Site performance • Optimized images load faster • Server space • Optimized images take less space on the server • Backups are smaller
  4. None
  5. None
  6. When no images are included in new posts, or if

    the author fails to set the Featured Image, some sites may start to look haphazard…
  7. Consistency Is important!

  8. Some images look great but the auto-cropped thumbnails don’t quite

    do them justice!
  9. What if a default image could fill the space with

    a client’s logo while maintaining a balanced layout. It could also serve as a reminder to the client that they might want to add a unique image to the post.
  10. Those are some of the issues. Now let’s look at

    how we can address them.
  11. Imsanity Stop the imsanity! Clients will upload whatever is most

    convenient, like the 16 megapixel super-ultra- max-hi-res-3d-hdr shots they just took with their new smart phone! • Automatically control the size of image uploads. • Keep the media library optimized from the start.
  12. None
  13. None
  14. Example: Original image size: 4368 x 2912, 10.5 MB

  15. Default Featured Image Add a default featured image to the

    media settings page.
  16. None
  17. The setup:

  18. None
  19. Default images are great and definitely fill the image gaps

    in the layout. But it is possible to have too much of a good thing! What about posts that have images in them, but with no Featured Image set?
  20. Auto Post Thumbnail What if the client forgets to set

    the Featured Image but they have at least one image in the post?
  21. None
  22. For an existing site, run Generate Thumbnails once. New posts

    will be handled automatically. This is the only thing to do with this plugin. The setup:
  23. Once Auto Post Thumbnails runs, all posts without a selected

    Featured Image will now use the first image in the post, if there is one. Things are starting to look up!
  24. We went from this: To this:

  25. But what if we don’t like the crop? No problemo.

    There’s an easy way to fix it, right within the post!
  26. Manual Image Crop This one almost eliminates the need to

    create a custom thumbnail ever again.
  27. None
  28. The setup:

  29. WordPress does a great job creating thumbnails for us, but

    it is limited to certain rules that don’t always work well.
  30. Manual Image Crop adds a great little feature, right inside

    the editor. Notice the additional link:
  31. A lightbox opens to show each available thumbnail configuration with

    a cropping tool and preview.
  32. Adjust the crop as you like then click “Crop it!”

  33. As soon as you click the “Crop it!” button, the

    new thumbnail is available. No need to resave the post. Just refresh the website page and voila!
  34. Selecting the other tabs allows editing each unique thumbnail included

    in the theme.
  35. Creative cropping can be fun. Add some surprises! Who knew?!

  36. Creative cropping can be fun. Add some surprises! Or not…

    Just take a number.
  37. Thumbnails for Backend Not essential, but it adds a nice

    touch to the user interface.
  38. None
  39. The setup is a bit intense…

  40. Normal Posts list:

  41. Posts list with thumbnails:

  42. Thumbnails improve the user interface.

  43. Review • Imsanity • Default Featured Image • Auto Post

    Thumbnail • Manual Image Crop • Thumbnails for Backend
  44. Image Handling Enhancing the Image Handling Capabilities of WordPress WordCamp

    Las Vegas 2014 • @SteveRypka • GreenDreamWeb.com