Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:02,210 --> 00:00:05,120
Let's work on the author first
2
00:00:05,120 --> 00:00:07,370
In post detail, I'm outputting the author
3
00:00:07,370 --> 00:00:11,260
and now I actually wanna wrap the name itself
4
00:00:11,260 --> 00:00:15,260
into an anchor tag so that it's clickable
5
00:00:15,260 --> 00:00:18,740
and there, I wanna point at the author email address.
6
00:00:18,740 --> 00:00:21,840
I wanna open up the email client of the visitor
7
00:00:21,840 --> 00:00:25,380
and prepare an email to the author.
8
00:00:25,380 --> 00:00:27,640
Now in our modeling, our author model
9
00:00:27,640 --> 00:00:31,430
we do have that email address field for the author.
10
00:00:31,430 --> 00:00:33,420
So the question now is what we need to do
11
00:00:33,420 --> 00:00:36,850
in our view here in our template
12
00:00:36,850 --> 00:00:39,310
and the answer is rather simple.
13
00:00:39,310 --> 00:00:42,310
We can open the email client of the visitor
14
00:00:42,310 --> 00:00:45,330
with the mailto instruction.
15
00:00:45,330 --> 00:00:49,200
That is standard HTML has nothing to do with Django
16
00:00:49,200 --> 00:00:51,120
or anything like that.
17
00:00:51,120 --> 00:00:54,270
With mailto: you can, for example
18
00:00:54,270 --> 00:00:56,620
make sure that the mail client is opened
19
00:00:56,620 --> 00:01:01,620
and test@test.com is pre-filled as a receiver
20
00:01:01,680 --> 00:01:03,653
as a recipient of that email.
21
00:01:05,060 --> 00:01:08,320
So with that, if I now save that template
22
00:01:08,320 --> 00:01:10,780
and we reload this is now a link
23
00:01:10,780 --> 00:01:12,800
we can work on the styling in a second,
24
00:01:12,800 --> 00:01:13,960
it is a link now
25
00:01:13,960 --> 00:01:16,550
and if I click it on a second screen for me
26
00:01:16,550 --> 00:01:19,130
but still it opened up this email client
27
00:01:19,130 --> 00:01:20,930
and the same should be true for you.
28
00:01:22,290 --> 00:01:25,750
So let me briefly work on the styling here
29
00:01:25,750 --> 00:01:28,230
for this we get our static files
30
00:01:29,520 --> 00:01:32,820
and we got the static file for the post to detail
31
00:01:32,820 --> 00:01:36,050
and there in the end I wanna make sure that
32
00:01:36,050 --> 00:01:39,010
since this is in the overall summary,
33
00:01:39,010 --> 00:01:41,870
in the summary my link is styled differently.
34
00:01:41,870 --> 00:01:44,320
So it's in this section with ID summary.
35
00:01:44,320 --> 00:01:46,900
So I'll go to post a detailed CSS
36
00:01:46,900 --> 00:01:49,093
and make sure that in summary,
37
00:01:51,030 --> 00:01:53,800
maybe here below summary address
38
00:01:53,800 --> 00:01:56,120
I style links in the summary
39
00:01:56,120 --> 00:01:59,820
and I make sure that the color there is still white
40
00:02:02,060 --> 00:02:04,683
and the text decoration is non.
41
00:02:06,380 --> 00:02:09,530
Now with that, save this file
42
00:02:09,530 --> 00:02:10,789
go back to your blog post
43
00:02:10,789 --> 00:02:12,910
and there open up your developer tools
44
00:02:12,910 --> 00:02:15,810
and then right click on the refresh icon here in Chrome
45
00:02:15,810 --> 00:02:16,870
and click empty cache
46
00:02:16,870 --> 00:02:18,070
and hard reload
47
00:02:18,070 --> 00:02:20,520
to ensure that the latest version of the CSS file
48
00:02:20,520 --> 00:02:21,480
is pulled in
49
00:02:21,480 --> 00:02:23,580
and now it's white again.
50
00:02:23,580 --> 00:02:25,350
You can of course style it differently
51
00:02:25,350 --> 00:02:27,470
to make it more obvious that it's a link.
52
00:02:27,470 --> 00:02:29,070
I just want to focus on how we get
53
00:02:29,070 --> 00:02:31,210
the actual email address in there
54
00:02:31,210 --> 00:02:33,550
because up to this point, that's not the case.
55
00:02:33,550 --> 00:02:36,540
Currently, I have tests@test.com in there
56
00:02:37,420 --> 00:02:40,430
but now we can use this interpolation syntax
57
00:02:40,430 --> 00:02:41,550
with the double opening
58
00:02:41,550 --> 00:02:43,370
and closing curly braces
59
00:02:43,370 --> 00:02:47,020
here inside of the value of this ref attribute
60
00:02:47,020 --> 00:02:49,660
and then point@post.author.email_address
61
00:02:51,770 --> 00:02:53,630
so at this email address field
62
00:02:54,540 --> 00:02:56,750
that's what we can do with Django
63
00:02:56,750 --> 00:02:59,880
and it's a related models.
64
00:02:59,880 --> 00:03:01,360
It works just like this
65
00:03:01,360 --> 00:03:05,200
as you learn it over the last core sections as well.
66
00:03:05,200 --> 00:03:08,980
So now with this, if I now reload this
67
00:03:08,980 --> 00:03:11,230
it indeed I can see it in the bottom left corner.
68
00:03:11,230 --> 00:03:12,940
It's very small, but you can see it.
69
00:03:12,940 --> 00:03:15,014
It indeed now points at the email address
70
00:03:15,014 --> 00:03:17,423
I set up for this author.
71
00:03:18,310 --> 00:03:19,860
So that works,
72
00:03:19,860 --> 00:03:21,590
let's work on the tags now
73
00:03:21,590 --> 00:03:23,040
and for the tag, I wanna make sure
74
00:03:23,040 --> 00:03:27,480
that I would put them below this h2 element here.
75
00:03:27,480 --> 00:03:30,710
So for this, let's try adding a div here
76
00:03:31,760 --> 00:03:34,260
and here. I'll add tags as a text
77
00:03:35,640 --> 00:03:37,920
and if we now reload, we see tags here.
78
00:03:37,920 --> 00:03:40,490
So that's not where the tag should show up
79
00:03:40,490 --> 00:03:42,853
and we can, again, work on styling later.
80
00:03:43,900 --> 00:03:45,512
Maybe we want to have come closer to the title,
81
00:03:45,512 --> 00:03:48,690
but again styling is something we can do next.
82
00:03:48,690 --> 00:03:51,310
Of course I don't wanna have to hard-coded word tags here
83
00:03:51,310 --> 00:03:53,970
but the actual tags off that post,
84
00:03:53,970 --> 00:03:56,720
and thankfully again it is straightforward
85
00:03:56,720 --> 00:03:58,980
to get access to them.
86
00:03:58,980 --> 00:04:00,770
We have access to the post
87
00:04:00,770 --> 00:04:03,510
and of course that post has tags.
88
00:04:03,510 --> 00:04:05,876
So what we can do a year to loop through all the tags
89
00:04:05,876 --> 00:04:07,500
and rendered them.
90
00:04:07,500 --> 00:04:12,500
We can create a tag here in Django templates syntax.
91
00:04:12,600 --> 00:04:15,500
So not related to our tags stored in the database.
92
00:04:15,500 --> 00:04:17,860
So this Django template language syntax
93
00:04:17,860 --> 00:04:19,399
which is called tag,
94
00:04:19,399 --> 00:04:20,250
create a new tag here
95
00:04:20,250 --> 00:04:23,550
and create a for tag specifically
96
00:04:23,550 --> 00:04:26,870
to then loop through all the tags in tags
97
00:04:26,870 --> 00:04:29,773
to be precise in post.tags.
98
00:04:31,170 --> 00:04:34,040
Our post has a tags key
99
00:04:34,040 --> 00:04:35,730
because our model,
100
00:04:35,730 --> 00:04:38,080
our post model has a tags field
101
00:04:38,080 --> 00:04:40,610
which has this many, too many field.
102
00:04:40,610 --> 00:04:42,453
So let's try looping through that.
103
00:04:43,550 --> 00:04:46,230
Let's also, of course, therefore end this for loop
104
00:04:46,230 --> 00:04:50,050
and then in between maybe just output a couple of spans
105
00:04:50,050 --> 00:04:53,300
where every span then at the moment
106
00:04:53,300 --> 00:04:57,370
just outputs the interpolated tag.
107
00:04:57,370 --> 00:04:59,964
To be precise the tag.caption,
108
00:04:59,964 --> 00:05:02,490
because in our tag model
109
00:05:02,490 --> 00:05:06,220
we do have that caption field, which holds the actual text
110
00:05:06,220 --> 00:05:08,760
but outputting tag itself would also work
111
00:05:08,760 --> 00:05:11,803
because of this store function, which we added.
112
00:05:13,250 --> 00:05:16,790
But our output tag caption save this
113
00:05:16,790 --> 00:05:17,980
and reload,
114
00:05:17,980 --> 00:05:19,540
and it crashes.
115
00:05:19,540 --> 00:05:21,810
Now, why does this crash here?
116
00:05:21,810 --> 00:05:25,410
It crashes because a posts does have texts
117
00:05:25,410 --> 00:05:28,390
but what is this tags field again?
118
00:05:28,390 --> 00:05:32,360
Do your remember, it's not a list of tags.
119
00:05:32,360 --> 00:05:34,850
Instead, it is just an object
120
00:05:34,850 --> 00:05:38,730
that allows you to drill into their related model
121
00:05:38,730 --> 00:05:41,543
or run queries on their related model.
122
00:05:42,410 --> 00:05:44,690
So therefore we can't use tags like this
123
00:05:44,690 --> 00:05:47,070
it's not a list of tags
124
00:05:47,070 --> 00:05:48,690
but we can get there.
125
00:05:48,690 --> 00:05:51,530
Back in our view was in post detail
126
00:05:51,530 --> 00:05:54,420
we could, for example add a new variable
127
00:05:54,420 --> 00:05:56,670
to the template called tags
128
00:05:56,670 --> 00:05:59,910
or post_tags, whatever you want
129
00:05:59,910 --> 00:06:04,593
and as a value, we can use our identified post here
130
00:06:07,650 --> 00:06:09,210
and then access tags
131
00:06:09,210 --> 00:06:12,690
and on tags, we could now get all.
132
00:06:12,690 --> 00:06:16,570
All the tags related to this post
133
00:06:19,120 --> 00:06:20,750
that is now something we could do.
134
00:06:20,750 --> 00:06:25,000
Now we are querying for all the related tags
135
00:06:25,000 --> 00:06:26,880
all the tags assigned to this post
136
00:06:27,860 --> 00:06:30,030
and it's now the post tags variable
137
00:06:30,030 --> 00:06:33,240
which we can use in the template to loop through.
138
00:06:33,240 --> 00:06:36,020
So here I replaced post.tags
139
00:06:36,020 --> 00:06:38,913
with my new post_tags variable.
140
00:06:39,770 --> 00:06:41,930
I still output tag caption
141
00:06:41,930 --> 00:06:43,840
because we are still querying
142
00:06:43,840 --> 00:06:46,140
for entries from the tags table,
143
00:06:46,140 --> 00:06:48,160
which are based on the tag model,
144
00:06:48,160 --> 00:06:50,163
which does have this caption field.
145
00:06:52,010 --> 00:06:54,083
So with that if we save all of that,
146
00:06:55,060 --> 00:06:58,230
also the template, if I reload here this works
147
00:06:58,230 --> 00:07:01,400
and it's outputting featured and hot.
148
00:07:01,400 --> 00:07:02,720
Now of course, to finish this up
149
00:07:02,720 --> 00:07:04,970
we might wanna work on a styling here
150
00:07:04,970 --> 00:07:09,150
and for this I'll just give this span a CSS clause of tag
151
00:07:11,540 --> 00:07:14,100
so that we can select it in our CSS file
152
00:07:14,100 --> 00:07:15,400
and apply styling
153
00:07:16,560 --> 00:07:18,910
and I'll also wanna give to his titles some styling again
154
00:07:18,910 --> 00:07:21,680
to remove the margin to the bottom.
155
00:07:21,680 --> 00:07:26,680
So in post detailed CSS on the h2 tag here,
156
00:07:26,850 --> 00:07:28,834
I wanna go to margin bottom
157
00:07:28,834 --> 00:07:33,240
and set this to 0.25rem
158
00:07:34,450 --> 00:07:36,500
which should be less than it's currently,
159
00:07:37,470 --> 00:07:40,530
and then at the bottom of this file maybe
160
00:07:40,530 --> 00:07:42,270
I wanna add this new tag clause
161
00:07:42,270 --> 00:07:44,520
which should be added to the tags span
162
00:07:44,520 --> 00:07:47,330
and there give them a background color of,
163
00:07:47,330 --> 00:07:49,110
let's say white,
164
00:07:49,110 --> 00:07:53,623
a text color of this purple color, which we're using.
165
00:07:54,770 --> 00:07:56,460
So let's say this purple color
166
00:07:56,460 --> 00:07:58,380
from the main navigation
167
00:07:58,380 --> 00:08:02,180
apply this as a text color for the tags,
168
00:08:02,180 --> 00:08:03,360
give them some padding,
169
00:08:03,360 --> 00:08:05,810
so let's say 0.5rem top and bottom,
170
00:08:05,810 --> 00:08:06,990
1rem left and right.
171
00:08:06,990 --> 00:08:08,900
We'll see if this works
172
00:08:08,900 --> 00:08:12,623
and then also give them rounded corners maybe.
173
00:08:14,410 --> 00:08:17,910
Like this, save that,
174
00:08:17,910 --> 00:08:21,720
open up the developer tools again to hard reload
175
00:08:21,720 --> 00:08:24,210
with a right click to load that latest file
176
00:08:24,210 --> 00:08:25,930
and now we got these tags here
177
00:08:25,930 --> 00:08:28,670
and that's looking quite okay, I would say,
178
00:08:28,670 --> 00:08:32,653
and then for now we also use all that data in that blog.
13377
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.