Magento Forum

   
Tutorial: How to add an extra image to your header using a Static Block! 
 
haynest
Jr. Member
 
Total Posts:  16
Joined:  2008-08-14
 

After about a day of reading through the forums I’ve figured this out. This tutorial will enable you to add an extra image into your header. I put my specific image below my logo. So here it goes.

Before we start I suggest you also go to:
Admin -> System -> Cache Management
Under the heading All Cache chose Disable.
Then Save.

Just a programming note. Always make backups of your files before you edit them in case you really screw up somehow and have to restore your files smile

First you must make a static block. In my current version of 1.1.3 you can add a static block by going to:
Admin -> CMS -> Static Blocks

Add a new block and give it a name and a Identifier. For my example I will use a name of Header Image and an Identifier of head_image.

For my example I selected ‘All Store Views’ from the Store View box.

In the Status box make sure it is Enabled.

In the Content box use a simple html img tag to make a reference to your image. The directory below is where I chose to upload and reference my image. Don’t forget to upload your image.

<img src="skin/frontend/default/icd_theme/images/homepagebannerclip.jpg" alt="InternetCabinetsDirect" />

After this Save your block.

You will then to need to edit your header.phtml file. It is located at
magento/app/design/frontend/default/icd_theme/template/page/html/header.phtml

You need to make a reference as to where you would like the Static Block to show up in header.phtml.
Use this code to make a reference to your Static Block. Note where I added my Static Block name that I created earlier of head_image.
<div class="head_image">
<?php echo $this->getChildHtml('head_image') ?>
</div>

Below is the full page of code from header.phtml. Note that I decided to place my code underneath the store_language block. You may have to play with the above code and paste it in different places to achieve the placement you want.

<div class="header-top-container">
    <
div class="header-top">
        <
h1 id="logo"><a href="<?php echo $this->getUrl('') ?>"><img src="<?php echo $this->getLogoSrc() ?>" alt="<?php echo $this->getLogoAlt() ?>" /></a></h1>
        <
class="no-display"><a href="#main"><strong><?php echo $this->__('Skip to Main Content'?> &raquo;</strong></a></p>

        
<?php echo $this->getChildHtml('topSearch'?>

        
<div class="quick-access">
            <
strong><?php echo $this->htmlEscape($this->getWelcome()) ?></strong><br />
            <
div class="shop-access">
                
<?php echo $this->getChildHtml('topLinks'?>
            
</div>
            
<?php echo $this->getChildHtml('store_language'?>
            
        
</div>
        <
div class="head_image">
     
<?php echo $this->getChildHtml('head_image'?>
</div

    </
div>
</
div>
<?php echo $this->getChildHtml('topMenu'?>

Save your file and upload it back where you got it from:
magento/app/design/frontend/default/icd_theme/template/page/html/header.phtml

Next we need to edit the page.xml file located at:
magento/app/design/frontend/default/icd_theme/layout/page.xml

We need to define the Static Block in the layout from how I understand it. Anywayz to do this you will need the below code. Note again the places where I inserted my Static Block head_image.
<block type="cms/block" name="head_image">
<action method="setBlockId"><id>head_image</id></action>
</block>

I chose to put my code below the store_language block in the page.xml file to be safe. I don’t think the particular location is important here though. I did not play around with it that much to know if placement is important. I would paste my code below but it is 118 lines long. And I don’t think its needed for you to understand that you need to put your code in there.

Once again save your edited page.xml file and upload it back where you got it.

If you go to your homepage you should now see you image somewhere in the header. Download and install a program called firebug for Mozilla Firefox and use it if you would like to see where your image landed in the code.

If you would like to further adjust the positioning or attributes of your image you will need to use CSS. In order to use CSS we must first locate and edit the file called boxes.css. It is located at:
magento/skin/frontend/default/icd_theme/css/boxes.css

In this file you will need to add the below code. Note that you need to make the name the same name as your Static Block.  I put mine in the section noted styles, but you can put it anywhere.
.head_image { PUT YOUR CSS CODE HERE }

Once again save your file and upload it back where you got it.
magento/skin/frontend/default/icd_theme/css/boxes.css

Thats it. Thats how I got my sweet image in the header. From what I’ve read in the tutorials this is the way Magento intends for you to customize their software.

Ummm.. Oh yeah, don’t forget to turn your cache management back on when your done.

If you liked my tutorial and it worked for you please let me know! Make a post so future n00bs (Including myselft) can help make Magento grow.

 
Magento Community Magento Community
Magento Community
Magento Community
 
sergi0ne
Jr. Member
 
Total Posts:  6
Joined:  2008-11-02
 

I have folowed all this steps but nothing appears in the header

 
Magento Community Magento Community
Magento Community
Magento Community
 
haynest
Jr. Member
 
Total Posts:  16
Joined:  2008-08-14
 

Hello!

Yes, this method I used stopped working about 2 months after I posted it, due to an update. I haven’t really been interested in putting an extra image in the header since, therefore I don’t have any new information for you. Although I can put you in the right direction. Most likely you’ll need to edit one of the xml files inside your template or default directory.

 
Magento Community Magento Community
Magento Community
Magento Community
 
jballotti
Guru
 
Avatar
Total Posts:  339
Joined:  2008-04-20
Chicago area
 
sergi0ne - 29 March 2009 07:21 AM

I have folowed all this steps but nothing appears in the header

Download the Modern theme and take a look at how it’s done there. There is an image advertising free shipping in the header next to the logo.
cool smile

 
Magento Community Magento Community
Magento Community
Magento Community
Magento Community
Magento Community
    Back to top