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

    View Slide

  38. Questions & Answers

    View Slide

  39. View Slide