Hey everyone has to go.
So now we've put the videos within a season and then it pretty good.
But I did realize we've got to put the episode number.
So if you go back to the season provider we all got this season no sorry the episode No I mean we all
got the episode number there.
So you just take a variable and stick it inside the H for like that and then I'm going to do it as well
and then do a space after the doc give it save and you should see that slide number now so far refresh
that you'll see it's got the upside numbers so one two three four.
Yeah I've got the last time but this and that and there you know you've got the upside numbers.
So yeah.
What we do now is move on to showing related videos at the bottom.
So if you scroll down to my finished version you'll see.
You might also like and there's got other suggestions.
So this won't take much but we're gonna go back to here and implementing that.
So I won't open the category containers class so Gatorade containers open closed down this is invalid
class.
Now we're actually done with that.
So close down the season for the tab if you stay with open and yeah I wouldn't go through Kathy containers
class I'm going to add a function in here which would output this section for us.
So underneath this show all categories are a function called a public function show show category.
That's just to show a category that you give it.
So you give it action and adventure.
For example it'll show you all the entities within that fall into that category.
So it's actually pretty simple want to do those copy all of this code from show all categories because
it's willing to modify that so copy that code and paste in this show category function.
Now we're going to modify this query slightly instead of saying select all from categories we'll say
select two from categories where I d equals and then put equals and then put your place holder.
So ideal like that.
And underneath that we'll say query arrow bind value.
Okay.
And then want to bind to the I.D. place holder and the value in a bind to is the Category D.
I've just realized we didn't actually pass that in so this show category should take a parameter called
category I.D. and also take another parameter actually called title but all set up to no.
So what this is doing is it saying if they don't specify a title in the parameter set the value to No.
So that means you can call this function using one parameter if you like or you can call it using two.
So I could call this function like a show category I could pass in some I.D. of some category idea for
an actual surpass in some title or not.
Or I could just leave this out completely because it's got a default value so it means you don't even
need to specify this when calling the functions you could call it just like that.
All right.
So basically you're saying if they pass in the title use that or otherwise set the value of title to
be No.
Okay.
But anyway we'll get to that in a second.
So this of course is gonna be category I.D. So category I.D. but semicolon and scroll down a little
bit.
And in this get category function you'll see that the second properties is title.
Now when we did it on the show all categories we set the title is null so that it would use the cat
the title of the category whereas now we don't do that.
Now we want to show the title you might also like.
So we're going to pass in the title that came from the parameter and then because of this line right
here if there's got if the title has a value it will use that.
Otherwise we'll just use the category name.
Okay.
So keep these two as true because we do want to show TV shows and we do want to show movies.
So just keep them both is true and that should be it.
But again see one more thing I choose to add a class here called no scroll.
Okay I'll get to that in a second.
But basically we don't want this container to scroll sideways but yeah sure what that means but that
should be it you know.
So if I go back to my entity that BHP we're going to actually call this function now.
So just like we've done here with the season provide a code on copy paste it below and change the name
this to category containers and then also change the name of this variable and the function isn't called
create.
It's called show category that so paste that in there.
Now each passenger category is a parameter here.
So what we can do is is call the get category function on this entity.
I'm pretty sure we wrote that.
Let me just double check.
Entity to be right.
Get category.
So we didn't actually do a gate get Category D function so we can use create that now it's very simple
just copy and paste one of these functions below and just changes to get Category D category I.D. and
make sure I will spell this word wrong for some reason get category I.D. and then change that to cut
to carry I.D..
All right.
We're ready to call that function so instead of passing entity like this will say entity Aro get category
I.D. All right.
The title won't pass in.
Is there this you might also like.
Well that's why I'm passing you.
You can change if you want but you might also like Okay give us save and what it's doing basically is
you scan all the other videos or entities from that category.
So if I refresh the page now I'm on the wrong wrong tab.
Let me just say I refresh this site and scroll down and we see that yeah we see you most like now this
has got a scroll bar now.
I said that I didn't want to scroll.
The reason being if we've got tons and tons of videos what Netflix does is it shows them stacked on
top of each other.
For example if I go back to my site although I've only got five videos here let me just inspect and
kind of replicate what that would be like.
So if I go back to here what we would do is just manually copy and paste all those anchor tags.
So just what you'd have to do this.
I mean what are the candidates.
Let me just show you.
So I'm copying all those anchor tags and paste it below.
And again and again and again.
So I'm adding a ton of these now.
So let's say for example we had that many things they would all appear on top of that now.
This is what Netflix does for some reason it scrolls some of them but some of them it still stacks on
top of which other like this.
So that's what I've done.
If you don't want to do that you can just ignore this part that we're about to do and you can keep it
scrolling side to side like that.
That'll be fine too.
We're also going to use that no scrolling PA on the tab.
If you go back to the home page and click on one of the categories You'll see we'll get where this will
be stacked as well.
That's not very good I guess.
Let me scroll down to hear something.
You'll see it we've got this one they're displayed stacked as well so we'll reuse this later.
But if you didn't want to do that you could just ignore what we're about to do.
So we just need this style.
This no scroll part because remember I gave this a class of no scroll right here.
So it's real simple.
I think it is one line of CSX.
All they do is let's go back to here and let's open my style sheet.
This is the one right here inspect my style sheet and the scroll to the bottom.
I'm going to say dot preview categories preview categories dot no scroll.
So the element with both these classes to make sure that those together.
Then we'll say category and then dot videos like this and just say whitespace is going to be normal
and our weight.
No that's not special videos that's supposed to be entities like that.
Okay.
So yeah now you can see it stacked on top.
It's no longer scrolling.
So yeah.
UPDATE If you want to.
If you don't want to then just ignore it anyway.
I'm going to copy that code.
I'm going with my style sheet and add in there and now anything with the no scroll property will override
that scrolling stack on top of each other like this.
Okay.