Working with Images
in WordPress
by Karl Hudson Phillips
Slide 3
Slide 3 text
Who Am I?
• Twin-island Republic of Trinidad and Tobago
Slide 4
Slide 4 text
Where I’m From
Slide 5
Slide 5 text
Who Am I?
• Twin-island Republic of Trinidad and Tobago
• Contractor at NOAA
– Hybrid developer/designer
– Project Manager
Slide 6
Slide 6 text
Who Am I?
• Twin-island Republic of Trinidad and Tobago
• Contractor at NOAA
– Hybrid developer/designer
– Project Manager
• Freelance designer
Slide 7
Slide 7 text
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
Slide 8
Slide 8 text
Why Use Images?
Slide 9
Slide 9 text
Presentation Contents
What we’ll cover:
• Inserting Images into Posts & Pages
• Image Processing & Media Settings
• Using the Media Library
Slide 10
Slide 10 text
Inserting images
into Posts & Pages
Slide 11
Slide 11 text
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
Slide 12
Slide 12 text
Inserting images into Posts & Pages
Slide 13
Slide 13 text
Inserting images into Posts & Pages
WordPress gives us 4 options:
• Insert Media ~ Demonstration
• Create a photo gallery
• Add a Featured Image
• Insert from URL
Slide 14
Slide 14 text
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
Slide 15
Slide 15 text
Inserting images into Posts & Pages
WordPress gives us 4 options:
• Insert Media
• Create a photo gallery ~ Demonstration
• Add a Featured Image
• Insert from URL
Image Processing & Media Settings
Please, don’t upload the image directly from the camera
Slide 25
Slide 25 text
Image Processing & Media Settings
3 different sizing parameters one can set
• Thumbnail size
• Medium size
• Large size
Slide 26
Slide 26 text
Image Processing & Media Settings
3 different sizing parameters one can set
• Thumbnail size
– Cropped version of original image
• Medium size
• Large size
Slide 27
Slide 27 text
Image Processing & Media Settings
3 different sizing parameters one can set
• Thumbnail size
• Medium size
– Full image, downsized to set criteria
• Large size
Slide 28
Slide 28 text
Image Processing & Media Settings
3 different sizing parameters one can set
• Thumbnail size
• Medium size
• Large size
– Full image, downsized to set criteria
Slide 29
Slide 29 text
Image Processing & Media Settings
Slide 30
Slide 30 text
ford.jpg - 1000px by 1500px
• ford.jpg (original)
• ford-150x150.jpg
• ford-300x300.jpg
• ford-960x1024.jpg
Image Processing & Media Settings
Slide 31
Slide 31 text
Image Processing & Media Settings
Slide 32
Slide 32 text
bike.jpg – 250px by 350px
• bike.jpg (original)
• bike-150x150.jpg
• bike-250x300.jpg
Image Processing & Media Settings
Slide 33
Slide 33 text
Image Processing & Media Settings
Set maximum content width in functions.php
Slide 34
Slide 34 text
Using the Media Library
Slide 35
Slide 35 text
Using the Media Library
The media library
• Visual representation of all files
• Browse and manage attached files
• Add new media