Image Handling - WordCamp Las Vegas 2014

Enhancing the Image Handling Capabilities of WordPress

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
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.
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.
17. The setup:
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?
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.
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.
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