There are two ways to pull items from CMS. 1
One is by using collection pages. 2
That's what we've done with a blog post. 3
Every new collection we create is going to have a collection page automatically created for them. Which 4
we can access from here. 5
But what if we want to pull CMS content elsewhere. For example, on static pages like the home page, or 6
on the block page, where we have all those block cards. Enter collection lists. Collection list is 7
an element that can be dragged from the elements panel on any page and anywhere on the page. When you 8
drag a collection list on the page, you get a bunch of empty purple boxes. Nothing to see here just yet. 9
First, we need to connect it to a particular collection. 10
In our case blog posts. Now we get this. 11
The boxes are still empty but this time you can see familiar titles. 12
Each box is corresponding to the block post in our database. Collection list by default displays all 13
items in that particular database. 14
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
that later. 16
We also get this layout controls. Our blog grid has 3 columns, so we can easily switch it to that. Now our 17
blog cards will be displayed in a 3 column grid just like we intended. 18
Well, not yet. They are still empty. 19
If you check the preview mode, they disappear. 20
To start binding elements to the CMS, 21
first, we need to drag elements inside one of these purple boxes. 22
Once we do that, then each element inside will gain dynamic qualities and we'll have option to connect 23
to specific CMS field. 24
In this case, we need to drag the whole blog card in one of the boxes. Doesn't matter which one. There 25
is no way to select the entire blog card right from the canvas. 26
So, make sure to select it from the navigator. 27
Then while it's selected click and drag it in one of the purple boxes. If that's tricky you can do that 28
from the navigator panel altogether and drag it inside the collection item. 29
Alright. 30
I'm sure you have questions on what just happened. Why the blog cards have multiplied? 31
The thing is, Collection List works sort of like a Collection Page. One means all. Acting as one organism, 32
like some kind of Hive Mind. 33
Once we bind elements with the CMS fields, then appropriate content will be pulled. 34
So, let's connect elements to their appropriate fields. 35
See, the moment you connect it to the CMS field, then headline of each card updates instantly. Based on 36
which particular blog post they are connected to. 37
Until we make these connections, then all elements are normal, static elements and each item will be exactly 38
the same thing. 39
Remember, that the avatar and thumbnail need to be connected from the Settings. 40
Since we are using dynamic styles and not dynamic content. 41
So far so good. 42
The thumbnail needs a little fixing. The image is tiled. Remember how we fix this? 43
Just going to the background image property and setting it to cover. 44
And position it to the center. 45
And just in case, disable tiling. 46
We need to make some changes to the spacing. First, let's remove that fixed width from the block card. 47
It's going to get in the way and mess things up. 48
We don't want a fixed card. 49
We want it fluid. To stretch and shrink 50
according to the width of the page. There is already some spacing applied on the Collection Item by default. 51
We can edit there, instead of adding new spacing properties to the blog card. It has 10 pixel padding 52
on the sides. In our designs, gap between each card is 30 pixels so it's 15 pixels on sides. And also 53
the bottom margin or padding. Doesn't really matter. 54
Either one works. Having padding on the sides creates this little misalignment from the edges of our 55
page. You know where all our content is aligned. 56
This is being a little nit-picky. But I like things as exact as possible. 57
You should try your best to develop this habit too. Obsessing about details is a good quality for a web 58
designer. 59
So, how do we fix this little misalignment? 60
We can't have a special combo class for those cards that are on edges. 61
They are one, remember? Hive mind. But it's quite simple. 62
We can add a negative margin to the parent, that holds all those items. -15 pixel on both sides. And 63
done. 64
You get cards aligned now exactly on edges. 65
Now let's take care of that odd distribution of the cards. 66
This happens, when the heights of each item are different so they are laid out messily. Breaking our tidy 67
grid. 68
We can fix this easily with a flexbox. Man, flexbox is an answer to every layout problem. Tattoo that 69
on your hand. 70
So, we need to apply flexbox to the first parent, that holds those collection items. 71
This is Collection List. 72
Make sure you don't select Collection List Wrapper. 73
That's a grandparent with all that stuff inside. 74
First, you'll get all the items squeezed in a single roll. 75
All we need to do here is to enable wrapping. 76
And we get exactly the layout that we are aiming for. 77
There's just one thing, these cards aren't actually clickable. 78
How do we actually access the blog pages that they represent? 79
For that, we need the link element that is going to connect to the blog page. 80
Right now, none of the elements are links. So none of the settings has an option to bind URL to the 81
CMS link. 82
So, we need to turn one of these into a link element. 83
This can be a headline, for example. That can be a link. Or a thumbnail image. Or both. 84
Or we can turn the entire card into a link. 85
How do we do that? By using the Link Block element. 86
So we would have to put the whole card inside the link block. 87
All of these are very valid options. 88
Different websites deal with this differently. In this current layout that we have, 89
I like to have the whole card clickable. 90
If we had different links to leading different places. For example, author's name leading to an author's 91
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
block. Because you can't nest links inside other links. But in this case, we can. 93
So, let's go with it. 94
Just add a link block element inside the collection item. When you get the settings, 95
you'll have this purple page icon. 96
This allows linking to a collection page. 97
Choose that and select Current Blog Post. Now that link will go to that blog post page. 98
Lastly, let's move the whole card inside this link block. 99
We actually don't need that extra div block. 100
We can apply that blog card class to the link block itself. 101
And move the thumbnail and content inside it. 102
And get rid of the extra div block. 103
Alright, let's have a look in preview and test the link. 104
There is one thing that bugs me a little. Different heights of the cards. 105
To be honest, it's fine like that. But equal heights would make it look nicer. 106
That's what we have in designs, don't we? All the cards are the same height, 107
regardless their content. And that makes the grid a little more neat. To do the same, 108
we just need to stretch the cards to fill up the empty space. 109
The Collection Item, since it's a flex child, is already stretching. But the blog card isn't. If we 110
give a blog card 100% height, that is going to fill up the empty space. 111
Remember, you just need to style one of the blog cards. And all of them will be styled the same. 112
That's all looking nice, except one thing. The author and date block are on different positions everywhere. 113
In our designs, we have them glued to the bottom, which creates much nicer layout. 114
Now, how can we make that happen? First, if you have a look at the parent element, which is card content, 115
then you'll see that it's not stretching all the way to the bottom. 116
So first, we definitely need to make that stretch. This time 100% height isn't gonna work. Because 117
that means 100% of the parent's height. 118
Blog card is the parent, which is taller because there is the image inside too. 119
So, if we give it 100%, it's not just going to fill the empty space, but it's going to go beyond 120
the borders. 121
So, how else can we make it fill the space? 122
Here's one way. We can make the parent, the blog card, a flexbox. With a vertical alignment. And then under 123
Flex Child settings, we can change sizing to Stretch for the card content. Now for the second step. 124
We need to somehow glue the author block on the bottom. 125
One obvious option is to again turn the content block into a flexbox with vertical alignment. And change 126
Justify settings to Space Between. 127
That is going to push the objects to the edges. 128
Now the author block is glued to the bottom on every card. Which is lovely, but that makes post summaries 129
spaced out evenly as well. 130
We don't want that. 131
We want post summary to be grouped together with a headline. 132
This is easy to fix. 133
We just need to wrap the headline and the post summary inside a div block. 134
And that's all. When I say wrap something, 135
it means, to add a new div block, and put the elements inside. Wrap, like a gift box. 136
And that's all. 137
Let's check the preview. 138
All working great. 139
There is one other thing we need to do, we need to add a pagination. Pagination means to distribute 140
these block cards on different pages. 141
We don't want every single card loading on this page. When we have more than 20, 30 block cards, 142
then it's going to slow down the page. 143
That's why we need pagination. 144
We'll do that in the next lesson. 145
Stick around.