0
1
00:00:02,640 --> 00:00:05,070
There are two ways to pull items from CMS.
1

2
00:00:05,070 --> 00:00:07,420
One is by using collection pages.
2

3
00:00:07,470 --> 00:00:09,420
That's what we've done with a blog post.
3

4
00:00:09,810 --> 00:00:14,640
Every new collection we create is going to have a collection page automatically created for them. Which
4

5
00:00:14,640 --> 00:00:16,070
we can access from here.
5

6
00:00:16,080 --> 00:00:22,140
But what if we want to pull CMS content elsewhere. For example, on static pages like the home page, or
6

7
00:00:22,140 --> 00:00:27,600
on the block page, where we have all those block cards. Enter collection lists. Collection list is
7

8
00:00:27,600 --> 00:00:32,730
an element that can be dragged from the elements panel on any page and anywhere on the page. When you
8

9
00:00:32,730 --> 00:00:38,670
drag a collection list on the page, you get a bunch of empty purple boxes. Nothing to see here just yet.
9

10
00:00:38,670 --> 00:00:41,710
First, we need to connect it to a particular collection.
10

11
00:00:41,850 --> 00:00:45,630
In our case blog posts. Now we get this.
11

12
00:00:45,660 --> 00:00:49,460
The boxes are still empty but this time you can see familiar titles.
12

13
00:00:49,530 --> 00:00:55,050
Each box is corresponding to the block post in our database. Collection list by default displays all
13

14
00:00:55,080 --> 00:00:57,350
items in that particular database.
14

15
00:00:57,420 --> 00:01:03,060
Right now, all 5 or 6 of them. We have a control over how many to show at a time, but we'll discuss
15

16
00:01:03,060 --> 00:01:03,840
that later.
16

17
00:01:03,900 --> 00:01:11,960
We also get this layout controls. Our blog grid has 3 columns, so we can easily switch it to that. Now our
17

18
00:01:11,960 --> 00:01:16,240
blog cards will be displayed in a 3 column grid just like we intended.
18

19
00:01:16,300 --> 00:01:17,920
Well, not yet. They are still empty.
19

20
00:01:18,020 --> 00:01:20,120
If you check the preview mode, they disappear.
20

21
00:01:25,910 --> 00:01:28,340
To start binding elements to the CMS,
21

22
00:01:28,350 --> 00:01:31,800
first, we need to drag elements inside one of these purple boxes.
22

23
00:01:31,850 --> 00:01:36,980
Once we do that, then each element inside will gain dynamic qualities and we'll have option to connect
23

24
00:01:36,980 --> 00:01:38,510
to specific CMS field.
24

25
00:01:38,540 --> 00:01:43,380
In this case, we need to drag the whole blog card in one of the boxes. Doesn't matter which one. There
25

26
00:01:43,450 --> 00:01:46,260
is no way to select the entire blog card right from the canvas.
26

27
00:01:46,280 --> 00:01:48,980
So, make sure to select it from the navigator.
27

28
00:01:48,980 --> 00:01:54,440
Then while it's selected click and drag it in one of the purple boxes. If that's tricky you can do that
28

29
00:01:54,440 --> 00:01:58,270
from the navigator panel altogether and drag it inside the collection item.
29

30
00:01:58,280 --> 00:01:58,610
Alright.
30

31
00:01:58,640 --> 00:02:03,170
I'm sure you have questions on what just happened. Why the blog cards have multiplied?
31

32
00:02:03,260 --> 00:02:08,700
The thing is, Collection List works sort of like a Collection Page. One means all. Acting as one organism,
32

33
00:02:08,730 --> 00:02:11,540
like some kind of Hive Mind.
33

34
00:02:11,540 --> 00:02:15,980
Once we bind elements with the CMS fields, then appropriate content will be pulled.
34

35
00:02:15,980 --> 00:02:19,120
So, let's connect elements to their appropriate fields.
35

36
00:02:26,580 --> 00:02:31,770
See, the moment you connect it to the CMS field, then headline of each card updates instantly. Based on
36

37
00:02:31,770 --> 00:02:34,420
which particular blog post they are connected to.
37

38
00:02:34,440 --> 00:02:39,960
Until we make these connections, then all elements are normal, static elements and each item will be exactly
38

39
00:02:39,960 --> 00:02:40,670
the same thing.
39

40
00:02:43,640 --> 00:02:47,480
Remember, that the avatar and thumbnail need to be connected from the Settings.
40

41
00:02:47,570 --> 00:02:50,600
Since we are using dynamic styles and not dynamic content.
41

42
00:02:54,620 --> 00:02:55,610
So far so good.
42

43
00:03:32,040 --> 00:03:36,480
The thumbnail needs a little fixing. The image is tiled. Remember how we fix this?
43

44
00:03:36,480 --> 00:03:40,250
Just going to the background image property and setting it to cover.
44

45
00:03:43,260 --> 00:03:44,670
And position it to the center.
45

46
00:03:44,670 --> 00:03:51,530
And just in case, disable tiling.
46

47
00:03:51,700 --> 00:03:57,060
We need to make some changes to the spacing. First, let's remove that fixed width from the block card.
47

48
00:03:57,160 --> 00:03:59,540
It's going to get in the way and mess things up.
48

49
00:03:59,590 --> 00:04:00,640
We don't want a fixed card.
49

50
00:04:00,640 --> 00:04:02,820
We want it fluid. To stretch and shrink
50

51
00:04:02,830 --> 00:04:10,300
according to the width of the page. There is already some spacing applied on the Collection Item by default.
51

52
00:04:10,300 --> 00:04:15,580
We can edit there, instead of adding new spacing properties to the blog card. It has 10 pixel padding
52

53
00:04:15,580 --> 00:04:23,050
on the sides. In our designs,
gap between each card is 30 pixels so it's 15 pixels on sides. And also
53

54
00:04:23,050 --> 00:04:25,810
the bottom margin or padding. Doesn't really matter.
54

55
00:04:25,810 --> 00:04:31,950
Either one works. Having padding on the sides creates this little misalignment from the edges of our
55

56
00:04:31,950 --> 00:04:35,070
page. You know where all our content is aligned.
56

57
00:04:35,070 --> 00:04:38,910
This is being a little nit-picky. But I like things as exact as possible.
57

58
00:04:38,940 --> 00:04:43,680
You should try your best to develop this habit too. Obsessing about details is a good quality for a web
58

59
00:04:43,680 --> 00:04:44,430
designer.
59

60
00:04:44,430 --> 00:04:46,580
So, how do we fix this little misalignment?
60

61
00:04:46,590 --> 00:04:50,060
We can't have a special combo class for those cards that are on edges.
61

62
00:04:50,100 --> 00:04:53,210
They are one, remember? Hive mind. But it's quite simple.
62

63
00:04:53,220 --> 00:05:00,390
We can add a negative margin to the parent, that holds all those items. -15 pixel on both sides. And
63

64
00:05:00,390 --> 00:05:00,750
done.
64

65
00:05:05,620 --> 00:05:08,020
You get cards aligned now exactly on edges.
65

66
00:05:10,920 --> 00:05:14,600
Now let's take care of that odd distribution of the cards.
66

67
00:05:14,610 --> 00:05:20,040
This happens, when the heights of each item are different so they are laid out messily. Breaking our tidy
67

68
00:05:20,040 --> 00:05:20,550
grid.
68

69
00:05:20,610 --> 00:05:26,640
We can fix this easily with a flexbox. Man, flexbox is an answer to every layout problem. Tattoo that
69

70
00:05:26,640 --> 00:05:27,240
on your hand.
70

71
00:05:27,540 --> 00:05:32,340
So, we need to apply flexbox to the first parent, that holds those collection items.
71

72
00:05:32,340 --> 00:05:34,020
This is Collection List.
72

73
00:05:34,020 --> 00:05:36,760
Make sure you don't select Collection List Wrapper.
73

74
00:05:36,840 --> 00:05:39,210
That's a grandparent with all that stuff inside.
74

75
00:05:44,600 --> 00:05:47,720
First, you'll get all the items squeezed in a single roll.
75

76
00:05:47,930 --> 00:05:50,360
All we need to do here is to enable wrapping.
76

77
00:05:53,120 --> 00:05:55,610
And we get exactly the layout that we are aiming for.
77

78
00:05:58,370 --> 00:06:01,520
There's just one thing, these cards aren't actually clickable.
78

79
00:06:01,520 --> 00:06:04,940
How do we actually access the blog pages that they represent?
79

80
00:06:04,940 --> 00:06:09,020
For that, we need the link element that is going to connect to the blog page.
80

81
00:06:09,020 --> 00:06:14,660
Right now, none of the elements are links. So none of the settings has an option to bind URL to the
81

82
00:06:14,660 --> 00:06:15,810
CMS link.
82

83
00:06:15,950 --> 00:06:18,640
So, we need to turn one of these into a link element.
83

84
00:06:18,650 --> 00:06:23,960
This can be a headline, for example. That can be a link. Or a thumbnail image. Or both.
84

85
00:06:24,080 --> 00:06:26,530
Or we can turn the entire card into a link.
85

86
00:06:26,540 --> 00:06:29,450
How do we do that? By using the Link Block element.
86

87
00:06:29,450 --> 00:06:32,660
So we would have to put the whole card inside the link block.
87

88
00:06:32,660 --> 00:06:34,070
All of these are very valid options.
88

89
00:06:34,070 --> 00:06:37,340
Different websites deal with this differently. In this current layout that we have,
89

90
00:06:37,340 --> 00:06:39,140
I like to have the whole card clickable.
90

91
00:06:39,230 --> 00:06:43,670
If we had different links to leading different places. For example, author's name leading to an author's
91

92
00:06:43,670 --> 00:06:49,670
page. Or if there was a link to a category. Then we wouldn't be able to put the whole thing inside a link
92

93
00:06:49,670 --> 00:06:53,950
block. Because you can't nest links inside other links. But in this case, we can.
93

94
00:06:53,960 --> 00:06:55,050
So, let's go with it.
94

95
00:06:55,160 --> 00:06:59,000
Just add a link block element inside the collection item. When you get the settings,
95

96
00:06:59,010 --> 00:07:01,160
you'll have this purple page icon.
96

97
00:07:01,250 --> 00:07:03,630
This allows linking to a collection page.
97

98
00:07:03,680 --> 00:07:10,730
Choose that and select Current Blog Post. Now that link will go to that blog post page.
98

99
00:07:11,030 --> 00:07:13,850
Lastly, let's move the whole card inside this link block.
99

100
00:07:20,210 --> 00:07:22,220
We actually don't need that extra div block.
100

101
00:07:22,220 --> 00:07:25,520
We can apply that blog card class to the link block itself.
101

102
00:07:31,540 --> 00:07:33,660
And move the thumbnail and content inside it.
102

103
00:07:42,480 --> 00:07:54,720
And get rid of the extra div block.
103

104
00:07:54,730 --> 00:07:57,190
Alright, let's have a look in preview and test the link.
104

105
00:08:18,630 --> 00:08:22,830
There is one thing that bugs me a little. Different heights of the cards.
105

106
00:08:22,840 --> 00:08:26,860
To be honest, it's fine like that. But equal heights would make it look nicer.
106

107
00:08:26,860 --> 00:08:30,300
That's what we have in designs, don't we? All the cards are the same height,
107

108
00:08:30,370 --> 00:08:34,900
regardless their content. And that makes the grid a little more neat. To do the same,
108

109
00:08:34,900 --> 00:08:38,470
we just need to stretch the cards to fill up the empty space.
109

110
00:08:38,470 --> 00:08:44,200
The Collection Item, since it's a flex child, is already stretching. But the blog card isn't. If we
110

111
00:08:44,200 --> 00:08:49,340
give a blog card 100% height, that is going to fill up the empty space.
111

112
00:08:49,360 --> 00:08:54,370
Remember, you just need to style one of the blog cards. And all of them will be styled the same.
112

113
00:08:54,370 --> 00:09:00,010
That's all looking nice, except one thing. The author and date block are on different positions everywhere.
113

114
00:09:00,160 --> 00:09:05,650
In our designs, we have them glued to the bottom, which creates much nicer layout.
114

115
00:09:05,650 --> 00:09:11,440
Now, how can we make that happen? First, if you have a look at the parent element, which is card content,
115

116
00:09:11,650 --> 00:09:14,620
then you'll see that it's not stretching all the way to the bottom.
116

117
00:09:14,680 --> 00:09:20,290
So first, we definitely need to make that stretch. This time 100% height isn't gonna work. Because
117

118
00:09:20,290 --> 00:09:23,590
that means 100% of the parent's height.
118

119
00:09:23,650 --> 00:09:28,850
Blog card is the parent, which is taller because there is the image inside too.
119

120
00:09:28,870 --> 00:09:33,910
So, if we give it 100%, it's not just going to fill the empty space, but it's going to go beyond
120

121
00:09:33,910 --> 00:09:34,710
the borders.
121

122
00:09:34,720 --> 00:09:37,510
So, how else can we make it fill the space?
122

123
00:09:37,510 --> 00:09:46,870
Here's one way. We can make the parent, the blog card, a flexbox. With a vertical alignment. And then under
123

124
00:09:46,870 --> 00:09:54,420
Flex Child settings, we can change sizing to Stretch for the card content. Now for the second step.
124

125
00:09:54,440 --> 00:09:57,810
We need to somehow glue the author block on the bottom.
125

126
00:09:57,980 --> 00:10:05,240
One obvious option is to again turn the content block into a flexbox with vertical alignment. And change
126

127
00:10:05,240 --> 00:10:07,660
Justify settings to Space Between.
127

128
00:10:07,790 --> 00:10:10,910
That is going to push the objects to the edges.
128

129
00:10:10,910 --> 00:10:16,430
Now the author block is glued to the bottom on every card. Which is lovely, but that makes post summaries
129

130
00:10:16,430 --> 00:10:18,440
spaced out evenly as well.
130

131
00:10:18,440 --> 00:10:19,540
We don't want that.
131

132
00:10:19,580 --> 00:10:22,900
We want post summary to be grouped together with a headline.
132

133
00:10:22,970 --> 00:10:23,930
This is easy to fix.
133

134
00:10:23,930 --> 00:10:27,540
We just need to wrap the headline and the post summary inside a div block.
134

135
00:10:27,620 --> 00:10:29,830
And that's all. When I say wrap something,
135

136
00:10:29,840 --> 00:10:34,910
it means, to add a new div block, and put the elements inside. Wrap, like a gift box.
136

137
00:10:43,640 --> 00:10:44,450
And that's all.
137

138
00:10:44,450 --> 00:10:45,560
Let's check the preview.
138

139
00:10:57,420 --> 00:10:58,230
All working great.
139

140
00:10:58,230 --> 00:11:03,540
There is one other thing we need to do, we need to add a pagination. Pagination means to distribute
140

141
00:11:03,540 --> 00:11:05,660
these block cards on different pages.
141

142
00:11:05,670 --> 00:11:10,420
We don't want every single card loading on this page. When we have more than 20, 30 block cards,
142

143
00:11:10,430 --> 00:11:12,290
then it's going to slow down the page.
143

144
00:11:12,300 --> 00:11:14,100
That's why we need pagination.
144

145
00:11:14,100 --> 00:11:15,620
We'll do that in the next lesson.
145

146
00:11:15,630 --> 00:11:16,160
Stick around.