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

1. View Slide

2. Working with Images
   in WordPress
   by Karl Hudson Phillips
   

   View Slide

3. Who Am I?
   • Twin-island Republic of Trinidad and Tobago
   

   View Slide

4. Where I’m From
   

   View Slide

5. Who Am I?
   • Twin-island Republic of Trinidad and Tobago
   • Contractor at NOAA
   – Hybrid developer/designer
   – Project Manager
   

   View Slide

6. Who Am I?
   • Twin-island Republic of Trinidad and Tobago
   • Contractor at NOAA
   – Hybrid developer/designer
   – Project Manager
   • Freelance designer
   

   View Slide

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
   

   View Slide

8. Why Use Images?
   

   View Slide

9. Presentation Contents
   What we’ll cover:
   • Inserting Images into Posts & Pages
   • Image Processing & Media Settings
   • Using the Media Library
   

   View Slide

10. Inserting images
    into Posts & Pages
    

    View Slide

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
    

    View Slide

12. Inserting images into Posts & Pages
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

17. Inserting images into Posts & Pages
    WordPress gives us 4 options:
    • Insert Media
    • Create a photo gallery
    • Add a Featured Image
    • Insert from URL
    

    View Slide

18. Inserting images into Posts & Pages
    

    View Slide

19. Inserting images into Posts & Pages
    WordPress gives us 4 options:
    • Insert Media
    • Create a photo gallery
    • Add a Featured Image
    • Insert from URL
    

    View Slide

20. Inserting images into Posts & Pages
    

    View Slide

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
    

    View Slide

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
    

    View Slide

23. Configuring
    Image Processing
    &
    Media Settings
    

    View Slide

24. Image Processing & Media Settings
    Please, don’t upload the image directly from the camera
    

    View Slide

25. Image Processing & Media Settings
    3 different sizing parameters one can set
    • Thumbnail size
    • Medium size
    • Large size
    

    View Slide

26. Image Processing & Media Settings
    3 different sizing parameters one can set
    • Thumbnail size
    – Cropped version of original image
    • Medium size
    • Large size
    

    View Slide

27. Image Processing & Media Settings
    3 different sizing parameters one can set
    • Thumbnail size
    • Medium size
    – Full image, downsized to set criteria
    • Large size
    

    View Slide

28. Image Processing & Media Settings
    3 different sizing parameters one can set
    • Thumbnail size
    • Medium size
    • Large size
    – Full image, downsized to set criteria
    

    View Slide

29. Image Processing & Media Settings
    

    View Slide

30. ford.jpg - 1000px by 1500px
    • ford.jpg (original)
    • ford-150x150.jpg
    • ford-300x300.jpg
    • ford-960x1024.jpg
    Image Processing & Media Settings
    

    View Slide

31. Image Processing & Media Settings
    

    View Slide

32. bike.jpg – 250px by 350px
    • bike.jpg (original)
    • bike-150x150.jpg
    • bike-250x300.jpg
    Image Processing & Media Settings
    

    View Slide

33. Image Processing & Media Settings
    Set maximum content width in functions.php
    if ( ! isset( $content_width ) )
    $content_width = 960; /* pixels */
    ?>
    

    View Slide

34. Using the Media Library
    

    View Slide

35. Using the Media Library
    The media library
    • Visual representation of all files
    • Browse and manage attached files
    • Add new media
    

    View Slide

36. Using the Media Library
    

    View Slide

37. Contact Information
    Email: khphillips@hotmail.com
    LinkedIn: linkedin.com/in/karlhudsonphillips
    Twitter & Instagram: @karlkanall
    

    View Slide

38. Questions & Answers
    

    View Slide

39. View Slide