10 - Adding Category Images and Custom Category Fields
Custom category fields – what are they good for? Huh! Absolutely…uh…well quite a bit as it turns out.
While EE has always had categories with category-specific images and descriptions, custom category fields were introduced with EE 1.6 and they prompted some confusion from the user community – “What would you use those for?”
We’re at the perfect spot for an example of using them; so, in this chapter, in addition to adding some category images, we’ll make use of some category custom fields.
Specifying Category Images
First let’s start with adding some thumbnail images to our categories for a bit of a visual cue about what we’re (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 112px tall.
- Load them up to the server. Note that the current EE interface does not provide a File Upload feature for category images so you’ll need to FTP them up instead. I’m just going to put them in the images/uploads directory that EE provides by default.
- 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.
- 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.
- 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/index 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/index template to display. Rather than give you two versions of the products/index 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
The best place to start here is by reviewing the EE documentation around custom category fields.
For this tutorial, 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 its 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 associate that data with our product categories:
- In the EE Control Panel navigate back to Admin > Weblog Admin> Category Management.
- Find your Products_Services Category group and click the Manage Custom Fields link on its row.
- Click the Create a New Custom Field button.
- Add your fields. I’m creating a field called “category_manager” and “manager_phone”, both with a Text Input Field Type and Default Text Formatting set to None.
- 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
Here is the updated code for the products/index template:
{embed="embeds/html_header" my_page_title="Products"}
<body>
<div id="content">
{embed="embeds/logo_title"}
{embed="embeds/main_nav" my_location="products"}
{embed="embeds/search_section_intros" the_url_title="products"}
<div id="maincontent">
<div id="right_side">
{embed="embeds/latest_news"}
{embed="embeds/latest_products"}
</div><!-- close right_side -->
<div id="left_side">
{exp:weblog:categories weblog="products" style="linear" show_empty="yes"}
<h2 class="underline">{category_name}</h2>
<p>
<img class="category_image" src="{category_image}" alt="{category_name}" title="{category_name}" height="112" width="150" />
<strong>Line Manager:</strong> {category_manager}<br />
<strong>Phone:</strong> {manager_phone}
</p>
<p>
{category_description} <a href="#">View Products >></a>
</p>
<div style="clear:left"></div>
{/exp:weblog:categories}
</div><!-- close left side div -->
</div><!-- close main content div -->
{embed="embeds/footer"}
</div> <!-- close content div -->
</body>
</html>
Let’s go through the changes, which are all within the exp:weblog:categories tag:
- 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 its own paragraph.
- I had to add div style =” clear: left;” 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.
The Results
You should be able to bring up your Products index page and view the added custom category data. Here’s my working example.
Category Navigation
Previous Comments
by Mike Boyink (Author)
Date: Friday, June 26th, 2009
Comment: #3
Hey Chris—
These are custom category fields so you enter content into them by editing your categories. It’s the same interface where you would add a category description,etc.
by chris
Date: Friday, June 26th, 2009
Comment: #4
You are so awesome! And right, of course. TY! Now I can move on to 12!!!
by .(JavaScript must be enabled to view this email address)
Date: Wednesday, July 22nd, 2009
Comment: #5
Hi there Mike! I have a site that is close to launch. I followed this series of tutorials pretty closely for some of the things that they needed to have done. They are a film society with various types of films/events. I created a blog for the shows using the index, list, and details outlined in this section. This included little category images and you can see it in action here: http://fountaintheatre.org/expeng/index.php/shows/
When you click on the category image, you get a list of shows in that category—and the list of shows have images. You can click on each show in the list for more details. Sounds familiar huh?
Ok, well, now my problem is that they’ve decided that instead of a generic category image, they want to include the actual photo of the upcoming show within that category.
I’m using category_image to display the category image on the template group index page :), so I looked at my details template and thought I could substitute film_image for category_image. When I did that I ended up with blank images for the categories.
I guess they are pulling from different weblogs—categories for the categories list (index) and coming_soon for the detail page.
Is it possible to pull from 2 different weblogs on the main index page for the template group so that I can show the image from the upcoming film in that category but the actual information from the category?
by Mike Boyink (Author)
Date: Wednesday, July 22nd, 2009
Comment: #6
Sure…just use another weblog entries tag to grab the image from the upcoming show. Use the disable parameters to turn off as much as you can - but I’ve many templates with multiple tag pairs.
by .(JavaScript must be enabled to view this email address)
Date: Friday, July 24th, 2009
Comment: #7
you know i thought about that ... i’ll give it a go. thank you!
by .(JavaScript must be enabled to view this email address)
Date: Saturday, November 7th, 2009
Comment: #8
HI
Is there any way of displaying the categories/images two per line., rather than one per line
by Mike Boyink (Author)
Date: Saturday, November 7th, 2009
Comment: #9
Sure - just figure out whatever HTML you’d need to do that and get EE to write it out. Floated divs would be easiest.
by .(JavaScript must be enabled to view this email address)
Date: Monday, November 16th, 2009
Comment: #10
for category image what is the URL that we use?
http://www.example.com/imageone.jpg
or /user/domain/public/web/imageone.jpg
all i get is a string of the image name
by Mike Boyink (Author)
Date: Monday, November 16th, 2009
Comment: #11
You would never use a server path for code that will be rendered out to the page - and as I mentioned this is another place you can use the site_url variable to fill in the part of the path.
by Chris
Date: Thursday, June 25th, 2009
Comment: #1
Towards the end here, when you say:
“Edit your Categories. Now that you have additional fields, you’ll need to go back and enter data into them for each category.”
I can add them as instructed, but *where do I edit them (add the phone numbers, etc.)*?
My ‘products’ weblog?
CS