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> |