Working with Images in WordPress

Karl (@karlkanall) presented on the mechanics of uploading, cropping and sizing images, as well as, working with image galleries within WordPress.

Transcript

2. Working with Images in WordPress by Karl Hudson Phillips
3. Who Am I? • Twin-island Republic of Trinidad and Tobago
4. Where I’m From
5. Who Am I? • Twin-island Republic of Trinidad and Tobago • Contractor at NOAA – Hybrid developer/designer – Project Manager
6. Who Am I? • Twin-island Republic of Trinidad and Tobago • Contractor at NOAA – Hybrid developer/designer – Project Manager • Freelance designer
7. Who Am I? • Twin-island Republic of Trinidad and Tobago • Contractor at NOAA – Hybrid developer/designer – Project Manager • Freelancer / Wanna-be cyclist • Washed up soccer player
8. Why Use Images?
9. Presentation Contents What we’ll cover: • Inserting Images into Posts & Pages • Image Processing & Media Settings • Using the Media Library
10. Inserting images into Posts & Pages
11. Inserting images into Posts & Pages WordPress gives us 4 options: • Insert Media • Create a photo gallery • Add a Featured Image • Insert from URL Via the drag & drop multi-file uploader
12. Inserting images into Posts & Pages
13. Inserting images into Posts & Pages WordPress gives us 4 options: • Insert Media ~ Demonstration • Create a photo gallery • Add a Featured Image • Insert from URL
14. Inserting images into Posts & Pages Things to consider: • Alternative Text (ALT) – Section 508 & U.S. Web Accessibility Laws – Search Engine Optimization – Offers help when Images aren’t visible • Title – Visible on hover
15. Inserting images into Posts & Pages WordPress gives us 4 options: • Insert Media • Create a photo gallery ~ Demonstration • Add a Featured Image • Insert from URL
16. Inserting images into Posts & Pages *Jetpack Plugin: • Carousel – Immersive full-screen experience • Tiled Galleries – Elegant magazine-style mosaic layouts * enabled on WordPress.com sites
17. Inserting images into Posts & Pages WordPress gives us 4 options: • Insert Media • Create a photo gallery • Add a Featured Image • Insert from URL
18. Inserting images into Posts & Pages
19. Inserting images into Posts & Pages WordPress gives us 4 options: • Insert Media • Create a photo gallery • Add a Featured Image • Insert from URL
20. Inserting images into Posts & Pages
21. Inserting images into Posts & Pages WordPress default CSS classes • .alignnone • .aligncenter • .alignright • .alignleft • a img.alignright, a img.alignnone, a img.alignleft, a img.aligncenter
22. Inserting images into Posts & Pages WordPress default CSS classes (continued) • .wp-caption • .wp-caption.alignnone • .wp-caption.alignleft • .wp-caption.alignright • .wp-caption img • .wp-caption p.wp-caption-text ~ http://codex.wordpress.org/CSS
23. Configuring Image Processing & Media Settings
24. Image Processing & Media Settings Please, don’t upload the image directly from the camera
25. Image Processing & Media Settings 3 different sizing parameters one can set • Thumbnail size • Medium size • Large size
26. Image Processing & Media Settings 3 different sizing parameters one can set • Thumbnail size – Cropped version of original image • Medium size • Large size
27. Image Processing & Media Settings 3 different sizing parameters one can set • Thumbnail size • Medium size – Full image, downsized to set criteria • Large size
28. Image Processing & Media Settings 3 different sizing parameters one can set • Thumbnail size • Medium size • Large size – Full image, downsized to set criteria
29. Image Processing & Media Settings
30. ford.jpg - 1000px by 1500px • ford.jpg (original) • ford-150x150.jpg • ford-300x300.jpg • ford-960x1024.jpg Image Processing & Media Settings
31. Image Processing & Media Settings
32. bike.jpg – 250px by 350px • bike.jpg (original) • bike-150x150.jpg • bike-250x300.jpg Image Processing & Media Settings
33. Image Processing & Media Settings Set maximum content width in functions.php <?php if ( ! isset( $content_width ) ) $content_width = 960; /* pixels */ ?>
34. Using the Media Library
35. Using the Media Library The media library • Visual representation of all files • Browse and manage attached files • Add new media
36. Using the Media Library
37. Contact Information Email: khphillips@hotmail.com LinkedIn: linkedin.com/in/karlhudsonphillips Twitter & Instagram: @karlkanall
38. Questions & Answers