How to Prepare and Use Images in WordPress

How to Prepare and Use Images in WordPress

A brief overview of creating/editing images and saving in a format suitable for the web and how to upload to your WordPress site.

Transcript

  1. How To Prepare and Use Images In WordPress Wordcamp Chicago

    2013 Helena Denley . @HelenaDenley . diywebsitecoach.com Sunday, 30 June 13
  2. http://diywebsitecoach.com www.facebook.com/diywebsitecoach . @HelenaDenley Who am I? • Co-owner &

    CWC (chief web chick) • From Melbourne, Australia • Mum to a 5 year old boy (so I need to get sites done quickly) Sunday, 30 June 13
  3. http://diywebsitecoach.com www.facebook.com/diywebsitecoach . @HelenaDenley Talk Overview • Why use images?

    • Where to use images • Creating images • Sourcing images • Image optimization • Saving for web • Inserting into WordPress • Image plugins Sunday, 30 June 13
  4. Why Use Images? Sunday, 30 June 13

  5. http://diywebsitecoach.com www.facebook.com/diywebsitecoach . @HelenaDenley Why Use Images? • Visual appeal

    • Show off your work • Break up text blocks • Tell a story Sunday, 30 June 13
  6. Where To Use Images Sunday, 30 June 13

  7. http://diywebsitecoach.com www.facebook.com/diywebsitecoach . @HelenaDenley Post Images Sunday, 30 June 13

  8. http://diywebsitecoach.com www.facebook.com/diywebsitecoach . @HelenaDenley Header/Logo Sunday, 30 June 13

  9. http://diywebsitecoach.com www.facebook.com/diywebsitecoach . @HelenaDenley Background Sunday, 30 June 13

  10. http://diywebsitecoach.com www.facebook.com/diywebsitecoach . @HelenaDenley Graphical Elements/ Buttons & Sidebar Headings

    Sunday, 30 June 13
  11. Creating Images Sunday, 30 June 13

  12. http://diywebsitecoach.com www.facebook.com/diywebsitecoach . @HelenaDenley Image Sources • Your own photos

    • Paid Stock Photography • iStockphoto, Shutterstock, Fotolia • Free Stock Photography • PhotoPin.com stock.xchng (sxc.hu) Sunday, 30 June 13
  13. http://diywebsitecoach.com www.facebook.com/diywebsitecoach . @HelenaDenley Tools for Optimization & Saving •

    Photoshop • Alternate programs • pixlr.com • GIMP • Photoshop Elements • Demo Sunday, 30 June 13
  14. http://diywebsitecoach.com www.facebook.com/diywebsitecoach . @HelenaDenley Step 1. Resizing • By dimension

    (expressed in pixels • By resolution (expressed in ppi) Sunday, 30 June 13
  15. http://diywebsitecoach.com www.facebook.com/diywebsitecoach . @HelenaDenley Step 2. Save For Web (JPEG)

    Sunday, 30 June 13
  16. http://diywebsitecoach.com www.facebook.com/diywebsitecoach . @HelenaDenley Step 2. Save For Web (PNG)

    Sunday, 30 June 13
  17. Inserting Into WordPress Sunday, 30 June 13

  18. http://diywebsitecoach.com www.facebook.com/diywebsitecoach . @HelenaDenley Inserting Into WordPress • Media manager

    • Image sizes • Insert into post/page • Title and Alt text • Link source • Featured Image Sunday, 30 June 13
  19. http://diywebsitecoach.com www.facebook.com/diywebsitecoach . @HelenaDenley Media Manager Sunday, 30 June 13

  20. http://diywebsitecoach.com www.facebook.com/diywebsitecoach . @HelenaDenley Image Sizes Sunday, 30 June 13

  21. http://diywebsitecoach.com www.facebook.com/diywebsitecoach . @HelenaDenley Media Manager - Add New Media

    Sunday, 30 June 13
  22. http://diywebsitecoach.com www.facebook.com/diywebsitecoach . @HelenaDenley Insert Into Post/Page - Add Media

    Select from media library or upload new Sunday, 30 June 13
  23. http://diywebsitecoach.com www.facebook.com/diywebsitecoach . @HelenaDenley Edit Post - Add New Media

    Sunday, 30 June 13
  24. http://diywebsitecoach.com www.facebook.com/diywebsitecoach . @HelenaDenley Edit Post - Add New Media

    Sunday, 30 June 13
  25. http://diywebsitecoach.com www.facebook.com/diywebsitecoach . @HelenaDenley Title & Alt Text Link Source

    Sunday, 30 June 13
  26. http://diywebsitecoach.com www.facebook.com/diywebsitecoach . @HelenaDenley Create Gallery - Choose Images Sunday,

    30 June 13
  27. http://diywebsitecoach.com www.facebook.com/diywebsitecoach . @HelenaDenley Create Gallery - Edit Gallery Sunday,

    30 June 13
  28. http://diywebsitecoach.com www.facebook.com/diywebsitecoach . @HelenaDenley Create Gallery - Appearance in post

    Sunday, 30 June 13
  29. http://diywebsitecoach.com www.facebook.com/diywebsitecoach . @HelenaDenley Create Gallery - Appearance in post

    Sunday, 30 June 13
  30. http://diywebsitecoach.com www.facebook.com/diywebsitecoach . @HelenaDenley Featured Image • Select image from

    media library (or upload) • Used on home page and blog/archive pages Sunday, 30 June 13
  31. Image Plugins Sunday, 30 June 13

  32. http://diywebsitecoach.com www.facebook.com/diywebsitecoach . @HelenaDenley Image Plugins • Galleries • In-built

    WordPress gallery • Portfolio Slideshow Pro (also free version) • Sliders • Genesis Responsive Slider Sunday, 30 June 13
  33. http://diywebsitecoach.com www.facebook.com/diywebsitecoach . @HelenaDenley Image Plugins • Image Sizing •

    Simple Image Sizes • Regenerate Thumbnails • Imsanity Sunday, 30 June 13
  34. For more information and WordPress training join us at: Helena

    Denley . @HelenaDenley . diywebsitecoach.com http://diywebsitecoach.com https://facebook.com/diywebsitecoach Sunday, 30 June 13