SIZING UP RESPONSIVE IMAGES TALK MAKE A PLAN BEFORE YOU DRUPAL - PowerPoint PPT Presentation

HERO: MORE TIDY 2X 320 640 400 800 500 1000 640 1280 800 1600 1000 2000 1280 2560 1600 3200

HERO: FINAL SOURCE WIDTHS 320 400 25% 500 25% 640 28% 800 25% 1000 25% 1280 28% 1600 25% 2000 25% 2560 25.6% 3200 25%

HERO: FINAL SOURCE WIDTHS 320 400 11 source widths 500 640 800 vs. 1000 1280 18 source widths 1600 2000 2560 3200

SIDE: TIDY NUMBERS 303.104 300 378.88 375 473.6 470 592 600

SIDE: TIDY NUMBERS 300 375 25% 470 27% 600 27.7%

SIDE: TIDY 2X 300 600 375 750 470 940 600 1200

SIDE: MORE TIDY 2X 300 600 375 750 470 940 600 1200

SIDE: FINAL SOURCE WIDTHS 300 375 25% 470 27% 600 27.7% 750 25% 940 25.33% 1200 27.7%

SIDE: FINAL SOURCE WIDTHS 300 7 source widths 375 470 vs. 600 750 8 source widths 940 1200

SIZES ATTRIBUTE QUICK ACCESS LAYOUT INFO Photo credit: London Looks, “Kittens!”, Flickr Creative Commons

HERO: SIZES Breakpoints Final width Sizes width Default 100% 100vw (min-width: 100em) 100rem 100rem <img sizes="(min-width: 100em) 100rem, 100vw">

SIDE: SIZES Breakpoints Final width Sizes width Default 90% 90vw (min-width: 37.5em) 36% 36vw (min-width: 75em) 40% - 48px calc(40vw - 3rem) (min-width: 100em) 640px - 48px 37rem <img sizes="(min-width: 100em) 37rem, (min-width: 75em) calc(40vw - 3rem), (min-width: 37.5em) 36vw, 90vw">

SRCSET ATTRIBUTE LIST IMAGE SOURCE FILES WITH WIDTHS Photo credit: Mathias Erhart, “kittens”, Flickr Creative Commons

HERO: SRCSET <img srcset=" 320 hero320.jpg 320w, 400 hero400.jpg 400w, 500 hero500.jpg 500w, 640 hero640.jpg 640w, 800 hero800.jpg 800w, 1000 hero1000.jpg 1000w, 1280 hero1280.jpg 1280w, 1600 hero1600.jpg 1600w, 2000 hero2000.jpg 2000w, 2560 hero2560.jpg 2560w, 3200 hero3200.jpg 3200w">

SIDE: SRCSET <img srcset=" 300 side300.jpg 300w, 375 side375.jpg 375w, 470 side470.jpg 470w, 600 side600.jpg 600w, 750 side750.jpg 750w, 940 side940.jpg 940w, 1200 side1200.jpg 1200w">

THIS SOUNDS LIKE A JOB FOR… ROBOTS! Photo credit: theresa21, “Daxie’s no match for the punching robots”, Flickr Creative Commons

CSS RULES MAKE IMAGES FLUID Photo credit: Kevin Pelrine, “Leroy the Ruler”, Flickr Creative Commons

IMAGE RULES img { height: auto; width: 100%; }

WIDTH: 100%

MAX-WIDTH: 100% (MAYBE)

HOLD UP. TIME TO DRUPAL.

BREAK DANCING BREAKPOINTS AND BREAKPOINT GROUPS Photo credit: Trish Hamme, “Ta-Da !!!!”, Flickr Creative Commons

Empty srcset is all we need

Add breakpoint group: Sizes Select Empty srcset []

Export to theme .info file? Optional.

DRUPAL 8 BREAKPOINTS.YML THEME.empty: label: Empty mediaQuery: '' weight: 1

SEND IN THE ROBOTS IMAGE STYLES Photo credit: Andy Miicone, “Miisa”, Flickr Creative Commons

HERO: FILE WIDTHS 320 400 500 640 800 1000 1280 1600 2000 2560 3200

SIDE: FILE WIDTHS 300 375 470 600 750 940 1200

Image styles: Add style

Name style: width_X rectangle_WxH square_WxH

Add width Allow upscaling

LET’S MAP THIS OUT PICTURE MAPPINGS AND FALLBACK STYLES Photo credit: Little Dog Laughed, “Geography Cat”, Flickr Creative Commons

Add mapping

Select breakpoint group

Mapping name Select sizes

Drupal 8! Add responsive image style

D8: Set fallback image style