Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Working with Images in WordPress
Search
Hudson
July 09, 2013
How-to & DIY
0
46
Working with Images in WordPress
A presentation at the WordPress Charleston User Group meetup - July 9, 2013
Hudson
July 09, 2013
Tweet
Share
More Decks by Hudson
See All by Hudson
Getting Started with Multilingual Websites on WordPress
karlhudsonphillips
0
79
Getting Started with Multilingual Websites on WordPress
karlhudsonphillips
0
110
Website Design for Success - Why Mobile Matters
karlhudsonphillips
0
220
WordPress Tips and Ticks, Part 1
karlhudsonphillips
0
110
The WordPress Community
karlhudsonphillips
0
110
Other Decks in How-to & DIY
See All in How-to & DIY
Wear OSでwatch face作成~令和になってもCanvas芸?~
cibmc
1
600
MNL777 - Best Free Online Slots In Philippines
mnl
0
530
Fraxinus1k 組立説明書 (Japanese, v. 0.9)
fukumay
0
3.1k
LT(Lightning Talk)のドキドキ感を共有しながら 応援してくれるBotを作ってみた!
scbc1167
0
150
一番やさしいDJ入門 2024
stefafafan
6
1.3k
20230520_ScrumFestNiigata_iwamu
takusamar
0
330
たまごっちUniFlash解析 #分解のススメ
bakueikozo
0
330
アジャイルよもやま話 ~ 「笑顔の合意」に至るスキルを学ぼう
hageyahhoo
3
1k
TOMARIGI
bigtree
1
2.5k
SIM型チョコレート、作成の裏側
soracom
PRO
0
360
Chaos V-Ray Render Pool (使い方)
renderpool
0
140
まだまだダンボールスタックチャンv2
syumme01
0
1.6k
Featured
See All Featured
Documentation Writing (for coders)
carmenintech
59
3.8k
Into the Great Unknown - MozCon
thekraken
10
830
Why Our Code Smells
bkeepers
PRO
330
56k
Mobile First: as difficult as doing things right
swwweet
215
8.5k
Scaling GitHub
holman
456
140k
How STYLIGHT went responsive
nonsquared
92
4.7k
How GitHub Uses GitHub to Build GitHub
holman
467
290k
Producing Creativity
orderedlist
PRO
335
39k
Statistics for Hackers
jakevdp
789
220k
Web Components: a chance to create the future
zenorocha
304
41k
Designing for Performance
lara
601
67k
Code Reviewing Like a Champion
maltzj
512
39k
Transcript
None
None
• Twin-island Republic of Trinidad and Tobago
None
• Twin-island Republic of Trinidad and Tobago • Contractor at
NOAA – Hybrid developer/designer – Project Manager
• Twin-island Republic of Trinidad and Tobago • Contractor at
NOAA – Hybrid developer/designer – Project Manager • Freelance designer
• Twin-island Republic of Trinidad and Tobago • Contractor at
NOAA – Hybrid developer/designer – Project Manager • Freelancer / Wanna-be cyclist • Washed up soccer player
None
What we’ll cover: • Inserting Images into Posts & Pages
• Image Processing & Media Settings • Using the Media Library
None
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
None
WordPress gives us 4 options: • Insert Media ~ Demonstration
• Create a photo gallery • Add a Featured Image • Insert from URL
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
WordPress gives us 4 options: • Insert Media • Create
a photo gallery ~ Demonstration • Add a Featured Image • Insert from URL
*Jetpack Plugin: • Carousel – Immersive full-screen experience • Tiled
Galleries – Elegant magazine-style mosaic layouts * enabled on WordPress.com sites
WordPress gives us 4 options: • Insert Media • Create
a photo gallery • Add a Featured Image • Insert from URL
None
WordPress gives us 4 options: • Insert Media • Create
a photo gallery • Add a Featured Image • Insert from URL
None
WordPress default CSS classes • .alignnone • .aligncenter • .alignright
• .alignleft • a img.alignright, a img.alignnone, a img.alignleft, a img.aligncenter
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
None
Please, don’t upload the image directly from the camera
3 different sizing parameters one can set • Thumbnail size
• Medium size • Large size
3 different sizing parameters one can set • Thumbnail size
– Cropped version of original image • Medium size • Large size
3 different sizing parameters one can set • Thumbnail size
• Medium size – Full image, downsized to set criteria • Large size
3 different sizing parameters one can set • Thumbnail size
• Medium size • Large size – Full image, downsized to set criteria
None
ford.jpg - 1000px by 1500px • ford.jpg (original) • ford-150x150.jpg
• ford-300x300.jpg • ford-960x1024.jpg
None
bike.jpg – 250px by 350px • bike.jpg (original) • bike-150x150.jpg
• bike-250x300.jpg
Set maximum content width in functions.php <?php if ( !
isset( $content_width ) ) $content_width = 960; /* pixels */ ?>
None
The media library • Visual representation of all files •
Browse and manage attached files • Add new media
None
None
None
None