3

I want to display the category image in top of category page just after the header.Currently it is showing in 2colums-left.phtml right side container.I don't want to change the layout but just the image alone need to be displayed on top..

2

Open

app/design/frontend/PACKAGE/THEME/template/catalog/category/view.phtml

and delete or comment out

if ($_imgUrl = $_category->getImageUrl()) {
    $_imgHtml = '<p class="category-image"><img src="'.$_imgUrl.'" alt="'.$this->escapeHtml($_category->getName()).'" title="'.$this->escapeHtml($_category->getName()).'" /></p>';
    $_imgHtml = $_helper->categoryAttribute($_category, $_imgHtml, 'image');
}

This will prevent the image from showing twice.

Then open

app/design/frontend/PACKAGE/THEME/template/page/2colums-left.phtml

after <?php echo $this->getChildHtml('header') ?>

add

    <?php if ($current_category =  Mage::registry('current_category')):?>
        <?php if ($current_category->getImageUrl()):?>
            <?php echo '<p class="category-image"><img src="'.$current_category->getImageUrl().'" alt="'.$this->escapeHtml($current_category->getName()).'" title="'.$this->escapeHtml($current_category->getName()).'" /></p>';?>
        <?php endif?>
    <?php endif?>
2

First, you need to add a new reference for 2columns-left layout pages. To do so, please follow these steps:

Name the structural block

Open the file layout/page.xml in your active theme folder. Inside you will find lines like:

<block type="core/text_list" name="left" as="left"/>
<block type="core/text_list" name="content" as="content"/>
<block type="core/text_list" name="right" as="right"/>

Add a new line somewhere inside the same block tag.

<block type="core/text_list" name="newreference" as="newreference"/>

Tell Magento where to place it

Since we want the new structural block to appear only on pages that use 2-column-left.phtml, open this file in the current theme.

Since we want to place the newreference block to be placed just below header. In this case our updated code should look like:

<div class="main-container col2-left-layout">
   <div><?php echo $this->getChildHtml('newreference') ?></div>
   <div class="main">
      <?php echo $this->getChildHtml('breadcrumbs') ?>
      <div class="col-main">
         <?php echo $this->getChildHtml('global_messages') ?>
         <?php echo $this->getChildHtml('content') ?>
      </div>
      <div class="col-left sidebar"><?php echo $this->getChildHtml('left') ?></div>
   </div>

Populating structural block

Now let's create new file app/design/frontend/[package]/[theme]/template/newreference.phtml with the following content:

<h1 style="background-color:yellow">Hello New Reference!</h1>

Go to appropriate layout XML file (page.xml) and add this block to the appropriate place (for testing purpose you could place it under “default” handle).

<reference name="newreference">
   <block type="core/template" name="newReferenceBlock" template="newReference.phtml" />
</reference>

Please follow above steps and let me know if it worked.

PS: Reference is taken from here.

  • Great explanation. Up-voted :) – Sharma Oct 26 '17 at 12:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.