Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
We now have a multidimensional array to store the information for our Media Library Catalog. In this video, we’ll build out the main Catalog page to display each item in a grid.
Vocabulary
Multidimensional Array - these include Associative Arrays, Hashed Arrays and Nested Arrays.
Responsive Web Design - A technique for creating websites that work on multiple screen resolutions via the combination of fluid images, fluid grids, and media queries.
Links
DOWNLOAD
Catalog data.txt
In the last video, we updated out
multidimensional array to look like this.
0:00
Now let's include this file
into our catalog page so
0:05
that we can check it out in the browser.
0:07
Include, inc/data.php.
0:13
Great, let's save this and
view it in browser.
0:19
When we refresh our page,
you'll notice we have much longer list.
0:24
We have 12 pass key notices followed
by array instead of our title.
0:28
We changed each element from
a simple piece of text to an array.
0:34
Now we need to change your
code to read this new array.
0:38
Let's modify our code to display images of
all 12 items in a nice four-column grid.
0:42
I included the styling for this four
column grid in the CSS for this project.
0:47
Those styles target an unordered
list with a class of items,
0:51
inside a div with a class of category.
0:55
Let's add those classes now.
0:57
We'll add catalog here, and
1:03
we'll add the class items here.
1:08
For each element in the array, we need
more than just text inside the list items.
1:15
We'll start by adding an anchor tag
inside the opening and closing item tags.
1:19
We can't put a double quote here,
because that would end out our string.
1:28
So instead, we'll use a single quote.
1:31
This eventually is going to
link to a details page that
1:34
will display the details of the item.
1:37
For now,
we're just gonna use the pound sign.
1:39
We'll close our anchor tag.
1:42
Now inside this link,
we'll need to add our image.
1:47
Our source and out alt tags are going
to pull from our catalog of items.
1:52
We can reference a particular element
inside the interior array for
2:02
the current item.
2:05
By typing the name of the variable,
item, and
2:07
then in square brackets we are going
to type the name of our key.
2:12
The key is the name of
the element that we want to use.
2:17
For the image path, we want the path
to the image which is stored in img.
2:19
We'll do the same thing for our alt tag.
2:29
End quotes, period, period, open quotes.
2:31
Let's add our item.
2:37
And for our alt we'll use the title tag.
2:40
Since PHP doesn't care about white spaces,
let's make this a little easier to read.
2:43
I'll make this wrap where we
want on a few extra lines.
2:48
There we go.
2:57
Instead of having the item here,
2:58
we need a simple paragraph tag that says,
view, details.
3:02
Great, let's save this file and
take a look at it in our browser.
3:09
As you can see, we're almost there.
3:15
For each item, we see the image,
and the View Details link.
3:17
When I move the mouse over a particular
item, the CSS I put in place at
3:21
the beginning of the project kicks in,
and you see the nice hover effect.
3:25
You need to sign up for Treehouse in order to download course files.
Sign up