Original subtitles

Let's work on the author first

In post detail, I'm outputting the author

and now I actually wanna wrap the name itself

into an anchor tag so that it's clickable

and there, I wanna point at the author email address.

I wanna open up the email client of the visitor

and prepare an email to the author.

Now in our modeling, our author model

we do have that email address field for the author.

So the question now is what we need to do

in our view here in our template

and the answer is rather simple.

We can open the email client of the visitor

with the mailto instruction.

That is standard HTML has nothing to do with Django

or anything like that.

With mailto: you can, for example

make sure that the mail client is opened

and test@test.com is pre-filled as a receiver

as a recipient of that email.

So with that, if I now save that template

and we reload this is now a link

we can work on the styling in a second,

it is a link now

and if I click it on a second screen for me

but still it opened up this email client

and the same should be true for you.

So let me briefly work on the styling here

for this we get our static files

and we got the static file for the post to detail

and there in the end I wanna make sure that

since this is in the overall summary,

in the summary my link is styled differently.

So it's in this section with ID summary.

So I'll go to post a detailed CSS

and make sure that in summary,

maybe here below summary address

I style links in the summary

and I make sure that the color there is still white

and the text decoration is non.

Now with that, save this file

go back to your blog post

and there open up your developer tools

and then right click on the refresh icon here in Chrome

and click empty cache

and hard reload

to ensure that the latest version of the CSS file

is pulled in

and now it's white again.

You can of course style it differently

to make it more obvious that it's a link.

I just want to focus on how we get

the actual email address in there

because up to this point, that's not the case.

Currently, I have tests@test.com in there

but now we can use this interpolation syntax

with the double opening

and closing curly braces

here inside of the value of this ref attribute

and then point@post.author.email_address

so at this email address field

that's what we can do with Django

and it's a related models.

It works just like this

as you learn it over the last core sections as well.

So now with this, if I now reload this

it indeed I can see it in the bottom left corner.

It's very small, but you can see it.

It indeed now points at the email address

I set up for this author.

So that works,

let's work on the tags now

and for the tag, I wanna make sure

that I would put them below this h2 element here.

So for this, let's try adding a div here

and here. I'll add tags as a text

and if we now reload, we see tags here.

So that's not where the tag should show up

and we can, again, work on styling later.

Maybe we want to have come closer to the title,

but again styling is something we can do next.

Of course I don't wanna have to hard-coded word tags here

but the actual tags off that post,

and thankfully again it is straightforward

to get access to them.

We have access to the post

and of course that post has tags.

So what we can do a year to loop through all the tags

and rendered them.

We can create a tag here in Django templates syntax.

So not related to our tags stored in the database.

So this Django template language syntax

which is called tag,

create a new tag here

and create a for tag specifically

to then loop through all the tags in tags

to be precise in post.tags.

Our post has a tags key

because our model,

our post model has a tags field

which has this many, too many field.

So let's try looping through that.

Let's also, of course, therefore end this for loop

and then in between maybe just output a couple of spans

where every span then at the moment

just outputs the interpolated tag.

To be precise the tag.caption,

because in our tag model

we do have that caption field, which holds the actual text

but outputting tag itself would also work

because of this store function, which we added.

But our output tag caption save this

and reload,

and it crashes.

Now, why does this crash here?

It crashes because a posts does have texts

but what is this tags field again?

Do your remember, it's not a list of tags.

Instead, it is just an object

that allows you to drill into their related model

or run queries on their related model.

So therefore we can't use tags like this

it's not a list of tags

but we can get there.

Back in our view was in post detail

we could, for example add a new variable

to the template called tags

or post_tags, whatever you want

and as a value, we can use our identified post here

and then access tags

and on tags, we could now get all.

All the tags related to this post

that is now something we could do.

Now we are querying for all the related tags

all the tags assigned to this post

and it's now the post tags variable

which we can use in the template to loop through.

So here I replaced post.tags

with my new post_tags variable.

I still output tag caption

because we are still querying

for entries from the tags table,

which are based on the tag model,

which does have this caption field.

So with that if we save all of that,

also the template, if I reload here this works

and it's outputting featured and hot.

Now of course, to finish this up

we might wanna work on a styling here

and for this I'll just give this span a CSS clause of tag

so that we can select it in our CSS file

and apply styling

and I'll also wanna give to his titles some styling again

to remove the margin to the bottom.

So in post detailed CSS on the h2 tag here,

I wanna go to margin bottom

and set this to 0.25rem

which should be less than it's currently,

and then at the bottom of this file maybe

I wanna add this new tag clause

which should be added to the tags span

and there give them a background color of,

let's say white,

a text color of this purple color, which we're using.

So let's say this purple color

from the main navigation

apply this as a text color for the tags,

give them some padding,

so let's say 0.5rem top and bottom,

1rem left and right.

We'll see if this works

and then also give them rounded corners maybe.

Like this, save that,

open up the developer tools again to hard reload

with a right click to load that latest file

and now we got these tags here

and that's looking quite okay, I would say,

and then for now we also use all that data in that blog.