[MUSIC]
Hello again.
We've started to see the real power of templates to be able to set their traits,
contents, and structure.
And next week, we're gonna go through a whole range of techniques and
make some powerful websites.
But to finish off this week, I want to do one more thing with you which is flip over
what we did in the last video.
So the last video, we looked at how we can use a single template and put two
different bits of data on it, that's the main thing you're gonna do with templates.
But actually, you can kind of do the opposite and
use templates to display a single set of data in two different ways.
So if we look at this new version of the website,
I've got two little buttons here, at the top.
The first one displays an image with all these details.
You can see the image, you can see the message dates, the title or the author.
But, I can also create a different view.
The mass data view's useful if you wanna know everything about it or
you want to extract information, but
it's not the nicest way, it's not the nicest looking way of viewing an image.
So let's have another way, which is creating this nice pop up view which
appears in front of the page, it's got a nice border, it looks much nicer.
So I'm gonna take you through how you display both of these different
images from the same set of data, from the same data object.
So what we have is an object and
it's exactly the same object we've been using all through this week.
And what we wanna do is take that object, run it through a template and
we get a web page, that's what we've done in the last couple of sessions.
But again, there's nothing to stop us taking that same object,
running it through a separate template and getting another kind of HTML that looks
very different and I'll tell you how to do that.
We'll, it's essentially using the same techniques we used in the previous videos,
so there's nothing too difficult.
But before we launch into those techniques, I wanna quickly show you how I
created that nice sort of modal pop-up that I'm gonna use the word modal.
That's a term we use for a piece of an user interface, in this case,
face to fact HTML, it appears in top of and covers up the original interface.
So that you're suddenly interrupted for
your main interactions with a webpage by this and
you can, you focusing on that for the moment and then you can make it disappear.
It's used a lot for dialog boxes, it pops up and you have to click.
You sort of read what it says and you click on it to go away.
But it's also quite nice, in this kinda context, for
displaying an image in a way that you focus really on the look of the image,
away from all the details and metadata.