MAGENTO TIP: PLACE CATEGORY IMAGE ABOVE MAIN LAYOUT BELOW NAV
- 7 Jun 2013
Sometime the default position of the category images (top of the main col above product grid) breaks the design of a site. Ideally what we want is a full page banner that runs the full width of the page.
Desired Layout
Default layout
Moving the category image above the two / three column layout and below the nav bar requires a few changes to your template.
-
- In app/design/frontend/default/[yourtheme]/template/catalog/category create category-image.phtml
- Add
1
2
3
|
<?php if ( $_imageUrl = $this ->getCurrentCategory()->getImageUrl()): ?> <p class = "category-image" ><img src= "<?php echo $_imageUrl ?>" alt= "<?php echo $this->htmlEscape($this->getCurrentCategory()->getName()) ?>" /></p> <?php endif ; ?> |
-
- Edit ./app/design/frontend/default/[yourtheme]/layout/page.xml and under the breadcrumbs reference add
1
|
<block type= "catalog/category_view" name= "category_banner" as = "category_banner" template= "catalog/category/cat_img.phtml" /> |
-
- edit ./app/design/frontend/default/[yourtheme]/template/page/2columns-left.phtml
1
2
3
4
5
6
7
|
<?php if (Mage::registry( 'current_category' )) { ?> <div class = "category-banner" > <?php echo $this ->getChildHtml( 'category_banner' ) ?> </div> <?php }?> </div> |