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

▶
sizing up responsive images
SMART_READER_LITE
LIVE PREVIEW

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

Dec 02, 2023 203 likes •1.93k views

SIZING UP RESPONSIVE IMAGES TALK MAKE A PLAN BEFORE YOU DRUPAL MAY 10, 2016 MARC DRUMMOND DATE SPEAKER Photo credit: Dave Emerson, Trouble, Flickr Creative Commons Marc Drummond Front-end Developer, Lullabot @MarcDrummond

slide-1
SLIDE 1
slide-2
SLIDE 2

MARC DRUMMOND

TALK DATE SPEAKER

MAY 10, 2016

SIZING UP RESPONSIVE IMAGES

MAKE A PLAN BEFORE YOU DRUPAL

Photo credit: Dave Emerson, “Trouble”, Flickr Creative Commons
slide-3
SLIDE 3 Photo credit: Dave Emerson, “Trouble”, Flickr Creative Commons

Marc Drummond

@MarcDrummond

mdrummond

IRC, drupal.org marcdrummond.com

Front-end Developer, Lullabot

slide-4
SLIDE 4

CERN, WE HAVE A PROBLEM

AND IT INVOLVES CATS

slide-5
SLIDE 5 Photo credit: Mr Thinktank, “SDC19276”, Flickr Creative Commons
slide-6
SLIDE 6 Photo credit: Doug Woods, “Midge Our Cute New Kitten Cat”, Flickr Creative Commons
slide-7
SLIDE 7 Photo credit: [paumelia], “so happy smiling cat”, Flickr Creative Commons
slide-8
SLIDE 8 Photo credit: Pete Teoh, “Aston Loves Andy”, Flickr Creative Commons
slide-9
SLIDE 9 Photo credit: Doug Woods, “Midge Our Cute New Kitten Cat”, Flickr Creative Commons
slide-10
SLIDE 10 Photo credit: Doug Woods, “Midge Our Cute New Kitten Cat”, Flickr Creative Commons
slide-11
SLIDE 11 Photo credit: Doug Woods, “Midge Our Cute New Kitten Cat”, Flickr Creative Commons
slide-12
SLIDE 12 Photo credit: Doug Woods, “Midge Our Cute New Kitten Cat”, Flickr Creative Commons
slide-13
SLIDE 13 Photo credit: Guyon Moree, “Angry Tiger”, Flickr Creative Commons
slide-14
SLIDE 14

JUST MAKE SMALL IMAGES SIZED FOR SMALL SCREENS!

WE GOT THIS.
 WHAT COULD GO WRONG?

slide-15
SLIDE 15 Photo credit: Pete Teoh, “Aston Loves Andy”, Flickr Creative Commons
slide-16
SLIDE 16 Photo credit: Doug Woods, “Midge Our Cute New Kitten Cat”, Flickr Creative Commons
slide-17
SLIDE 17 Photo credit: [paumelia], “so happy smiling cat”, Flickr Creative Commons
slide-18
SLIDE 18 Photo credit: Mr Thinktank, “SDC19276”, Flickr Creative Commons
slide-19
SLIDE 19 Photo credit: Doug Woods, “Midge Our Cute New Kitten Cat”, Flickr Creative Commons
slide-20
SLIDE 20 Photo credit: Guyon Moree, “Angry Tiger”, Flickr Creative Commons
slide-21
SLIDE 21

SMALL SCREEN LARGE SCREEN SMALL PHOTO LARGE PHOTO

slide-22
SLIDE 22 Photo credit: Tina Lawson, “Heidi”, Flickr Creative Commons

What if we…

… provide different image files… … for different screen sizes?

Woh.

slide-23
SLIDE 23 Photo credit: Gonzolo G Useta, “La Ultima Vida”, Flickr Creative Commons

… browsers are fast Except… … HTML parsed first, 
 before CSS or JS

slide-24
SLIDE 24 Photo credit: Tina Lawson, “Heidi”, Flickr Creative Commons

What if we…

… give browsers layout info… … in our HTML?

Woh.

slide-25
SLIDE 25
slide-26
SLIDE 26

<img src="small.jpg" srcset="large.jpg 1024w, medium.jpg 640w, small.jpg 320w" sizes="(min-width: 36em) 33.3vw, 100vw" alt="A cute cat">

SIZES + SRCSET ATTRIBUTES

slide-27
SLIDE 27

<img src="small.jpg" srcset="large.jpg 1024w, medium.jpg 640w, small.jpg 320w" sizes="(min-width: 36em) 33.3vw, 100vw" alt="A cute cat">

Width of image in layout vw = % of viewport width Breakpoint where image width changes

slide-28
SLIDE 28

<img src="small.jpg" srcset="large.jpg 1024w, medium.jpg 640w, small.jpg 320w" sizes="(min-width: 36em) 33.3vw, 100vw" alt="A cute cat">

Largest to smallest First match selected

slide-29
SLIDE 29

<img src="small.jpg" srcset="large.jpg 1024w, medium.jpg 640w, small.jpg 320w" sizes="(min-width: 36em) 33.3vw, 100vw" alt="A cute cat">

Width of image file w = px

slide-30
SLIDE 30

<img src="small.jpg" srcset="large.jpg 1024w, medium.jpg 640w, small.jpg 320w" sizes="(min-width: 36em) 33.3vw, 100vw" alt="A cute cat">

Controlling image Initial file = fallback

slide-31
SLIDE 31

<img src="small.jpg" srcset="large.jpg 1024w, medium.jpg 640w, small.jpg 320w" sizes="(min-width: 36em) 33.3vw, 100vw" alt="A cute cat">

THEN LET THE BROWSER PICK! HOW MUCH SPACE FOR IMAGE? OPTIONS FOR IMAGE FILE SIZE?

slide-32
SLIDE 32

LET’S MAKE A PLAN.

slide-33
SLIDE 33

RESPONSIVE LAYOUTS ARE FLUID

IMAGE FILES ARE NOT

Photo credit: CelloPics, “Cat Only Loves Fresh Water”, Flickr Creative Commons
slide-34
SLIDE 34

TARGET / CONTEXT = RESULT

WIDTH %

slide-35
SLIDE 35

TARGET / CONTEXT = RESULT

WIDTH % 750px 370px 260px

slide-36
SLIDE 36

TARGET / CONTEXT = RESULT

WIDTH % 750px 49.33%
 (370px) 34.67%
 (260px)

slide-37
SLIDE 37

TARGET / CONTEXT = RESULT

WIDTH % 1000px 49.33%
 (493px) 34.67%
 (347px)

slide-38
SLIDE 38

TARGET / CONTEXT = RESULT

WIDTH % 1653px 49.33%
 (815px) 34.67%
 (573px)

slide-39
SLIDE 39

RASTER IMAGES

MEASURED IN PX, NOT %

slide-40
SLIDE 40

RASTER IMAGES

MEASURED IN PX, NOT %

Photo credit: C. McKee, “cat duh face”, Flickr Creative Commons
slide-41
SLIDE 41

RASTER IMAGES

MEASURED IN PX, NOT %

Photo credit: C. McKee, “cat duh face”, Flickr Creative Commons
slide-42
SLIDE 42

RASTER IMAGES

MEASURED IN PX, NOT %

Photo credit: C. McKee, “cat duh face”, Flickr Creative Commons
slide-43
SLIDE 43

JUST ENOUGH IMAGE PX

PX NEEDED VARIES BY VIEWPORT SIZE 750px

slide-44
SLIDE 44

JUST ENOUGH IMAGE PX

PX NEEDED VARIES BY VIEWPORT SIZE 1550px

slide-45
SLIDE 45

ANALYZE

HOW DOES THIS TYPE OF IMAGE FIT INTO THE SITE LAYOUT?

Photo credit: Jenny Lee Silver, “Photo A Day: June 2006”, Flickr Creative Commons
slide-46
SLIDE 46

Tiger sunbathing in a box

I am unable to envision anything quite as adorable as my cat Tiger lounging in the sun, cuddled in his precious little box. He has been a fan of this box since he was just a kitten, and we have preserved it ever since. When Tiger was just nine months

  • ld, we almost threw out this little half box. He mauled a couch

that day. The next day, we brought in the box from the recycling, and he has been a happy cat ever since. I have taken many photos over the years of Tiger cuddled in this box, but I love how the light looks in this particular picture. You can feel the warmth of the sun, Tiger purring, and envision him slowly closing his eyes and yawning. There are few moments more tender than those of a sunbathing cat.

Tiger looks less cute on the bed than in the box

Photo credits: Clare, “I Am Not Too Big For This Box” and “More Pictures, Seriously?”, Flickr Creative Commons
slide-47
SLIDE 47

Tiger sunbathing in a box

I am unable to envision anything quite as adorable as my cat Tiger lounging in the sun, cuddled in his precious little box. He has been a fan of this box since he was just a kitten, and we have preserved it ever since. When Tiger was just nine months old, we almost threw out this little half box. He mauled a couch that day. The next day, we brought in the box from the recycling, and he has been a happy cat ever

slide-48
SLIDE 48

this box, but I love how the light looks in this particular picture. You can feel the warmth of the sun, Tiger purring, and envision him slowly closing his eyes and yawning. There are few moments more tender than those of a sunbathing cat.

slide-49
SLIDE 49

Tiger sunbathing in a box

I am unable to envision anything quite as adorable as my cat Tiger lounging in the sun, cuddled in his precious little box. He has been a fan of this box since he was just a kitten, and we have preserved it ever since. When Tiger was just nine months

  • ld, we almost threw out this little half box. He mauled a couch

that day. The next day, we brought in the box from the recycling, and he has been a happy cat ever since. I have taken many photos over the years of Tiger cuddled in this box, but I love how the light looks in this particular picture. You can feel the warmth of the sun, Tiger purring, and envision him slowly closing his eyes and yawning. There are few moments more tender than those of a sunbathing cat.

Tiger looks less cute on the bed than in the box

HERO IMAGE

SIDE IMAGE

slide-50
SLIDE 50

<article class="post"> <figure class="post__hero-image"><img src="images/ suncat.jpg" alt="Golden sunbeams warm a cut curled up in a box." /></figure> <div class="post__inner"> <main class="post__body" role="main"> <h1 class="post__title">Tiger sunbathing in a box</ h1> <p>I am unable to envision … sunbathing cat.</p> </main> <aside class="post__aside" role="complementary"> <figure class="post__aside-image"> <img src="images/suncat.jpg" alt="Golden sunbeams warm a cut curled up in a box." /> <figcaption class="post__aside-image- caption">Tiger cuddles in his box, basking in the sun.</ figcaption> </figure> </aside> </div> </article>

slide-51
SLIDE 51

SIDE IMAGE

.post > .post__inner > .post__aside > .post__aside-image > img

slide-52
SLIDE 52

SIDE IMAGE

.post > .post__inner > .post__aside > .post__aside-image > img <article class="post"> … <div class="post__inner"> … <aside class="post__aside" role="complementary"> <figure class="post__aside-image"> <img src="images/suncat.jpg" alt="Golden sunbeams warm a cut curled up in a box." /> .. </figure> </aside> </div> </article>

slide-53
SLIDE 53

.post__aside { padding: 5%; width: 100%; @media (min-width: 37.5em) { float: right; padding: 2%; width: 40%; } @media (min-width: 75em) { padding: 1.5rem; } }

.POST__ASIDE RULES

slide-54
SLIDE 54

SIDE IMAGE

Breakpoints .post .post__aside Final width Default 100% (min-width: 37.5em) 100% (min-width: 75em) 100% (min-width: 100em) 100rem

slide-55
SLIDE 55

SIDE IMAGE

Breakpoints .post .post__aside Final width Default 100% 100% - 5% x 2 90% (min-width: 37.5em) 100% (min-width: 75em) 100% (min-width: 100em) 100rem

100% - 5% x 2 = 90%

slide-56
SLIDE 56

SIDE IMAGE

Breakpoints .post .post__aside Final width Default 100% 100% - 5% x 2 90% (min-width: 37.5em) 100% 40% - 2% x 2 36% (min-width: 75em) 100% (min-width: 100em) 100rem

40% - 2% x 2 = 36%

slide-57
SLIDE 57

SIDE IMAGE

Breakpoints .post .post__aside Final width Default 100% 100% - 5% x 2 90% (min-width: 37.5em) 100% 40% - 2% x 2 36% (min-width: 75em) 100% 40% - 1.5rem x 2 40% - 48px (min-width: 100em) 100rem

40% - 1.5rem x 2 40% - (1.5 x 16px) x 2 40% - (24px) x 2 = 48px

slide-58
SLIDE 58

SIDE IMAGE

Breakpoints .post .post__aside Final width Default 100% 100% - 5% x 2 90% (min-width: 37.5em) 100% 40% - 2% x 2 36% (min-width: 75em) 100% 40% - 1.5rem x 2 40% - 48px (min-width: 100em) 100rem 40% - 1.5rem x 2 640px - 48px

100rem x 40% - 48px (100 x 16px) x 40% - 48px (1600 px x 40%) - 48px

slide-59
SLIDE 59

BALLPARK FIGURES

DETERMINE INITIAL SOURCE FILE WIDTHS

Photo credit: Fuzzy Gerdes, “Parker Loooves the Cubs”, Flickr Creative Commons
slide-60
SLIDE 60

SIDE IMAGE

Breakpoints Width Min px Max px Default 90% (min-width: 37.5em) 36% (min-width: 75em) 40% - 48px (min-width: 100em) 640px - 48px

slide-61
SLIDE 61

SIDE IMAGE

Breakpoints Width Min px Max px Default 90% 288 (min-width: 37.5em) 36% (min-width: 75em) 40% - 48px (min-width: 100em) 640px - 48px

90% x 320px = 288px

slide-62
SLIDE 62

SIDE IMAGE

Breakpoints Width Min px Max px Default 90% 288 540 (min-width: 37.5em) 36% (min-width: 75em) 40% - 48px (min-width: 100em) 640px - 48px

90% x 37.5em 90% x (37.5 x 16px) 90% x 600px = 540px

slide-63
SLIDE 63

SIDE IMAGE

Breakpoints Width Min px Max px Default 90% 288 540 (min-width: 37.5em) 36% 216 (min-width: 75em) 40% - 48px (min-width: 100em) 640px - 48px

36% x 37.5em 36% x (37.5 x 16px) 36% x 600px = 216px

slide-64
SLIDE 64

SIDE IMAGE

Breakpoints Width Min px Max px Default 90% 288 540 (min-width: 37.5em) 36% 216 432 (min-width: 75em) 40% - 48px (min-width: 100em) 640px - 48px

36% x 75em 36% x (75 x 16px) 36% x 1200px = 432px

slide-65
SLIDE 65

SIDE IMAGE

Breakpoints Width Min px Max px Default 90% 288 540 (min-width: 37.5em) 36% 216 432 (min-width: 75em) 40% - 48px 432 (min-width: 100em) 640px - 48px

40% x 75em - 48px 40% x (75 x 16px) - 48px (40% x 1200px) - 48px 480px - 48px = 432px

slide-66
SLIDE 66

SIDE IMAGE

Breakpoints Width Min px Max px Default 90% 288 540 (min-width: 37.5em) 36% 216 432 (min-width: 75em) 40% - 48px 432 592 (min-width: 100em) 640px - 48px

40% x 100em - 48px 40% x (100 x 16px) - 48px (40% x 1600px) - 48px 640px - 48px = 592px

slide-67
SLIDE 67

SIDE IMAGE

Breakpoints Width Min px Max px Default 90% 288 540 (min-width: 37.5em) 36% 216 432 (min-width: 75em) 40% - 48px 432 592 (min-width: 100em) 640px - 48px 592 592

640px - 48px = 592px

slide-68
SLIDE 68

SIDE IMAGE

Breakpoints Width Min px Max px Default 90% 288 540 (min-width: 37.5em) 36% 216 432 (min-width: 75em) 40% - 48px 432 592 (min-width: 100em) 640px - 48px 592 592

Min size: 216px Max size: 592px

slide-69
SLIDE 69

RULE OF 25%

WIDTH X 1.25 HEIGHT X 1.25 PIXELS X 1.5625

56.25% MORE PIXELS

slide-70
SLIDE 70

SIDE: RULE OF 25%

216 270 337.5 421.875 527.34375 659.1796875

slide-71
SLIDE 71

SIDE: -25% FROM TOP

242.4832 303.104 378.88 473.6 592

slide-72
SLIDE 72

TWICE AS NICE

SCREEN RESOLUTION DENSITIES

Photo credit: Mrs eNil, “Bed cuddles”, Flickr Creative Commons
slide-73
SLIDE 73

1X SCREEN RESOLUTION

= 1px in browser

Photo credit: Indi Samarajiva, “Poosa Eats a Phone”, Flickr Creative Commons
slide-74
SLIDE 74

2X SCREEN RESOLUTION

= 1px in browser

Photo credit: Edwin Lee, “Carl the Cat”, Flickr Creative Commons
slide-75
SLIDE 75

GET ME MORE PIXELS, STAT!

Photo credit: Jami, “Singin’ on the Fridge”, Flickr Creative Commons
slide-76
SLIDE 76

SIDE: 2X SCREEN DENSITIES

242.4832 303.104 378.88 473.6 592 484.9664 606.208 757.76 947.2 1184

slide-77
SLIDE 77

TIDY UP

SENSIBLE SOURCE FILE WIDTHS

Photo credit: Sandra Forbes, “Clean Kitty”, Flickr Creative Commons
slide-78
SLIDE 78

SIDE: TIDY NUMBERS

242.4832 303.104 378.88 473.6 592 240 300 375 470 600

slide-79
SLIDE 79

SIDE: TIDY NUMBERS

240 300 375 470 600

25% 27% 27.7% 25%

slide-80
SLIDE 80

SIDE: TIDY 2X

240 300 375 470 600 480 600 750 940 1200

slide-81
SLIDE 81

SIDE: MORE TIDY 2X

240 300 375 470 600 480 600 750 940 1200 480 960

slide-82
SLIDE 82

SIDE: FINAL SOURCE WIDTHS

240 300 375 480 600 750 960 1200

25% 27% 25% 27.7% 28% 25% 25%

slide-83
SLIDE 83

SIDE: FINAL SOURCE WIDTHS

240 300 375 480 600 750 960 1200 8 source widths vs. 10 source widths

slide-84
SLIDE 84

SIZES ATTRIBUTE

QUICK ACCESS LAYOUT INFO

Photo credit: London Looks, “Kittens!”, Flickr Creative Commons
slide-85
SLIDE 85

SIDE: SIZES

<img sizes="(min-width: 100em) 37rem, (min-width: 75em) calc(40vw - 3rem), (min-width: 37.5em) 36vw, 90vw">

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

slide-86
SLIDE 86

SRCSET ATTRIBUTE

LIST IMAGE SOURCE FILES WITH WIDTHS

Photo credit: Mathias Erhart, “kittens”, Flickr Creative Commons
slide-87
SLIDE 87

SIDE: SRCSET

240 300 375 480 600 750 960 1200 <img srcset=" side240.jpg 240w, side300.jpg 300w, side375.jpg 375w, side470.jpg 470w, side600.jpg 600w, side750.jpg 750w, side960.jpg 960w, side1200.jpg 1200w">

slide-88
SLIDE 88

SIDE: FINAL

<img src="side240.jpg" alt="Cat head down on bed, eyes barely open." sizes="(min-width: 100em) 37rem, (min-width: 75em) calc(40vw - 3rem), (min-width: 37.5em) 36vw, 90vw" srcset=" side240.jpg 240w, side300.jpg 300w, side375.jpg 375w, side470.jpg 470w, side600.jpg 600w, side750.jpg 750w, side960.jpg 960w, side1200.jpg 1200w">

slide-89
SLIDE 89

CSS RULES

MAKE IMAGES FLUID

Photo credit: Kevin Pelrine, “Leroy the Ruler”, Flickr Creative Commons
slide-90
SLIDE 90

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

slide-91
SLIDE 91

WIDTH: 100%

slide-92
SLIDE 92

MAX-WIDTH: 100% (MAYBE)

slide-93
SLIDE 93

THIS SOUNDS LIKE A JOB FOR…

ROBOTS!

Photo credit: theresa21, “Daxie’s no match for the punching robots”, Flickr Creative Commons
slide-94
SLIDE 94

PICTUREFILL.JS

USE RESPONSIVE IMAGES IN OLDER BROWSERS SCOTTJEHL.GITHUB.IO/PICTUREFILL/

slide-95
SLIDE 95

HOLD UP. TIME TO DRUPAL.

slide-96
SLIDE 96

DRUPAL 7

PICTURE AND BREAKPOINTS MODULES

slide-97
SLIDE 97

DRUPAL 8

RESPONSIVE IMAGE AND BREAKPOINT MODULES (IN CORE!)

slide-98
SLIDE 98

BREAK DANCING

BREAKPOINTS AND BREAKPOINT GROUPS

Photo credit: Trish Hamme, “Ta-Da !!!!”, Flickr Creative Commons
slide-99
SLIDE 99

Empty srcset is all we need

slide-100
SLIDE 100

Add breakpoint group: Sizes Select Empty srcset []

slide-101
SLIDE 101

Export to theme .info file? Optional.

slide-102
SLIDE 102

THEME.empty: label: Empty mediaQuery: '' weight: 1

DRUPAL 8 BREAKPOINTS.YML

slide-103
SLIDE 103

SEND IN THE ROBOTS

IMAGE STYLES

Photo credit: Andy Miicone, “Miisa”, Flickr Creative Commons
slide-104
SLIDE 104

SIDE: FILE WIDTHS

300 375 470 600 750 940 1200

slide-105
SLIDE 105

Image styles: Add style

slide-106
SLIDE 106

Name style: width_X rectangle_WxH square_WxH

slide-107
SLIDE 107

Scale

slide-108
SLIDE 108

Add width Allow upscaling

slide-109
SLIDE 109

LET’S MAP THIS OUT

PICTURE MAPPINGS AND FALLBACK STYLES

Photo credit: Little Dog Laughed, “Geography Cat”, Flickr Creative Commons
slide-110
SLIDE 110

Add mapping

slide-111
SLIDE 111

Select breakpoint group

slide-112
SLIDE 112

Mapping name Select sizes

slide-113
SLIDE 113

Add responsive image style Drupal 8!

slide-114
SLIDE 114

D8: Set fallback image style

slide-115
SLIDE 115

SIDE: SIZES

<img sizes="(min-width: 100em) 37em, (min-width: 75em) calc(40vw - 3em), (min-width: 37.5em) 36vw, 90vw">

slide-116
SLIDE 116

Enter sizes Select styles

slide-117
SLIDE 117

CHECK IT BEFORE YOU WRECK IT

IMAGE QUALITY MATTERS

Photo credit: Woodleyworks, “Lucky was inexorably drawn to the mirror”, Flickr Creative Commons
slide-118
SLIDE 118

Image quality

slide-119
SLIDE 119

Try lower: 60?

slide-120
SLIDE 120

STYLE SELECTIONS VIA UI

FIELD FORMATTERS AND YOU

Photo credit: George Pavlov, “I’m pretty kitty, right?”, Flickr Creative Commons
slide-121
SLIDE 121

Field display

slide-122
SLIDE 122

Change format to Picture

slide-123
SLIDE 123

Select mapping, fallback

slide-124
SLIDE 124

STYLE SELECTIONS VIA CODE

THEME PREPROCESSING FUNCTIONS AND MORE

Photo credit: Brian Dailey, “Cat + Code + Snow”, Flickr Creative Commons
slide-125
SLIDE 125

function THEME_preprocess_node(&$variables) { if ($variables['type'] == 'blog') { $fallback_style = 'width_400'; if ($account = user_load($node->uid)) { if (isset($account->picture->uri) && ($mapping = picture_mapping_load('author_image')) && ($breakpoints = picture_get_mapping_breakpoints($mapping, $fallback_style))) { $image_options = array( 'uri' => $account->picture->uri, 'alt' => '', 'breakpoints' => $breakpoints, 'style_name' => $fallback_style, ); $variables['user_picture'] = theme('picture', $image_options); } } } }

slide-126
SLIDE 126

$content['side_image_responsive'] = array( '#type' => 'responsive_image', '#uri' => 'public://side-image.png', '#attributes' => array( 'alt' => t('Hero image'), 'title' => t('Hero image title'), ), '#responsive_image_style_id' => 'hero', );

Simpler in D8!

slide-127
SLIDE 127

RESPONSIVE IMAGES AND WYSIWYG IN DRUPAL

DRUPAL 8 ISSUE: DRUPAL.ORG/NODE/2061377

slide-128
SLIDE 128

RESPONSIVE IMAGE BATCH

DRUPAL.ORG/SANDBOX/DANNYJORIS/2607668 HELPS SET UP IMAGE STYLES BASED ON LAYOUT RIGHT NOW GEARED TOWARDS SRC PER BREAKPOINT

slide-129
SLIDE 129

DRUPAL SASS BREAKPOINTS

NPMJS.COM/PACKAGE/DRUPAL-SASS-BREAKPOINTS IMPORT DRUPAL BREAKPOINTS.YML VALUES INTO SASS

slide-130
SLIDE 130

TIME TO GET EVEN MORE HIP

ADVANCED RESPONSIVE IMAGE USE CASES

Photo credit: UnknownNet Photography, “Cat in the Hat”, Flickr Creative Commons
slide-131
SLIDE 131

<picture> <source media="(min-width: 40em)" srcset="big.jpg 1x, big-hd.jpg 2x"> <source srcset="small.jpg 1x, small-hd.jpg 2x"> <img src="fallback.jpg" alt=""> </picture>

PICTURE ELEMENT

slide-132
SLIDE 132

<picture> <source media="(min-width: 40em)" srcset="big.jpg 1x, big-hd.jpg 2x"> <source srcset="small.jpg 1x, small-hd.jpg 2x"> <img src="fallback.jpg" alt=""> </picture>

Container for image sources Controlling image Initial file = fallback (Do not put widths on picture element)

slide-133
SLIDE 133

<picture> <source media="(min-width: 40em)" srcset="big.jpg 1x, big-hd.jpg 2x"> <source srcset="small.jpg 1x, small-hd.jpg 2x"> <img src="fallback.jpg" alt=""> </picture>

Breakpoint to select source element File options based on screen resolution

slide-134
SLIDE 134

<picture> <source media="(min-width: 40em)" srcset="big.jpg 1x, big-hd.jpg 2x"> <source srcset="small.jpg 1x, small-hd.jpg 2x"> <img src="fallback.jpg" alt=""> </picture>

Largest to smallest First match selected

slide-135
SLIDE 135

ART DIRECTION

DIFFERENT ASPECT RATIOS PER MEDIA QUERY

slide-136
SLIDE 136

75.33% ASPECT RATIO MOBILE

Photo credit: Torsten Scholz, “Hunting Cat”, Flickr Creative Commons
slide-137
SLIDE 137

61.87% ASPECT RATIO TABLET (MIN-WIDTH: 40EM)

slide-138
SLIDE 138

47.6% ASPECT RATIO DESKTOP (MIN-WIDTH: 70EM)

slide-139
SLIDE 139

31.47% ASPECT RATIO WIDE DESKTOP (MIN-WIDTH: 100EM)

slide-140
SLIDE 140

<picture> <source media="(min-width: 100em)" src="cat-field-75ratio-1600.jpg"> <source media="(min-width: 70em)" src="cat-field-62ratio-1120.jpg"> <source media="(min-width: 40em)" src="cat-field-48ratio-640.jpg"> <source src="cat-field-32ratio-320.jpg"> <img src="cat-field-320.jpg" alt="Cat in field"> </picture>

ASPECT RATIO SWITCHING

slide-141
SLIDE 141

<picture> <source media="(min-width: 100em)" sizes="100vw" srcset="cat-field-75ratio-4000.jpg 4000w, cat-field-75ratio-3200.jpg 3200w, cat-field-75ratio-2000.jpg 2000w, cat-field-75ratio-1600.jpg 1600w"> … <img src="cat-field-320.jpg" alt="Cat in field"> </picture>

ASPECT RATIO SWITCHING

slide-142
SLIDE 142

ASPECT RATIO CSS

.image-container { height: 0; padding-bottom: 75.33%; position: relative;

  • verflow: hidden;

} .image-container img { left: 50%; position: absolute; top: 50%; transform: translate(-50%, -50%); }

slide-143
SLIDE 143

ASPECT RATIO CSS

@media all and (min-width: 40em) { .image-container { padding-bottom: 61.87%; } } @media all and (min-width: 70em) { .image-container { padding-bottom: 47.6%; } } @media all and (min-width: 100em) { .image-container { padding-bottom: 31.47%; } }

Small to large First match

slide-144
SLIDE 144

HEY WE ACTUALLY GET TO BREAK DANCE NOW!

ART DIRECTION NEEDS BREAKPOINTS AND BREAKPOINT GROUPS

Photo credit: Trish Hamme, “Ta-Da !!!!”, Flickr Creative Commons
slide-145
SLIDE 145

THEME.hero.empty: label: Empty mediaQuery: '' weight: 0 multipliers:

  • 1x

THEME.hero.narrow: label: Narrow mediaQuery: 'all and (min-width: 40em)' weight: 1 multipliers:

  • 1x

THEME.hero.mid: label: Mid mediaQuery: 'all and (min-width: 70em)' weight: 2 multipliers:

  • 1x

THEME.hero.wide: label: Wide mediaQuery: 'all and (min-width: 100em)' weight: 3 multipliers:

  • 1x

BREAKPOINTS.YML

slide-146
SLIDE 146

I WILL NOT APOLOGIZE FOR MORE ROOMBA CAT

CREATE IMAGE STYLES WITH SCALE AND CROP

Photo credit: Andy Miicone, “Miisa”, Flickr Creative Commons
slide-147
SLIDE 147

Scale and crop

slide-148
SLIDE 148

TIME TO LOUNGE ON A MAP

NOT REALLY, BUT HEY YOU SHOULD MATCH BREAKPOINTS WITH IMAGE STYLES

Photo credit: Little Dog Laughed, “Geography Cat”, Flickr Creative Commons
slide-149
SLIDE 149

ART DIRECTION

DIFFERENT IMAGE CROPS PER MEDIA QUERY

slide-150
SLIDE 150

FULL IMAGE DESKTOP (MIN-WIDTH: 70EM)

slide-151
SLIDE 151

TIGHTER CROP TABLET (MIN-WIDTH: 40EM)

slide-152
SLIDE 152

TIGHT CROP MOBILE

slide-153
SLIDE 153

<picture> <source media="(min-width: 70em)" src="cat-field-full.jpg"> <source media="(min-width: 40em)" src="cat-field-tighter.jpg"> <source src="cat-field-tight.jpg"> <img src="cat-field-tight.jpg" alt="Cat in field"> </picture>

IMAGE CROP SWITCHING

slide-154
SLIDE 154

<picture> <source media="(min-width: 70em)"

sizes="100vw"

srcset="cat-field-full-2800.jpg 2800w, cat-field-full-2240.jpg 2240w, cat-field-full-1400.jpg 1400w, cat-field-full-1120.jpg 1120w"> … <img src="cat-field-tight.jpg" alt="Cat in field"> </picture>

IMAGE CROP SWITCHING

slide-155
SLIDE 155

BRING BACK BREAK DANCING

MORE ART DIRECTION WITH BREAKPOINTS AND BREAKPOINT GROUPS

Photo credit: Trish Hamme, “Ta-Da !!!!”, Flickr Creative Commons
slide-156
SLIDE 156

THEME.artcrop.empty: label: Empty mediaQuery: '' weight: 0 multipliers:

  • 1x

THEME.artcrop.narrow: label: Narrow mediaQuery: 'all and (min-width: 40em)' weight: 1 multipliers:

  • 1x

THEME.artcrop.mid: label: Mid mediaQuery: 'all and (min-width: 70em)' weight: 2 multipliers:

  • 1x

BREAKPOINTS.YML

slide-157
SLIDE 157

ROOMBA CAT JUST WANTS TO HELP

HOW CAN IMAGE STYLES HELP WITH CROPPING?

Photo credit: Andy Miicone, “Miisa”, Flickr Creative Commons
slide-158
SLIDE 158

FOCAL POINT: ART DIRECTION

DRUPAL.ORG/PROJECT/FOCAL_POINT ASSIGN FOCUS LEVELS TO IMAGE STYLES

slide-159
SLIDE 159

NEXT TIME TO NAP. MAP. I MEAN MAP.

YES, YOU SHOULD ONCE AGAIN MATCH BREAKPOINTS WITH IMAGE STYLES

Photo credit: Little Dog Laughed, “Geography Cat”, Flickr Creative Commons
slide-160
SLIDE 160

IMAGE TYPES

.WEBP CAN FALLBACK TO .JPG

slide-161
SLIDE 161

<picture> <source type="image/webp” src="cat-field.webp"> <source src="cat-field.jpg"> <img src="cat-field.jpg" alt="Cat in field"> </picture>

IMAGE TYPE SWITCHING

slide-162
SLIDE 162

<picture> <source media="(min-width: 70em)"

sizes="100vw" type="image/webp" srcset="cat-field-full-2800.webp 2800w,

cat-field-full-2240.webp 2240w, cat-field-full-1400.webp 1400w, cat-field-full-1120.webp 1120w"> <source media="(min-width: 70em)"

sizes="100vw"

srcset="cat-field-full-2800.jpg 2800w, cat-field-full-2240.jpg 2240w, cat-field-full-1400.jpg 1400w, cat-field-full-1120.jpg 1120w"> … <img src="cat-field-tight.jpg" alt="Cat in field"> </picture>

IMAGE TYPE SWITCHING

slide-163
SLIDE 163

MAKE THE WEB BETTER Beautiful photos + Fast loading photos

slide-164
SLIDE 164 Photo credit: Pete Markham, “Domino the Cat, Week 2”, Flickr Creative Commons
slide-165
SLIDE 165 Photo credit: Pete Markham, “Domino the Cat, Week 2”, Flickr Creative Commons

5120px
 1500k

slide-166
SLIDE 166 Photo credit: Pete Markham, “Domino the Cat, Week 2”, Flickr Creative Commons

320px
 12.5k

slide-167
SLIDE 167 Photo credit: Pete Markham, “Domino the Cat, Week 2”, Flickr Creative Commons

120x

slide-168
SLIDE 168 Photo credit: Pete Markham, “Domino the Cat, Week 2”, Flickr Creative Commons
slide-169
SLIDE 169 Photo credit: Dave Emerson, “Trouble”, Flickr Creative Commons

Marc Drummond

@MarcDrummond

mdrummond

IRC, drupal.org marcdrummond.com

Front-end Developer, Lullabot

slide-170
SLIDE 170

Join us for Sprints

First-Time Sprinter Workshop - 9am-12pm in Room 271-273 Mentored Core Sprint - 9am-6pm in Room 275-277 General Sprints - 9am-6pm in Room 278-282

Friday, May 13 at the Convention Center

slide-171
SLIDE 171

So How Was It? - Tell Us What You Think

Evaluate this session


events.drupal.org/neworleans2016/sessions/sizing- responsive-images-make-plan-you-drupal

Thanks!

slide-172
SLIDE 172