Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Word press gets responsive 4x3

890 views

Published on

Overview of responsive images functionality in WordPress from my talk at WordCamp Antwerp 2016.

Published in: Internet
  • Be the first to comment

  • Be the first to like this

Word press gets responsive 4x3

  1. 1. WordPress Gets Responsive
  2. 2. 1. About Responsive Design 2. About Responsive Images 3. About Retina Images 4. Responsive Support in WordPress 5. Summary Agenda
  3. 3. ABOUT RESPONSIVE DESIGN
  4. 4. 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
  5. 5. LAYOUTS THAT WORK FOR ALL SCREENS
  6. 6. ABOUT RESPONSIVE IMAGES
  7. 7. WHAT MAKES IMAGE RESPONSIVE?
  8. 8. 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
  9. 9. More Mobile than Desktop
  10. 10. IMAGES THAT WORK FOR ALL VISITORS
  11. 11. ABOUT RETINA IMAGES
  12. 12. 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
  13. 13. High Res images • Retina Images • high resolution • double, triple or even higher • aspect ratio maintained 1x 2x 3x
  14. 14. RESPONSIVE SUPPORT IN WORDPRESS
  15. 15. 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/
  16. 16. New Image Size as of 4.4 • Medium Large • Dimensions - 768 x height
  17. 17. WordPress Default Image Sizes • First Level • Second Level • Third Level • First Level • Second Level • Third Level
  18. 18. 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)
  19. 19. 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
  20. 20. 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
  21. 21. Adding Images to the Media Library Media -> Add New •Uploads original file •WordPress creates image files for all media sizes
  22. 22. 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
  23. 23. <img> element srcset attribute sizes attribute
  24. 24. <img> src attribute loads media file
  25. 25. <img> element <img src=“image.png”>
  26. 26. srcset attribute specifies media at different display widths
  27. 27. srcset attribute <img src=“image.png” srcset=“image.png 40003w”>
  28. 28. sizes attribute how wide an image is depending on the screen size
  29. 29. sizes attribute <img src=“image.png” srcset=“image.png 4003w” sizes="(max-width: 768px) 50vw”, 100vw>
  30. 30. Media Queries @media screen and (min-width: 480px) { img { width: 50%; } }
  31. 31. <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">
  32. 32. 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/
  33. 33. 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/
  34. 34. SUMMARY
  35. 35. Responsive Images Image loaded based on screen size
  36. 36. Retina Images Used for high resolution 2x displays
  37. 37. 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
  38. 38. Thank you! @spicecadet edmund.turbin@wpengine.com

×