Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Working with Images in WordPress

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.

More Decks by WordPress Charleston User Group

Other Decks in How-to & DIY

Transcript

  1. None
  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: [email protected] LinkedIn: linkedin.com/in/karlhudsonphillips Twitter & Instagram: @karlkanall

  38. Questions & Answers

  39. None