word press gets responsive 4x3
TRANSCRIPT
WordPress Gets
Responsive
1. About Responsive Design 2. About Responsive Images 3. About Retina Images 4. Responsive Support in
WordPress 5. Summary
Agenda
ABOUT RESPONSIVE DESIGN
What is Responsive Design
• Design and development respond to the user • Layout tailored for resolution, image size,
scripting • Media Queries to determine layout at
different sizes • Percentages rather that fixed width • display: none - to hide sections when
appropriate
LAYOUTS THAT WORK FOR ALL SCREENS
ABOUT RESPONSIVE IMAGES
WHAT MAKES IMAGE RESPONSIVE?
Why Responsive Images?
Mobile users have surpassed desktop users
Images comprise up to 62% the web
No benefit of hi-res images on low-res screens
Small images look fuzzy at high resolution
More Mobile than Desktop
IMAGES THAT WORK FOR ALL VISITORS
ABOUT RETINA IMAGES
Retina Images
• Term Created by Apple for the iPhone 4 • High pixel density
• Pixels are not visible to the eye • resolution effectively half • 2560x1600 is 1280x800
• HiDPI displays • 2x, 3x resolution
High Res images
• Retina Images • high resolution
• double, triple or even higher
• aspect ratio maintained
1x2x
3x
RESPONSIVE SUPPORT IN WORDPRESS
New in WordPress 4.4
Support for srcset HTML attribute
Uses default sizes attribute
Reference: https://make.wordpress.org/core/2015/11/10/responsive-images-in-wordpress-4-4/
New Image Size as of 4.4
• Medium Large • Dimensions - 768 x height
WordPress Default Image Sizes
• First Level • Second Level
• Third Level
• First Level • Second Level
• Third Level
get_intermediate_image_sizes()
var_dump( get_image_sizes() );
array (size=5) 0 => string 'thumbnail' (length=9) 1 => string 'medium' (length=6) 2 => string 'medium_large' (length=12) 3 => string 'large' (length=5) 4 => string 'post-thumbnail' (length=14)
Show all Image Sizes
Display all image sizes • Use the example function from the codex • Copy function and call it via var_dump:
var_dump( get_image_sizes() );
Reference: https://codex.wordpress.org/Function_Reference/get_intermediate_image_sizes
get_image_sizes() returns:
array (size=5) 'thumbnail' => array (size=3) 'width' => string '150' (length=3) 'height' => string '150' (length=3) 'crop' => boolean true 'medium' => array (size=3) 'width' => string '300' (length=3) 'height' => string '300' (length=3) 'crop' => boolean false 'medium_large' => array (size=3) 'width' => string '768' (length=3) 'height' => string '0' (length=1) 'crop' => boolean false
Adding Images to the Media Library
Media -> Add New •Uploads original file
•WordPress creates image files for all media sizes
Custom Image Sizes
• Defaults sizes can be changed in the dashboard
• Dashboard -> Settings -> Media
• Can be created via add_image_size() • add_image_size($name, $width, $height, $crop)
width x height
<img> element
srcset attribute
sizes attribute
<img>
src attribute loads media file
<img> element
<img src=“image.png”>
srcset attribute
specifies media at different display widths
srcset attribute
<img src=“image.png” srcset=“image.png 40003w”>
sizes attribute
how wide an image is
depending on the screen size
sizes attribute
<img src=“image.png” srcset=“image.png 4003w”
sizes="(max-width: 768px) 50vw”, 100vw>
Media Queries
@media screen and (min-width: 480px) { img { width: 50%; } }
<img> tag with srcset and sizes
<img src="peleton-Bicycle-Race.jpg"
srcset="peleton-Bicycle-Race.jpg 4003w, peleton-Bicycle-Race-300x190.jpg 300w, peleton-Bicycle-Race-768x487.jpg 768w, peleton-Bicycle-Race-1024x649.jpg 1024w, peleton-Bicycle-Race-1200x761.jpg 1200w"
sizes="(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px"
height="2537" width="4003">
Which Image is Used
Browser Decides Based on a Calculation • image width / display width
•results vary depending on browser
Reference: https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/
WP Retina 2x
Media -> Retina •Creates 2x version of each file
•Changes to 2x retina version depending on resolution
Reference: https://wordpress.org/plugins/wp-retina-2x/
SUMMARY
Responsive ImagesImage loaded based on screen size
Retina ImagesUsed for high resolution 2x displays
Summary
• Responsive images allow for an optimized experience for all displays • WordPress has built in support for responsive images • Theme images outside of the Media Library will not be responsive
