This document discusses using images and visuals to improve websites. It provides tips on embedding photos from services like Flickr, SmugMug and YouTube using oEmbed code. The document also discusses best practices for obtaining and using photos, such as making sure images are licensed properly, using relevant file names and alt text for SEO purposes. Plugins are mentioned as a way to manage images, though their use comes with caveats. Overall the document aims to help readers better utilize visuals on their WordPress websites.

1. PICTURETHIS:
BETTERVISUALS FORYOUR
WEBSITE
Aaron Hockley – @ahockley

2. ISTHIS INTERESTING?
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc feugiat auctor eros, ac varius tortor
bibendum elementum. Sed mattis ornare felis, ac placerat ipsum. Donec feugiat auctor augue, non
venenatis elit posuere sit amet. Nulla et tincidunt ligula, mollis dignissim lacus. Nunc at ex eu magna
mollis iaculis eget vitae dui. Nulla pharetra nibh nisl, et vulputate est sodales ac. Morbi aliquet arcu orci,
ut consequat metus mattis id.
Ut vehicula ultrices augue ut venenatis. Sed orci orci, ullamcorper vitae tincidunt et, lacinia ac dolor.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras maximus,
augue ut dictum ullamcorper, libero ex pulvinar enim, ac vehicula ligula dui nec quam. Sed faucibus iaculis
tortor, a finibus dolor bibendum vel. Cras quis nulla vel odio interdum fringilla.Vivamus posuere
elementum tristique. Morbi quis facilisis enim, in pretium enim. Morbi varius consequat lacinia. Duis sit
amet urna justo. Suspendisse quis sem gravida, maximus felis facilisis, volutpat nunc. Mauris ac mattis
massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

4. HOW ABOUT A MASHUP?
We can mix text and
photos to increase the
effectiveness of our
websites.
Each has their strengths

5. –Abraham Lincoln
“There are no bad
pictures. That’s just how
your face looks
sometimes.”

6. GETTING PHOTOS
INTO WORDPRESS

7. WORDPRESS MEDIA
LIBRARY

8. EMBEDDING CODE

9. OEMBED: FLICKR

10. OEMBED: FLICKR

11. OEMBED: SMUGMUG

12. OEMBED: SMUGMUG

13. OEMBED: RESULTS

14. OEMBED:YOUTUBE

15. OEMBED:YOUTUBE

16. OEMBED WORKS WITH
• Flickr
• Instagram
• Imgur
• SmugMug
• YouTube
• Vimeo
• Twitter
• Tumblr
• SlideShare
• WordPress.tv

17. OEMBED:THE DETAILS
codex.wordpress.org/Embeds

18. PHOTOS /VISUALS
Where DoYou GetThem?

19. DON’T USE IMAGESTHAT
• You don’t know
where they came
from
• You found online
without checking the
license

20. USE IMAGESTHAT
• You created
• You obtained permission
from the creator
• You purchased with a
license that allows such use
(stock)
• You obtained after searching
for freely-licensed images

21. YOUR BAJILLION-
MEGAPIXEL CAMERA
IS KIND OF NOT SUCH
A BIG DEAL ONTHE
INTERNET

22. LET’STALK PLUGINS
(with a caveat)

24. REGENERATETHUMBNAILS
• Creates new
thumbnails for
existing images
• Uses sizes from
Settings→Media
• Useful after changing
themes

25. MY EYES ARE UP HERE
• Crop thumbnail off
center
• Can auto detect faces

27. FEATURED IMAGE
REMINDER
• Sometimes we forget
• And by we,
I mean me

28. INSTAGRATE
• Instagram +
WordPress
• Photos→Posts
• Social Integration
• Hashtags

29. SOME QUICK WORDS ON
IMAGE SEO

30. FILENAMES-MATTER.JPG

31. IMG_3076.JPG

32. PARIS-LAS-VEGAS.JPG

33. USETHE ALTTEXT

34. USETHE ALTTEXT
<img src=“/wp-content/uploads/aaron-hockley-portrait.jpg”
alt=“Stunning Portrait of the Amazing Aaron Hockley”
width=“500” height=“500”>

35. QUESTIONS?
Aaron Hockley - @ahockley
wp-photographers.com