Working with Images in WordPress

A presentation at the WordPress Charleston User Group meetup - July 9, 2013

Transcript

3. • Twin-island Republic of Trinidad and Tobago
5. • Twin-island Republic of Trinidad and Tobago • Contractor at NOAA – Hybrid developer/designer – Project Manager
6. • Twin-island Republic of Trinidad and Tobago • Contractor at NOAA – Hybrid developer/designer – Project Manager • Freelance designer
7. • Twin-island Republic of Trinidad and Tobago • Contractor at NOAA – Hybrid developer/designer – Project Manager • Freelancer / Wanna-be cyclist • Washed up soccer player
9. What we’ll cover: • Inserting Images into Posts & Pages • Image Processing & Media Settings • Using the Media Library
11. 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
13. WordPress gives us 4 options: • Insert Media ~ Demonstration • Create a photo gallery • Add a Featured Image • Insert from URL
14. 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. WordPress gives us 4 options: • Insert Media • Create a photo gallery ~ Demonstration • Add a Featured Image • Insert from URL
16. *Jetpack Plugin: • Carousel – Immersive full-screen experience • Tiled Galleries – Elegant magazine-style mosaic layouts * enabled on WordPress.com sites
17. WordPress gives us 4 options: • Insert Media • Create a photo gallery • Add a Featured Image • Insert from URL
19. WordPress gives us 4 options: • Insert Media • Create a photo gallery • Add a Featured Image • Insert from URL
21. WordPress default CSS classes • .alignnone • .aligncenter • .alignright • .alignleft • a img.alignright, a img.alignnone, a img.alignleft, a img.aligncenter
22. 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
24. Please, don’t upload the image directly from the camera
25. 3 different sizing parameters one can set • Thumbnail size • Medium size • Large size
26. 3 different sizing parameters one can set • Thumbnail size – Cropped version of original image • Medium size • Large size
27. 3 different sizing parameters one can set • Thumbnail size • Medium size – Full image, downsized to set criteria • Large size
28. 3 different sizing parameters one can set • Thumbnail size • Medium size • Large size – Full image, downsized to set criteria
30. ford.jpg - 1000px by 1500px • ford.jpg (original) • ford-150x150.jpg • ford-300x300.jpg • ford-960x1024.jpg
32. bike.jpg – 250px by 350px • bike.jpg (original) • bike-150x150.jpg • bike-250x300.jpg
33. Set maximum content width in functions.php <?php if ( ! isset( $content_width ) ) $content_width = 960; /* pixels */ ?>
35. The media library • Visual representation of all files • Browse and manage attached files • Add new media