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.
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; } |