As we previously discussed, author elements right now are static. 1
Same author image and name for every single blog post. Even if there were like 5,000 blog posts. 2
We need to change authors into dynamic content. 3
That way we will have multiple authors and choose one for each blog post. 4
There are two ways we can turn author into dynamic content. 5
One is to add an avatar and author name as fields to our existing blog posts collection. 6
Something like this. 7
Then each time we create a new blog post, we would have an ability to upload author image, name or any 8
other author related info. 9
Then we would bind those fields on our page and done. 10
But this means, for new blog post we will have to enter author information, upload an image, put their 11
name. If we want their bio or other information, then all that too. And repeat the same process for the 12
next post. 13
Even if the author is the same. 14
Luckily, there is another option. 15
We can create a separate collection for authors. Just like we did with a blog post. 16
We can create a CMS database for authors. Where we would save all the authors with their profile photos, 17
names, bios, contact info or any other information. And then we can pull all that information from the database 18
into our blog posts. 19
All right. 20
So, let's create a new collection for the authors. 21
Click here to create a new collection Webflow actually has a template for authors as well, but we're 22
not going to use the template this time. And we will add fields from scratch, so you can better understand 23
how this works. 24
So for starters, we need a name. Anything works here, 25
this is internal. Although it will automatically pre-fill the URL with the same name, but we 26
can change this. 27
URL is public and it does matter what we put there. 28
I like using a singular form for the URL. Because then it would go something like author/John-Smith. 29
And that sort of makes more sense than authors in plural. 30
As for the fields, what do we need? 31
Obviously the name. Which is already there. Then we have an avatar, or in other words profile photo. And 32
also on the bottom of our blog post, the author segment also has some little biography. 33
Let's add these fields. When we add a new field 34
we have to choose what type of field it is. The field and information in it, will be affected by this. 35
In this case, we're going to create a field for the Avatar. 36
So obviously that's going to be an image type. 37
We can make this field required. 38
So any time we're adding a new author, we make sure that there is always a profile photo uploaded. Next 39
author bio. 40
Pretty straightforward. 41
Again, a plane text. 42
We have an option for single or multiple line field. 43
You can see how the field changes in the preview mode with multiple line. 44
And this depends on the company. 45
But we could put maximum character account for the bio. It is a good idea, 46
this way we're not gonna have an author with a biography that is 2 pages long and another one that 47
is one sentence. 48
And create collection. 49
That's it. 50
If we need to edit or add more fields to this collection, no problem, we can always do that later. 51
Finally, let's have Webflow 52
add some dummy items to this collection. 53
It might need a little refresh sometimes to show up. 54
Alright. 55
Our collection is ready. 56
Let's connect it to our elements on our page. 57
Except we can't do that right now. 58
There is no option for Avatar and Author name. 59
Why? 60
Because this is a completely independent collection, that has nothing to do with blog posts, yet. 61
So, we need to create some sort of link between these two collections. And that happens through reference 62
fields. 63
It's just another type of a field inside the collection. 64
Let's go back to the blog post collection, click the setting icon and we're going to add a new field. 65
And choose a reference type. 66
Now what this type of element does, is that we can pull information from a different database, 67
in our case, the author collection. 68
So, let's put it author name. And from a dropdown, select an appropriate collection, which is authors. Make 69
it required and save. And save the collection too. 70
Now, let's go into that one of the blog posts and you'll see that we have a new field, which is an author 71
dropdown. And this dropdown is looking into the database of authors and pulling information from that 72
database. 73
So, we don't need to upload author information every time we create a new blog post. 74
Let's go through all the blog posts and pick an author for each one. 75
Now when we go back to our master page for the blog post, we will have more options in the binding settings. 76
There is a whole new section with fields from the author collection. 77
Again these fields are shown only for compatible elements. Avatar isn't here, but Avatar is definitely 78
available for the image element. 79
Select author name here. And avatar for the image. 80
Now as we switch between different block posts, the authors update accordingly. 81
There is one issue with the Avatar though. But we're going to take care of that in the next video.