0
1
00:00:02,930 --> 00:00:06,230
As we previously discussed, author elements right now are static.
1

2
00:00:06,230 --> 00:00:11,930
Same author image and name for every single blog post. Even if there were like 5,000 blog posts.
2

3
00:00:11,990 --> 00:00:14,420
We need to change authors into dynamic content.
3

4
00:00:14,420 --> 00:00:18,530
That way we will have multiple authors and choose one for each blog post.
4

5
00:00:18,530 --> 00:00:21,380
There are two ways we can turn author into dynamic content.
5

6
00:00:21,380 --> 00:00:27,030
One is to add an avatar and author name as fields to our existing blog posts collection.
6

7
00:00:27,080 --> 00:00:28,130
Something like this.
7

8
00:00:35,530 --> 00:00:41,410
Then each time we create a new blog post, we would have an ability to upload author image, name or any
8

9
00:00:41,410 --> 00:00:43,480
other author related info.
9

10
00:00:43,480 --> 00:00:46,260
Then we would bind those fields on our page and done.
10

11
00:00:46,540 --> 00:00:51,880
But this means, for new blog post we will have to enter author information, upload an image, put their
11

12
00:00:51,880 --> 00:00:57,940
name. If we want their bio or other information, then all that too. And repeat the same process for the
12

13
00:00:57,940 --> 00:00:58,960
next post.
13

14
00:00:59,110 --> 00:01:00,670
Even if the author is the same.
14

15
00:01:01,030 --> 00:01:02,560
Luckily, there is another option.
15

16
00:01:02,590 --> 00:01:07,180
We can create a separate collection for authors. Just like we did with a blog post.
16

17
00:01:07,180 --> 00:01:13,480
We can create a CMS database for authors. Where we would save all the authors with their profile photos,
17

18
00:01:13,480 --> 00:01:21,160
names, bios, contact info or any other information. And then we can pull all that information from the database
18

19
00:01:21,160 --> 00:01:22,360
into our blog posts.
19

20
00:01:25,150 --> 00:01:25,460
All right.
20

21
00:01:25,460 --> 00:01:28,040
So, let's create a new collection for the authors.
21

22
00:01:28,070 --> 00:01:33,560
Click here to create a new collection Webflow actually has a template for authors as well, but we're
22

23
00:01:33,560 --> 00:01:38,360
not going to use the template this time. And we will add fields from scratch, so you can better understand
23

24
00:01:38,360 --> 00:01:39,400
how this works.
24

25
00:01:39,410 --> 00:01:42,230
So for starters, we need a name. Anything works here,
25

26
00:01:42,230 --> 00:01:47,210
this is internal. Although it will automatically pre-fill the URL with the same name, but we
26

27
00:01:47,210 --> 00:01:48,290
can change this.
27

28
00:01:48,290 --> 00:01:51,860
URL is public and it does matter what we put there.
28

29
00:01:51,860 --> 00:01:59,270
I like using a singular form for the URL. Because then it would go something like author/John-Smith.
29

30
00:01:59,660 --> 00:02:03,480
And that sort of makes more sense than authors in plural.
30

31
00:02:03,500 --> 00:02:04,910
As for the fields, what do we need?
31

32
00:02:04,910 --> 00:02:11,180
Obviously the name. Which is already there. Then we have an avatar, or in other words profile photo. And
32

33
00:02:11,180 --> 00:02:15,920
also on the bottom of our blog post, the author segment also has some little biography.
33

34
00:02:16,010 --> 00:02:18,400
Let's add these fields. When we add a new field
34

35
00:02:18,410 --> 00:02:23,950
we have to choose what type of field it is. The field and information in it, will be affected by this.
35

36
00:02:23,960 --> 00:02:26,920
In this case, we're going to create a field for the Avatar.
36

37
00:02:26,930 --> 00:02:30,160
So obviously that's going to be an image type.
37

38
00:02:30,590 --> 00:02:32,150
We can make this field required.
38

39
00:02:32,300 --> 00:02:37,730
So any time we're adding a new author, we make sure that there is always a profile photo uploaded. Next
39

40
00:02:37,760 --> 00:02:38,610
author bio.
40

41
00:02:38,720 --> 00:02:39,710
Pretty straightforward.
41

42
00:02:39,710 --> 00:02:40,840
Again, a plane text.
42

43
00:02:44,760 --> 00:02:47,540
We have an option for single or multiple line field.
43

44
00:02:47,580 --> 00:02:51,090
You can see how the field changes in the preview mode with multiple line.
44

45
00:02:51,090 --> 00:02:52,400
And this depends on the company.
45

46
00:02:52,410 --> 00:02:56,220
But we could put maximum character account for the bio. It is a good idea,
46

47
00:02:56,220 --> 00:03:00,990
this way we're not gonna have an author with a biography that is 2 pages long and another one that
47

48
00:03:00,990 --> 00:03:01,910
is one sentence.
48

49
00:03:03,580 --> 00:03:04,870
And create collection.
49

50
00:03:04,870 --> 00:03:05,690
That's it.
50

51
00:03:05,740 --> 00:03:10,360
If we need to edit or add more fields to this collection, no problem, we can always do that later.
51

52
00:03:10,360 --> 00:03:11,710
Finally, let's have Webflow
52

53
00:03:11,710 --> 00:03:15,120
add some dummy items to this collection.
53

54
00:03:15,360 --> 00:03:17,790
It might need a little refresh sometimes to show up.
54

55
00:03:27,420 --> 00:03:28,000
Alright.
55

56
00:03:28,010 --> 00:03:29,350
Our collection is ready.
56

57
00:03:29,360 --> 00:03:32,230
Let's connect it to our elements on our page.
57

58
00:03:37,200 --> 00:03:39,310
Except we can't do that right now.
58

59
00:03:39,360 --> 00:03:42,090
There is no option for Avatar and Author name.
59

60
00:03:42,300 --> 00:03:43,130
Why?
60

61
00:03:43,170 --> 00:03:49,240
Because this is a completely independent collection, that has nothing to do with blog posts, yet.
61

62
00:03:49,260 --> 00:03:55,050
So, we need to create some sort of link between these two collections. And that happens through reference
62

63
00:03:55,050 --> 00:03:55,710
fields.
63

64
00:03:55,800 --> 00:03:58,850
It's just another type of a field inside the collection.
64

65
00:03:58,890 --> 00:04:04,680
Let's go back to the blog post collection, click the setting icon and we're going to add a new field.
65

66
00:04:05,340 --> 00:04:07,470
And choose a reference type.
66

67
00:04:07,470 --> 00:04:13,670
Now what this type of element does, is that we can pull information from a different database,
67

68
00:04:13,680 --> 00:04:16,770
in our case, the author collection.
68

69
00:04:16,770 --> 00:04:24,760
So, let's put it author name. And from a dropdown, select an appropriate collection, which is authors. Make
69

70
00:04:24,760 --> 00:04:29,780
it required and save. And save the collection too.
70

71
00:04:29,800 --> 00:04:35,860
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

72
00:04:35,860 --> 00:04:41,860
dropdown. And this dropdown is looking into the database of authors and pulling information from that
72

73
00:04:41,860 --> 00:04:43,090
database.
73

74
00:04:43,090 --> 00:04:48,160
So, we don't need to upload author information every time we create a new blog post.
74

75
00:04:48,160 --> 00:05:04,790
Let's go through all the blog posts and pick an author for each one.
75

76
00:05:04,800 --> 00:05:13,760
Now when we go back to our master page for the blog post, we will have more options in the binding settings.
76

77
00:05:13,770 --> 00:05:17,050
There is a whole new section with fields from the author collection.
77

78
00:05:17,070 --> 00:05:22,920
Again these fields are shown only for compatible elements. Avatar isn't here, but Avatar is definitely
78

79
00:05:23,130 --> 00:05:25,370
available for the image element.
79

80
00:05:25,530 --> 00:05:28,710
Select author name here. And avatar for the image.
80

81
00:05:39,890 --> 00:05:43,980
Now as we switch between different block posts, the authors update accordingly.
81

82
00:05:43,980 --> 00:05:47,750
There is one issue with the Avatar though. But we're going to take care of that in the next video.