In this chapter of the Building an ExpressionEngine Site we’ll build on the Products index page that we started in Chapter 9.

Yeah - I know.  It’s not exactly what I said we’d do at the end of Chapter 9—but I continue to see questions come up around the use of the custom category fields that became available in EE 1.6, and we’re at the perfect place to work a couple of those in.

Specifying Category Images
First let’s start with adding some thumbnail images to our categories for a bit of a visual cue about what wer’e (supposedly) selling.  We need to find the images, size them, get them to the server, and then edit our category setup.

• The first step is to choose your images and resize them appropriately.  I’ve put mine at 150px wide by 112 tall
• Load them up to the server.  Note that the current EE interface does not provide a File Upload feature for category images (now is the time you can add your vote to the feature request for this), so you’ll need to FTP them up instead.  I’ve created a specific directory under the default EE images directory for mine
• OK - now we need to specify the image for each category.  Back in the EE control panel, navigate to Admin > Weblog Administration > Category Management, choose your category, and click the “Add/Edit Categories” link by it
• Choose the category to edit and click the Edit link for it
• The Category Image URL field is where we need to put the path and filename to the category image.  This is another place that I like to use the { site_url } variable so that the full path is specified.  An example of one of my paths is “{ site_url }images/bees/category_accessories_150.jpg”.  (Note - remove the spaces in the site url variable)
• Click Update to save your changes
• Repeat for each category you’ve created. A timesaver here is to name your images in a similar fashion, and once you’ve entered the first path and filename just copy/paste it for each category and change the filename

Displaying Category Images
The next natural step would be to go back to the Products template and modify it to pull our new category images.  However —we are also going to add some custom category fields which will also require changing the Products template to display.  Rather than give you two versions of the Products template I’ll give you the final version below and point out what’s been added for both the images and custom fields.

Category Custom Fields
With EE 1.6 came the ability to add custom fields at the category level - and I’ve seen a lot of confusion over how or why you would use these in the EE forums.  Since we are working still at the category level let’s throw in a couple just to show what you might do with them on this site.

If we imagine that our site is for a distributor of automotive accessories (as the Product Categories would indicate), it’s likely that each category would have it’s own Line Manager, who would have their own phone number to call for questions regarding the product line. 

So let’s add custom category fields for a name and a phone number to asscociate that data with our product categories:

• In the EE Control Panel navigate back to Admin > Weblog Administration > Category Management
• Find your Product Category group and click the “Manage Custom Fields” link on it’s row
• Click the “Create a New Custom Field” button
• Add your fields.  I’m creating a field called “category_manager” and “manager_phone”, both Text Input with no default text formatting applied
• Edit your Categories.  Now that you have additional fields, you’ll need to go back and enter data into them for each category

The Updated Products Template
I’ve updated the Products Index template—you can see the rendered page here: Chapter 10 Products.

Here is the text version of the template: chapter_10_products.txt.

Let’s go through the changes, which are all within the weblog:categories tag:

• The H2 class and title are the same as before
• In the first paragraph, I’ve added an img tag that uses the category_image variable as it’s source, and the category_name as the alt text and title.  I’ve also set the image height and width here as they are all the same
• Note that I applied a class="category_image" to the image, and created a selector in the stylesheet to add some margin to the bottom of each image.
• Under the image code I’m now bringing in the custom category fields for category_manager and manager_phone
• I put the category_description in it’s own paragraph
• I had to add a div to clear the left float - otherwise the entries past the first category will stack up rather than aligning correctly to the left.  You may not need this depending on the relative lengths of your descriptions and size of your images

OK - I think we’re now setup well for the next chapter which will be creating the category index views showing the individual products in each category.

On to Chapter 11.
Back to Chapter 9.