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

Working with Images in WordPress

Working with Images in WordPress

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

Hudson

July 09, 2013
Tweet

More Decks by Hudson

Other Decks in How-to & DIY

Transcript

  1. • Twin-island Republic of Trinidad and Tobago • Contractor at

    NOAA – Hybrid developer/designer – Project Manager
  2. • Twin-island Republic of Trinidad and Tobago • Contractor at

    NOAA – Hybrid developer/designer – Project Manager • Freelance designer
  3. • Twin-island Republic of Trinidad and Tobago • Contractor at

    NOAA – Hybrid developer/designer – Project Manager • Freelancer / Wanna-be cyclist • Washed up soccer player
  4. What we’ll cover: • Inserting Images into Posts & Pages

    • Image Processing & Media Settings • Using the Media Library
  5. 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
  6. WordPress gives us 4 options: • Insert Media ~ Demonstration

    • Create a photo gallery • Add a Featured Image • Insert from URL
  7. 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
  8. WordPress gives us 4 options: • Insert Media • Create

    a photo gallery ~ Demonstration • Add a Featured Image • Insert from URL
  9. *Jetpack Plugin: • Carousel – Immersive full-screen experience • Tiled

    Galleries – Elegant magazine-style mosaic layouts * enabled on WordPress.com sites
  10. WordPress gives us 4 options: • Insert Media • Create

    a photo gallery • Add a Featured Image • Insert from URL
  11. WordPress gives us 4 options: • Insert Media • Create

    a photo gallery • Add a Featured Image • Insert from URL
  12. WordPress default CSS classes • .alignnone • .aligncenter • .alignright

    • .alignleft • a img.alignright, a img.alignnone, a img.alignleft, a img.aligncenter
  13. 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
  14. 3 different sizing parameters one can set • Thumbnail size

    – Cropped version of original image • Medium size • Large size
  15. 3 different sizing parameters one can set • Thumbnail size

    • Medium size – Full image, downsized to set criteria • Large size
  16. 3 different sizing parameters one can set • Thumbnail size

    • Medium size • Large size – Full image, downsized to set criteria
  17. Set maximum content width in functions.php <?php if ( !

    isset( $content_width ) ) $content_width = 960; /* pixels */ ?>
  18. The media library • Visual representation of all files •

    Browse and manage attached files • Add new media