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
66
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
190
Getting Started with Multilingual Websites on WordPress
karlhudsonphillips
0
190
Website Design for Success - Why Mobile Matters
karlhudsonphillips
0
250
WordPress Tips and Ticks, Part 1
karlhudsonphillips
0
120
The WordPress Community
karlhudsonphillips
0
120
Other Decks in How-to & DIY
See All in How-to & DIY
活動振り返りと生成AIによるコード生成の試み
covao
0
110
JAWS-UG KOBE #1 - JAWS-UG Updates
awsjcpm
0
100
安全に失敗するための手遊び-未定義動作を引き出そう-
zilmina
0
660
Raspberry Pi Connectを使って #Manus => Node-RED操作チャレンジ #iotlt vol121
n0bisuke2
0
150
バッドプラクティスから学ぶハワイアン航空で行く re:Invent
kentosuzuki
0
390
とある航空会社の飛行機の乗り方をお教えします。/20240913-lt
kwada
3
330
LT(Lightning Talk)のドキドキ感を共有する IoT ぼっとを作った話
scbc1167
1
250
あなたは何故コミュニティに参加するのか?
awsjcpm
1
210
個人制作コンテンツの多言語展開のノウハウを全公開! 〜世界に自分を発信しよう!〜
syotasasaki593876
0
110
アイデアをカタチにする、イマジニア
haruka_imgr
0
160
How to get hundreds of organic backlinks through statistics link building
ronishehu
1
300
AWS Summit Japan 2025 個人的参加レポート
midnight480
0
170
Featured
See All Featured
The Art of Programming - Codeland 2020
erikaheidi
56
14k
For a Future-Friendly Web
brad_frost
180
10k
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
640
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.6k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
BBQ
matthewcrist
89
9.9k
Done Done
chrislema
185
16k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.7k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
30
2.9k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
KATA
mclloyd
PRO
32
15k
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