1
00:00:01,130 --> 00:00:06,350
In the last section we got the real height of each image after it was actually loaded into the browser.

2
00:00:06,520 --> 00:00:11,660
So now we're going to use that height to figure out how many spans each of these images should occupy.

3
00:00:11,660 --> 00:00:16,010
As a quick reminder let me walk you through that process really quickly to say you recall why this is

4
00:00:16,010 --> 00:00:18,140
relevant for the grid CSSA stuff.

5
00:00:18,250 --> 00:00:24,780
Zongo and to expect or inspect this div right here.

6
00:00:24,800 --> 00:00:27,740
All right so this div is inside of the image list.

7
00:00:27,740 --> 00:00:30,570
Remember we had set on the image list class.

8
00:00:30,680 --> 00:00:32,820
The thing that wraps all these different images.

9
00:00:32,930 --> 00:00:36,300
We had set a grid auto rows of 150 pixels.

10
00:00:36,440 --> 00:00:40,730
That means that every single one of these little tiles here or each of these cells is going to be only

11
00:00:40,760 --> 00:00:43,250
150 pixels large.

12
00:00:43,250 --> 00:00:45,610
Now that's going to cause some these images to be cut off.

13
00:00:45,620 --> 00:00:54,080
So in order to get around that we can set a grid row and property with a value of like span two and

14
00:00:54,080 --> 00:00:58,360
that's going to allocate two cells worth for that particular image.

15
00:00:58,400 --> 00:01:01,690
If we did span three it would give us even a little bit more.

16
00:01:01,710 --> 00:01:07,280
So now that we have the height of this image and we know exactly how tall each row is because we set

17
00:01:07,280 --> 00:01:13,970
that as a rule inside of our CSSA file right here we know each row is equal to 150 pixels.

18
00:01:13,970 --> 00:01:19,400
We can use the image height and the size of each row or the height of each row and essentially just

19
00:01:19,400 --> 00:01:22,570
figure out how many rows it takes to display each of these images.

20
00:01:22,580 --> 00:01:23,290
That's it.

21
00:01:23,980 --> 00:01:24,220
OK.

22
00:01:24,230 --> 00:01:30,480
So to do so back inside of image card here's our set span's.

23
00:01:30,710 --> 00:01:37,580
We're going to do a let's first pull off just the height here really quickly and assign it to a variable

24
00:01:37,670 --> 00:01:39,230
like so.

25
00:01:39,230 --> 00:01:42,070
And then to get the number of spans that this thing requires.

26
00:01:42,230 --> 00:01:48,220
I'll do my height divided by the row height which is 150 pixels.

27
00:01:50,690 --> 00:01:52,920
And then I'm going to add one to this.

28
00:01:52,920 --> 00:01:57,480
The reason that I'm going to add one is to make sure that if we have like a portion of a row that this

29
00:01:57,480 --> 00:02:03,440
image needs it's going to be rounded up or essentially a ghost like the next highest row and then just

30
00:02:03,440 --> 00:02:10,230
to make sure I'm going to do a math dot ceiling on this thing just to cap its value and you it actually

31
00:02:10,340 --> 00:02:14,910
right now let's remove that plus one just so we can see what happens when we just start with this basic

32
00:02:14,910 --> 00:02:17,290
instrumentation right here.

33
00:02:17,310 --> 00:02:26,490
OK so after we calculate the spans we'll then set it on our states X-O notice how we have a identical

34
00:02:26,550 --> 00:02:31,530
key and value here so we can use a little bit of E.S. 2015 syntax to shorten it just be span's like

35
00:02:31,530 --> 00:02:37,180
so now and those I've used state without initializing state inside of my constructor first.

36
00:02:37,220 --> 00:02:40,170
So I can very quickly take care of that inside my constructor.

37
00:02:40,200 --> 00:02:45,060
I'll say this Scott States is span's and I'll defer all its valid to be zero.

38
00:02:45,060 --> 00:02:46,580
Like so.

39
00:02:46,610 --> 00:02:51,020
So until we actually load the image and determine how much height it requires We're going to say this

40
00:02:51,020 --> 00:02:54,040
thing basically requires zero space which is totally fine.

41
00:02:55,260 --> 00:02:56,560
So the last thing we do.

42
00:02:58,790 --> 00:03:04,300
Is take that spans value and assign it as a style to the div right here.

43
00:03:04,340 --> 00:03:08,610
So essentially remember right here I just mentally put in grid row and span three.

44
00:03:08,720 --> 00:03:14,600
You want to take that number of spans and essentially insert it right there span three or four or five

45
00:03:14,600 --> 00:03:15,910
or whatever it is.

46
00:03:16,220 --> 00:03:20,880
So to do so on this div I'm going to pass in a inline style.

47
00:03:20,980 --> 00:03:23,600
It's going to have grid row ends.

48
00:03:24,850 --> 00:03:28,320
And then for the value will you say yes 2015 template string.

49
00:03:28,420 --> 00:03:29,920
So I use a back tick right there.

50
00:03:29,920 --> 00:03:33,410
Remember a back tick is the character to the left of the one on your keyboard.

51
00:03:33,430 --> 00:03:34,750
It is not a single quote.

52
00:03:34,840 --> 00:03:36,040
It is a back tick.

53
00:03:36,180 --> 00:03:37,650
And then I'll say span.

54
00:03:38,170 --> 00:03:47,130
And then just the number of spans this thing requires so dollar sign curly braces this state that spans.

55
00:03:47,290 --> 00:03:47,600
All right.

56
00:03:47,620 --> 00:03:48,680
That's it.

57
00:03:49,760 --> 00:03:50,830
So let's save this.

58
00:03:50,840 --> 00:03:53,970
We might need a little bit of tweaking in here but that's totally fine.

59
00:03:53,990 --> 00:03:56,550
Let's just make sure that this works as it stands.

60
00:03:56,840 --> 00:03:57,050
OK.

61
00:03:57,050 --> 00:04:00,390
So I can flip back over it for Kerr's again.

62
00:04:00,410 --> 00:04:00,720
All right.

63
00:04:00,750 --> 00:04:04,550
Now you'll notice that in some cases there's a little too much space.

64
00:04:04,550 --> 00:04:07,260
But in other cases it's just right.

65
00:04:07,450 --> 00:04:12,200
So it looks like we're really close to the last thing we're going to do here is going to be just a little

66
00:04:12,200 --> 00:04:13,530
bit of a trick.

67
00:04:13,600 --> 00:04:13,880
OK.

68
00:04:13,880 --> 00:04:15,570
That sounds to me a little bit of a trick.

69
00:04:15,640 --> 00:04:17,600
It is kind of interesting.

70
00:04:17,660 --> 00:04:23,060
So remember when we set on the image list div like the thing that wraps all these images we had said

71
00:04:23,060 --> 00:04:29,950
grid auto rows 150 pixels but we actually chose that kind of arbitrarily and now with the 150 pixels.

72
00:04:29,960 --> 00:04:33,820
In some cases we are getting too much white space underneath it.

73
00:04:34,010 --> 00:04:40,720
So one way that we could fix this would be to make these rows actually much smaller like 10 pixels.

74
00:04:40,910 --> 00:04:45,830
If we only use rows of 10 pixels that means that we're going to get a lot of fine grained detail and

75
00:04:45,830 --> 00:04:50,780
make sure that we do not somehow over allocate too many rows to any individual image.

76
00:04:50,780 --> 00:04:54,100
Let's make these changes and you'll very quickly see what I mean.

77
00:04:54,110 --> 00:04:59,210
So back inside my image list at CSSA file I'm going to find grid auto rows which allocates space to

78
00:04:59,210 --> 00:05:00,050
each row.

79
00:05:00,070 --> 00:05:06,730
I'm going to change it down to be just 10 pixels and then back inside of my image cart.

80
00:05:06,950 --> 00:05:13,490
When we take our height and divide by 150 remember that 150 right there was to figure out how many rows

81
00:05:13,610 --> 00:05:16,130
this image needed to be displayed properly.

82
00:05:16,130 --> 00:05:18,320
So now we don't have rows of 150 pixels.

83
00:05:18,320 --> 00:05:20,480
We have rows of 10 pixels.

84
00:05:20,830 --> 00:05:23,150
So going to change that to 10 as well.

85
00:05:23,150 --> 00:05:27,740
The net result is that each image is going to take up far more spans than it did before which is totally

86
00:05:27,740 --> 00:05:28,620
fine.

87
00:05:28,940 --> 00:05:31,280
So now save this will flip back over.

88
00:05:31,280 --> 00:05:32,230
Try it again.

89
00:05:34,100 --> 00:05:37,350
And while it still looks like it's a little bit off.

90
00:05:37,490 --> 00:05:38,420
But don't worry.

91
00:05:38,420 --> 00:05:44,410
This is very easily fixed if you do another kind of mouse over here and look at that component.

92
00:05:44,420 --> 00:05:50,150
Remember that we had set up that grid gap rule right here to allocate 10 pixels between each one of

93
00:05:50,150 --> 00:05:51,050
these cells.

94
00:05:51,260 --> 00:05:57,890
So now that we have rows of only 10 pixels the Greek gap of 10 pixels is essentially doubling the amount

95
00:05:57,890 --> 00:05:59,290
of whitespace we need.

96
00:05:59,680 --> 00:06:03,980
So the last thing we're going to do to fix this is make sure that in the vertical direction or between

97
00:06:03,980 --> 00:06:06,790
rows we do not have any grid gap.

98
00:06:06,950 --> 00:06:10,200
So to do so I'm going to flip back over to my CSSA file.

99
00:06:10,520 --> 00:06:12,120
Here's the great gap right here.

100
00:06:12,170 --> 00:06:17,360
Now with that great gap we can actually specify the distance between cells in the vertical and horizontal

101
00:06:17,360 --> 00:06:20,180
direction by just passing into separate values.

102
00:06:20,390 --> 00:06:22,070
So in front of that 10 I'm going to say zero.

103
00:06:22,100 --> 00:06:25,730
Which means put 0 pixels between each row.

104
00:06:25,920 --> 00:06:28,570
So now there's going to be no gap between each row.

105
00:06:29,020 --> 00:06:30,450
OK it's going to save this.

106
00:06:30,620 --> 00:06:33,930
We'll do one last time over and you'll notice.

107
00:06:33,950 --> 00:06:36,040
Now we are set.

108
00:06:36,110 --> 00:06:37,160
Perfect.

109
00:06:37,190 --> 00:06:39,660
I don't think that could be any better than it is right now.

110
00:06:39,680 --> 00:06:45,370
So you'll notice that all of these images are now awesomely nicely titled next to each other.

111
00:06:45,410 --> 00:06:45,980
OK.

112
00:06:46,070 --> 00:06:46,880
So that's it.

113
00:06:46,880 --> 00:06:49,940
I know that this was a little bit of a headache.

114
00:06:49,940 --> 00:06:54,110
I think it only took about six or seven sections so maybe it wasn't as bad as I thought.

115
00:06:54,110 --> 00:06:57,260
But you know we actually got it working and it looks pretty darn good.

116
00:06:57,470 --> 00:06:59,480
So because I guess I love flowers and plants so much.

117
00:06:59,480 --> 00:07:00,920
We can try flowers.

118
00:07:00,920 --> 00:07:05,320
We can try it plants and yeah this is looking pretty darn good.

119
00:07:05,690 --> 00:07:05,910
OK.

120
00:07:05,930 --> 00:07:08,410
So I hoped you enjoyed putting this together.

121
00:07:08,450 --> 00:07:09,690
That is the image app.

122
00:07:09,770 --> 00:07:11,840
In total we're finally done.

123
00:07:11,840 --> 00:07:13,470
The big takeaways on this well.

124
00:07:13,490 --> 00:07:14,330
We're going to have a lot of them.

125
00:07:14,330 --> 00:07:17,890
Let's take a quick pause right here and we'll do a review in the next section.