Image Banner Above the footer


Introduction

You often see Magento sites with a banner of images above the footer that might contain the supported brands they sell, sometime its advertising or other notices. Implementing this I discovered is quite easy, and by using a CMS static block, it can be implemented in a very manageable way without having to change template code once its in place. This tutorial has been built from implementing it on a site I run so it should work on all versions on Magento.

The CMS Block

First create a CMS staic block, I called it “footer_logos” (there was already a footer_links, so it seamed logical), if you have a lot of different sites administered via the same admin URL then add a tie breaker in the name to make it a bit easier to manage per site, but for now, let do one site.

Select “CMS“, “Static Blocks” then “Add New Blocks“, I called my new block “Footer Logos” and used the identifier “footer_logos“, this is what is referenced in the code. Select the “Content” tab and then insert the images you want to show, select the site its applicable to and save the block.

The PHTML Code

Now log into your site so you can edit the template pages. I have ssh access to my sites so I ssh into the server and then navigate to the template directory /app/design/frontend/default/THEME/pagewhere THEME is the name of the applicable theme. The code that will reference the block needs to go into one of the “N”column.phtml files. I use 1coulmn.phtml in this design.

page # ls -l
total 48
-rwxrwxr-x. 1 apache apache 2313 Nov 17 03:48 1column.phtml
-rwxrwxr-x. 1 apache apache 2272 Aug 10  2010 2columns-left.phtml
-rwxrwxr-x. 1 apache apache 2275 Aug 10  2010 2columns-right.phtml
-rwxrwxr-x. 1 apache apache 2448 Aug 10  2010 3columns.phtml
#

The line to add is very simple, it just calls the createBlock() method using a cms/block and the name of the block, the page will render the images as HTML on the clients browser.

<?php echo $this->getLayout()->createBlock(‘cms/block’)->setBlockId(‘footer_logos’)->toHtml() ?>

Open the file to place the code,

Complete 1column.phtml file located in:

/var/www/testsite.com/app/design/frontend/default/THEME/template/page/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->getLang() ?>" lang="<?php echo $this->getLang() ?>">
<head>
<?php echo $this->getChildHtml('head') ?>
</head>

<body <?php echo $this->getBodyClass()?'class="'.$this->getBodyClass().'"':'' ?>>
<?php echo $this->getChildHtml('global_notices') ?>
<div>
        <h4>Skip to Store Area:</h4>
        <ul>
        <li><a href="#main"><?php echo $this->__('Skip to Main Content') ?></a></li>
        <li><a href="#col-left"><?php echo $this->__('Skip to Left Column') ?></a></li>
        <li><a href="#footer"><?php echo $this->__('Skip to Footer') ?></a></li>
        </ul>
</div>
<div>
        <div>
                <img src="<?php echo $this->getSkinUrl('images/d3-header-ribbons.png') ?>" />
                <?php echo $this->getChildHtml('header') ?>
        </div>
        <div>
                <div id="col-left">
                        <?php echo $this->getChildHtml('left') ?>&nbsp;
                </div>
                <div id="main">
                        <div></div>
                        <div>
                                <?php echo $this->getChildHtml('breadcrumbs') ?>
                                <?php echo $this->getChildHtml('global_messages') ?>
                                <?php echo $this->getChildHtml('content') ?>
                        </div>
                        <div></div>
                </div>
        <?php echo $this->getLayout()->createBlock('cms/block')->setBlockId('footer_logos')->toHtml() ?>
        </div>
        <div id="footer">        
                <?php echo $this->getChildHtml('footer') ?>
        </div>
</div> <!-- Container Ends -->
<?php echo $this->getChildHtml('before_body_end') ?>
<?php echo $this->getAbsoluteFooter() ?>
</body>
</html>

Where to from here

You can use this method to inject CMS static blocks anywhere! I have also implemented a CMS static block after the “New Products” on the home page, calling it “after_new_products” so it was obvious where its positioned. Then I edited the new.phtml file located in:

/app/design/frontend/THEME/template/catalog/product

This then displays on the home page only.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s