Displaying All Items

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