Download as PDF, PPTX
Uploaded byEdmund Turbin
Word press gets responsive 4x3
Responsive design tailors layouts for different screen sizes using techniques like media queries and flexible widths. Responsive images choose the best-sized image for each screen resolution using the srcset and sizes attributes. Retina images provide higher resolution versions for high pixel density displays. WordPress has built-in responsive image support through srcset and intermediate image sizes, but themes must implement these features for non-media images.
More Related Content
Similar to Word press gets responsive 4x3
Word press gets responsive 4x3
- 1.
- 2. 1. About ResponsiveDesign 2. About Responsive Images 3. About Retina Images 4. Responsive Support in WordPress 5. Summary Agenda
- 3.
- 4. What is ResponsiveDesign • 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. LAYOUTS THAT WORKFOR ALL SCREENS
- 7.
- 8.
- 9. Why Responsive Images? Mobileusers 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
- 10. More Mobile thanDesktop
- 11. IMAGES THAT WORKFOR ALL VISITORS
- 14.
- 15. Retina Images • TermCreated 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
- 16. High Res images •Retina Images • high resolution • double, triple or even higher • aspect ratio maintained 1x 2x 3x
- 17.
- 18. New in WordPress4.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/
- 19. New Image Sizeas of 4.4 • Medium Large • Dimensions - 768 x height
- 20. WordPress Default ImageSizes • First Level • Second Level • Third Level • First Level • Second Level • Third Level
- 21. 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)
- 22. Show all ImageSizes 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
- 23. 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
- 24. Adding Images tothe Media Library Media -> Add New •Uploads original file •WordPress creates image files for all media sizes
- 25. 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
- 26. <img> element srcset attribute sizesattribute
- 27. <img> src attribute loadsmedia file
- 28.
- 29. srcset attribute specifies mediaat different display widths
- 30.
- 31. sizes attribute how widean image is depending on the screen size
- 32. sizes attribute <img src=“image.png” srcset=“image.png4003w” sizes="(max-width: 768px) 50vw”, 100vw>
- 33. Media Queries @media screenand (min-width: 480px) { img { width: 50%; } }
- 34. <img> tag withsrcset 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">
- 35. Which Image isUsed 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/
- 36. 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/
- 37.
- 38. Responsive Images Image loadedbased on screen size
- 39. Retina Images Used forhigh resolution 2x displays
- 40. Summary • Responsive imagesallow 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
- 41.