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