indexu.com » category listing http://www.indexu.com developer blog Wed, 30 Jun 2010 05:06:39 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Show category listing as list of images http://www.indexu.com/show-category-listing-as-list-of-images/ http://www.indexu.com/show-category-listing-as-list-of-images/#comments Mon, 14 Jun 2010 07:47:48 +0000 dody http://www.indexu.com/?p=38 alternative category listing

In this tutorial I will show you how to create an alternative category listing in front page where the categories will be listed as a series of images.

1) Prepare the image files. Create a folder called ‘cat‘ in template folder. Then put the images files here.

2) Edit category image file for each categories with admin panel or phpmyadmin. Put the filename of image file you have prepared for each categories.

edit category image file

3) Edit index.html, add the following code where you want to put this category list.
You can change $item_per_row value as you desire.

<%php%>
  global $dbConn, $indexu;
 
  $item_per_row = 4;
 
  $img_path = $indexu->config['site_url'].'/themes/'.$indexu->config['active_theme'].'/cat';
 
  $query = "select name, image
            from idx_category
            where parent_id = '0'";
  $result = $dbConn->Execute($query);
 
  $limit = $result->RecordCount();
  $i=0;
 
  while ($row = $result->FetchRow()) {
    $i++;
 
    if ($i % $item_per_row == 1) {
      print "<div class='cat_nl'>";
    }
 
    $url = SEOReplace($row['name']).'/';
    print "<div class='cat_item'><a href='$url'>
           <img src='$img_path/{$row['image']}' title='{$row['name']}' alt='{$row['name']}' /></a></div>";
 
    if ($i % $item_per_row == 0 || $i==$limit) {
      print "</div>";
    }
  }
<%/php%>

4) Add the following css classes into css file, usually style.css

.cat_nl {
  clear:both;
  width:100%;
  margin-bottom: 10px;
}
 
.cat_item {
  margin-right:10px;
  display:inline;
}
]]> http://www.indexu.com/show-category-listing-as-list-of-images/feed/ 0