[5/38] Creating A Home Page

Hi, I'm Chris from CoddreviewVidios.com, and in this video, we're going to add in our homepage

And our homepage is going to take two images from each category that we have and display those

Those would be the top two images, maybe to the most popular or whatever. In our case, there's going to be the first two images in our array

Again, it's just a proof of concept at this stage. And then at the bottom, we're going to take eight random images from all the available categories

Now this is actually quite easy to do because we're working with arrays, but when we've come to work with Doctrine a little later on

it's actually a little bit harder, as there is no sought by Rand, at least not easily available to us inside doctrine

But we'll address that as we go through. So as it is, we're in the slash gallery

but if we go to the route, we don't actually have anything in there. So we're going to start off by creating ourselves a home controller

And again, if this is sort of new to you, if you're not that comfortable yet with Symphony

I would advise just typing this stuff out, just to get yourself used to it

So we're in the namespace of that bundle controller. Our class is going to be home controller

which extends controller from the framework bundle. And inside that, we're going to have a public function

which I'm just going to call index action. And I'm going to make sure to add in the routing annotation straight away

as that's typically something I would forget, particularly when recording videos. So say, at root, and remember, that's brought in the additional use statement

This is just going to be the slash. In other words, that home path. I'm going to name this route as home also

Okay, so one thing that I've done is I've brought in a bunch of images. Did this a couple of videos back, but if you've not got this yet

or you've not got your own selection of images, then feel free to grab them from the repo

It's probably easiest just to clone the repo and pull them out, or however you wish to get access to them

but it saves you from having to download a bunch of images unless you particularly wish to

But what I'd like to do now is create three arrays, and I've named these because of this

so starting with abstract. there, then landscape, summer, and then landscape winter for those different blocks

And what I'd like to do is have three arrays here. They're called abstract, summer, and winter

Now, I could do this the tedious way by refactoring, renaming, grabbing all that information, and so on

But do have a command line shortcut to make this just a touch easier

So as you can see, I've already copied those images in to the web images directory. So if I change into web images, do an LSLA, maybe LS would just be an easier way to see this

We do have all these images, but they've got these weird amounts of space between them to get them into columns

So instead, I'm going to do LS minus B for bear. Doesn't really do that much

One for one file per line. An M to add in a comma And then capital Q to quote the image name which just makes it easier when pasting it into our arrays

Okay so let's drop back in here and paste all that lot in

Selected all command R and what we'll do is we'll say find us the comma and then a space

and I want to replace that with a comma followed by a new line making sure to tick the reg x

replace that and then it's just a case of tidying up okay now you could

extract these out into their own private functions or whatever but really we're pushing the boundaries

of our hard-coded implementation at this point and in the next video we're going to get started

using the database so I'm not going to bother I'm just going to do it all inside one controller action

but of course feel free to do it anyway that you like now we're going to start off by displaying the random images

because that's probably the easier of the two problems that we're going to have. And the reasoning for that is because otherwise we're going to end up

with a bit of template duplication, and I want to address that separately. So rather than manually

creating a fourth array, which contains all of those, I'm instead just going to create a new

variable called images, which are going to contain the output of array merge, taking in abstract

summer and winter. Okay, so that should just be a flattened array containing the contents

of all three. And then because I want to randomize these images, I'm going to call shuffle against

images. And the really nasty thing about doing that is that that has now completely mucked up

this image is variable. I hate mutation. It's like the number one source of bugs for me

So this is, as I say, a pretty nasty way of doing it because it's potentially, maybe not in

this instance. I mean, it's quite a trivial situation, I suppose. But if you do this sort of thing

in a more real world setting, then yeah, this is where bugs can sort of slip in whenever you start

changing stuff up. It would be a lot nicer if we could assign the output of this to a new

new variable and leave this one alone. But hey-ho, that's built in function and it is what it is

Anyway, we're going to create a new variable ourselves called randomized images

which is going to take the first eight of those shuffled images

So we need to pass in the images array, and then the offset, well, we're starting at zero

because it's a zero-indexed array, and we want to take the first eight. Finally, even though we don't have it yet, what we're going to do is render out the home

template index HTML, passing in our array of randomized images. So let's go ahead and create that template

Nothing that you haven't seen before by now. Again, let in PHP store and create the directory and the file

And then I'll very quickly just add this in. We're going to start off again by Extends Base, HTML Twig

And you can use the Sympany plugin to make this a little bit quicker still

So I have a block body so it like automatically complete template names and so on So M block just don seem to have it enabled for this project at the moment Div of Class row Again bootstrap stuff I have a simple four loop that says for image in randomized images

Remembering that's the key that we've just passed in. Close off that four loop

And then we'll just have probably two rows of four. Seems to be a good shout here

So we'll say column. If we're on a small phone or a phone-sized screen, we'll have two per row

Otherwise, on a larger screen, we want four per row. So again, that's 12 divided by three because of the bootstrap 12 column grid

Then inside each one, we'll have the div with a class thumbnail, and then we'll have the image

And we're not going to worry about actually linking to that image, to the view at the moment

because we don't have that slug set up properly. So I say it's from the web route, and again, it's going to be the full image, which is a bit lame

but we've not addressed that as of yet, and then we'll have some alt text. So we should now be able to browse to the slash

Have I missed my return statement? I have. Try again. So we're on the small screen size there

so I'm just going to close that off, and you can see now we've got our four in a row, and we each time get these randomized images

So above these, one of the one is these category views. So we'll start off with abstract

as I think that's the first in the list. I want to show the top two images from abstract

which in this case, background pink and black and white wave, purely alphabetical

as our site grows, we'll do something a little bit more interesting with that. So we'll just have a key called abstract

And I'm just going to slice off again. This time from the abstract array

I'm going to take from zero, just two. And that should be good enough that gets us the top two images from that array

And then back inside our index, I'll have a new row. We'll give it a header two tag

And we'll say top wallpapers for abstract. And then we'll have another row where we will loop through

and so we'll say for image in, in this case abstract, close off that

And this time if we're on a small screen we'll have one per row, so column small 12, and if we're on a bigger screen we'll have two per row

So again, 12 divided by 6, that's how we get to 2, and the bootstrap 12 column grid, inside which we'll have a div class of thumbnail, and inside that will have our image source, and again it's basically this, I'll steal that

that. Okay, so let's take a look at what we've got there now. And that looks all right. I'm quite

happy with that. Maybe we'd want a little header two tag in here as well to say random images

just to add some separation in there, maybe a HR as well or something, I don't know. It doesn't

really matter. I'm not overly concerned about the way it looks. But now I do want the same thing

going on for our remaining two categories So we got summer and we got winter And to begin with it sort of makes sense to take a copy of that and paste it in twice So you got summer and you got winter

And instead here you've got winter and you've got summer. I mean, we've got three categories and that works

The thing is, if we had 12 categories, do we really want to repeat this whole thing 12 times

It seems a little bit lame. So instead what I'm going to do is I'm going to extract the piece that repeats

So we've got this four loop which repeats and we need to pass in something for it to repeat over

And then we've also got this which seems to repeat as well. So just take a copy of that or a cut it out

And I'll call this a new template which we're going to call best in category

You can call it, of course, anything that you like. I'll paste that in. And rather than just have image in abstract, we're just going to have image in images

It doesn't matter at this point because whatever we want to pass in as images, we will just do so from our template that calls this template

We don't need to worry about any of this, but we will need to come back and change this template up when we start working with objects

So back inside our index now, what we can do is include this template

this best in category template. So we'll say best in category HTML twig

and then we'll say with open paren, and then inside single quotes

I'm going to say images, because images is the key that we're looping over in our foreloop

So we'll say images, in this case, going to be abstract. And we'll see where we get with that

So saying unable to find a template. And this is actually a little bit of a weird one

It goes back to the earlier days of symphony. And what we need to do is prefix this with two colons

That should just work. Or it would, but I've forgotten home. So home, best in category

So let's give that a shot. And we can see it's working. And the reason that's working is these two colons represent app resources

and the views directory. We're saying we're simply in a sub-directority of app resources views is because in older versions of symphony we typically didn't use this concept

of a single app bundle we would have multiple bundles for our project and you might have a resources

views under each of the bundles and so this path would contain the bundle name and so on but modern best

practice is just to use this app bundle and then have every every one of your views under app resources

views so that's where that comes from it's a little bit of a sort of a throwback anyway we're doing the same

for each of these. So I just need to pass in summer here and winter here. And that reduces

the duplication quite significantly, but everything should still work, which looks good. Okay

so at this point, we're basically done with our proof of concept. In the next video, we're

going to start moving a lot of this over to the database, which will mean that we start working

with objects, but we have a decent starting point to work from