Display category image in first position on category browse page

[damonc]

Hi.
When viewing the category browse page (category/default.php), I would like to be able to display the category image/thumbnail in the place where the first product would usually sit. For example, for 3 products per row:

Code Select Expand


  +---------------+  +---------------+ +----------------+
  |               |  |               | |                |
  |               |  |               | |                |
  |               |  |               | |                |
  | category image|  | product 1     | | product 2      |
  | not clickable |  |               | |                |
  |               |  |               | |                |
  |               |  |               | |                |
  +---------------+  +---------------+ +----------------+

  +---------------+  +---------------+ +----------------+
  |               |  |               | |                |
  |               |  |               | |                |
  |               |  |               | |                |
  | product 3     |  | product 4     | | product 5 etc  |
  |               |  |               | |                |
  |               |  |               | |                |
  |               |  |               | |                |
  +---------------+  +---------------+ +----------------+

But what I'm getting is this:

Code Select Expand


  +---------------+  +---------------+ +----------------+
  |               |  |               | |                |
  |               |  |               | |                |
  |               |  |               | |                |
  | category image|  | product 1     | | product 2      |
  | not clickable |  |               | |                |
  |               |  |               | |                |
  |               |  |               | |                |
  +---------------+  +---------------+ +----------------+

  +---------------+
  |               |
  |               |
  |               |
  | product 3     |
  |               |
  |               |
  |               |
  +---------------+

  +---------------+  +---------------+ +----------------+
  |               |  |               | |                |
  |               |  |               | |                |
  |               |  |               | |                |
  | product 4     |  | product 5     | | product 6      |
  |               |  |               | |                |
  |               |  |               | |                |
  |               |  |               | |                |
  +---------------+  +---------------+ +----------------+

This is the relevant section of default.php:

Code Select Expand

<div class="category-title category-browse-view-title"><?php echo $this->category->category_name; ?></div>
<div class="product floatleft<?php echo $Browsecellwidth . $show_vertical_separator ?> category-image">
<?php echo $this->category->images[0]->displayMediaThumb("", false);  ?>
</div>
<?php
// Category and Columns Counter
$iBrowseCol = 1;
$iBrowseProduct = 1;

// Calculating Products Per Row
$BrowseProducts_per_row = $this->perRow;
$Browsecellwidth = ' width' . floor (100 / $BrowseProducts_per_row);

// Separator
$verticalseparator = " vertical-separator";

$BrowseTotalProducts = count($this->products);

// Start the Output
foreach ($this->products as $product) {

// Show the horizontal seperator
if ($iBrowseCol == 1 && $iBrowseProduct > $BrowseProducts_per_row) {
?>
<div class="horizontal-separator"></div>
<?php
} ?>

<?php // this is an indicator wether a row needs to be opened or not
if ($iBrowseCol == 1) {
?>
<div class="row">

<?php
}

// Show the vertical seperator
if ($iBrowseProduct == $BrowseProducts_per_row or $iBrowseProduct % $BrowseProducts_per_row == 0) {
$show_vertical_separator = ' ';
} else {
$show_vertical_separator = $verticalseparator;
}

// Show Products
?>
<div class="product floatleft<?php echo $Browsecellwidth . $show_vertical_separator ?>">
<div class="spacer">
<div class="floatleft center">
    <a title="<?php echo $product->product_name ?>" rel="vm-additional-images" href="<?php echo $product->link; ?>">
<?php
echo $product->images[0]->displayMediaThumb('class="browseProductImage"', false);
?>
</a>
</div>

<div class="clear"></div>
</div>
<!-- end of spacer -->
</div> <!-- end of product -->
<?php

// Do we need to close the current row now?
if ($iBrowseCol == $BrowseProducts_per_row || $iBrowseProduct == $BrowseTotalProducts) {
?>
<div class="clear"></div>
   </div> <!-- end of row -->
<?php
$iBrowseCol = 1;
} else {
$iBrowseCol++;
}

$iBrowseProduct++;
} // end of foreach ( $this->products as $product )
// Do we need a final closing row tag?
if ($iBrowseCol != 1) {
?>

I would really appreciate some assistance with this.

Thanks in advance.