Hi, I'm Christian Coadry of dvideos.com and in this video we're going to add in our home
page. And our home page is going to take two images from each category that we have and
display those. Those will be the top two images, I think, that are the most popular or whatever
In our case, they're just 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 come to work with Doctrine a little later on, it's actually a little bit harder as there is no thought by brand, at least not easily available
to us inside Doctrine. But we'll address that as we go through. As it is, we're in the Flash
Gallery, but if we go to the Roots, we don't actually have anything there. So we're going
to start off by creating ourselves a Home Controller. And again, if this is sort of
muting you, you're not that comfortable yet with Symphony. I would advise just typing
this stuff out just to get yourself used to it. So 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 have a public function that brand is going to call Index
Action. And I'm going to make sure to add in the routing that I've taken straight away
because that's typically something I would forget, particularly when recording videos. So say, at Root, and remember that's got 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 Root Home
also. Okay, so one thing that I've done is I've brought in a bunch of images. I 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 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 that are called Abstract, Summer
and Winter. Now I could do this the tedious way by refactoring, renaming, grabbing all
that information, and so on. I do have a command line shortcut to make this just a
touch easier. As you can see, I've already copied those images in to the red images directory
So if I change it to red images, do an LSLA, maybe LS would just be an easier way to see
this. We do have all these images, but we've got these here amounts of space between them
to get them into columns. So instead, I'm going to do LS minus D for Bear, doesn't really
do that much. One for one file per line, and M to add in a comma, and then capital
Q to quote the image name, which just makes it easier than pasting it into our arrays
Okay, so let's drop back in here and paste all that one in. Select it 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 red X, replace that
and then it's just a case of tidying up. Okay, now you could extract these out into your
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 in size one controller
action, but of course, feel free to do it any way that you like. Now we're going to start off by displaying the random images, because that's probably the easiest of the
two problems that we're going to have, and the reason 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 is going to contain the output of array
merge, taken 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 randomise these images
I'm going to call shuple against images, and the really nasty thing about doing that is
that that has now completely mucked up this images variable. I hate mutations, it's like
the number one cause of bugs for me, and so this is, I would say, a pretty nasty way of
doing it, because it's potentially, maybe not in this instance, but it's quite a trivial
situation I suppose. If you do this sort of thing in a more real world setting, then 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 variable and leave this one
alone, but hey ho, it's still in function and it is what it is. Anyway, we're going
to create a new variable ourselves called randomised images, which is going to take
the first eight of those shupled images. So we need to pass in the images array, and then
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 randomised
images. So let's go ahead and create that template. Nothing that you haven't seen before
by now. Go in PHP 4 and create the directory and the file, and then I'll very quickly just
add this in. I'm going to start off again by extend base.html.pig. And you can use the
symphony plugin to make this a little bit quicker still. So I'll have a block body
fill that automatically complete, template names and so on. End block. I don't seem to
have it enabled for this project at the moment. Dib of class row. Again, bootstrap stuff
I have a simple for loop that says for image in randomised images, remembering that's the
key that we've just passed in. Close off that for 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, a phone-sized screen, we'll have two per row. Otherwise, on a larger screen, we'll
want four per row. So then that's 12 divided by three, because of the bootstrap 12 column
grid. Then inside each one, we'll have a div, a class, a thumbnail, and then we'll have
a div. 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. We'll say from the web
root, and again, it's going to be the full image, which is a bit lame, but we'll not
address 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 found three randomised images. So above these, what I
want is these haphazard reviews. So we'll start off with abstract, because I think that's
the first on the list, and I want to show the top two images from abstract, which in
this case, background pink and black and white. They're purely alphabetical, but as I mentioned
as our site grows, we'll do things a little bit more interesting than that. So we'll just
do a new thing 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, we'll
have a new row. We'll give it a header tree type, 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 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 six, that's what we get to two, and that's our 12 column
grid. Inside which we'll have a div class, a thumbnail, and inside that we'll have our
image, force, and again, it's basically this. Let's take a look at what we've got there
now. That looks alright. I'm quite happy with that. Maybe we want a little header tree type
in here as well, to say random images, just to have some separation in there, maybe an
HR as well or something, I don't know. It doesn't really matter, I'm overly concerned
about the way it looks. But now I do want the same thing going on for our remaining
two categories. So we've got summer, and we've got winter, and to begin with, it sort of
makes sense to take a copy of that and paste it in twice, so you've got summer and you've
got winter, and instead here you've got winter and you've got summer. And we've got three
categories, and that works. The thing is, if you have 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 for 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 I'll just take a copy of that, or cut it out, and
I'll call this a new template which we're going to call desk 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 will just do so from our template that calls
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 desk in category template. So I'll call desk in category
HTML3, and then we'll call with, open paren, and then inside single quotes, I'm going to
say images, because images is the key that we're reaping over in our for loop. So we'll
say images in this case from the abstract, and we'll see where we get with that. So we're
saying unable to find the template. This is actually a little bit of a weird one. It goes
back to the earlier days of Symphony. What we need to do is prefix this with two colons
and that should just work. Or it would, but I'd forgotten home. So home, desk in category
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, the same, but simply
in a sub directory of app resources views. It's because in older versions of Symphony
we typically didn't use this concept of single app bundle. We would have multiple bundles
for our project, and we might have 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 we'll have every one of your views in the app resources views
So that's where that comes from. It's a little bit 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. This 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