Simple random banner rotator in Magento using static blocks

29 Comments 29th APR 2009 | Posted by Tomas Novoselic in Magento

This is my first post here and I’ll write about my first challenge regarding Magento since I came to work at Inchoo.

As title says I’ll show you how to implement simple random banner rotation functionality in Magento using static blocks.

First of all, upload images you want to use in “/skin/frontend/YOUR_INTERFACE/YOUR_THEME/images/”

In admin panel add N static blocks (“CMS->Static Blocks->Add new block”)

For identifier field use something like this:

SomeBannerIdentifierName_1
SomeBannerIdentifierName_2
SomeBannerIdentifierName_3
...
SomeBannerIdentifierName_N

For each content use this:

<a href="ADDRESS_YOU_WANT_TO_USE"><img src="{{skin url=images/media/IMAGE_YOU_WANT_TO_USE.jpg}}" alt="Some alt text"  /></a>

Please note that you are not restricted only to images, you could use text, video or whatever you want here, but I’ll focus on images with links as title says.

Now when all is set, make new file called banner_rotator.phtml in “/app/design/frontend/YOUR_INTERFACE/YOUR_THEME/template/callouts/banner_rotator.phtml”

And use this code inside:

< ?php
echo $this->getLayout()->createBlock('cms/block')->setBlockId('SomeBannerIdentifierName_'.mt_rand(1, N))->toHtml() ?>

*Make sure you replace “N” with highest number of your static block

In order to show this block, you should be familiar with Magento layouts.
Since that is out of scope for this article, I’ll show you how to put it below the content on cms pages.

Open “/app/design/frontend/YOUR_INTERFACE/YOUR_THEME/layout/cms.xml”

[*] Put this line:

<block type="core/template" name="home.banner.rotator" template="callouts/banner_rotator.phtml"/>

Find this:

<cms_page>
<reference name="content">
<block type="cms/page" name="cms_page"/>

P U T  [*] H E R E  ! ! !

</reference>
</cms_page>

Unfortunately I can’t be more specific so feel free to ask me anything.

UPDATE:

If you want this to work for specific page such as homepage do this:

Instead of here /app/design/frontend/YOUR_INTERFACE/YOUR_THEME/layout/cms.xml
put this:

<reference code="content">
<block type="core/template" name="home.banner.rotator" template="callouts/banner_rotator.phtml"/>
</reference>

into your Admin panel’s CMS->Pages->Your page->Design->Layout Update XML field
Everything else is the same…

To post code in comments, place your code inside [code] and [/code] tags.

There are 29 comments (Add Yours +)

mushir Says
May 6th, 2009 at 13:01

i followed above instruction for display banner but banner can’t display
how can display rotate banner on home page ?

pls reply …
Tomas Novoselic Says
May 7th, 2009 at 14:00

Hi Mushir,
Can you get banners anywhere?
This method only adds banners to EVERY CMS page in Magento as I explained:
“In order to show this block, you should be familiar with Magento layouts.
Since that is out of scope for this article, I’ll show you how to put it below the content on cms pages.”
Sven Says
May 22nd, 2009 at 14:40

Perfect howto, got it working with two banner rotators in less than five minutes.

Good work!
grooves1200 Says
June 6th, 2009 at 5:05

when i tried this, all i got was the php code to displayin the spot instead of the images:

getLayout()->createBlock(‘cms/block’)->setBlockId(‘TopAdBanner_1′.mt_rand(1, 1))->toHtml() ?>

What did I do wrong?
grooves1200 Says
June 11th, 2009 at 2:36

Anyone out there who can help me?
Andrei Says
June 11th, 2009 at 18:24

grooves1200, if you copied the code from this page, make sure you remove the space in the PHP tag:

Instead of < ?php at the beginning of your line, it should be <?php

Hope this helps.

Tomas, thank you for a very concise, clean solution.
grooves1200 Says
June 12th, 2009 at 2:35

thanks andrei. that removed the line of code from my homepage but i still do not see any images displayed. any ideas as to what i’m doing wrong?
grooves1200 Says
June 14th, 2009 at 22:32

help???
Tomas Novoselic Says
June 17th, 2009 at 11:53

@grooves1200
Sorry, but I can’t help you =(
That’s mostly because you didn’t give any info about what you actually did. All I could do is try to explain once more, but what’s purpose of this post then?
Since that works for few ppl I guess it is possible to achieve rotating banner effect using this post. Try tell us what you did step by step and I’ll be glad to help you =)
Chris Says
June 29th, 2009 at 9:07

I got this to work by doing the following:

Create 5 new static blocks, each named “featured_product_#” where the # was 1 through 5.

Put the html code from the example above to point to my banners folder and saved each page.

Did not touch the cms.xml file.

Instead I took the php code provided above and went into my /template/page/html/ folder and edited the header.phtml where I wanted the 5 random banners to display on the top right of my site by my logo.

I would imagine if you wanted them to only display on the product details page you’d go into /template/catalog/product folder and edit the view.phtml and place the php there.

Hope this helps others. Works like a charm. Thanks. Running version 1.3.2.1
Jimmy Jørgensen Says
August 23rd, 2009 at 20:06

Hi.

I’m a newbie to this, so in order to understand ( trying ) i have some questions.

1. The N, is just like to say what ever numbers of statistic block you want to Make?
Jimmy Jørgensen Says
August 23rd, 2009 at 20:25

ALmost there i think/hope. But all i get is this look for the 1 text. 2 text 3 text.

http://compuworld.dk/baerbar-tilbehor.html

Wondering what/where i did go wrong.
Jimmy Jørgensen Says
August 23rd, 2009 at 20:40

Hmm can’t edit in the post made, so guess i just go on making new ons ehh. Got a bit fether. but where/who is it it become random.

Made the cmc statics blocke, and i a catagori i chose one of the cms blocks. Is this right, cuz that way it only shows the one banne no ramdom thingy there?.. so..
Jimmy Jørgensen Says
August 23rd, 2009 at 21:01

Please note that you are not restricted only to images, you could use text, video or whatever you want here, but I’ll focus on images with links as title says.:

how?.. how do i use a swf,avi what ever file?
Daniel Says
September 10th, 2009 at 21:04

Thanks, i was using a flash solution, that was slowing my store.
With your tip and a little change, now on I speed up my store!

Thanks again
Bilyana Says
September 10th, 2009 at 22:58

Excellent guide, thanks so much for that. This was of great help to me.
Just one question: do you know how to make the banners so they rotate at certain time period?
Many thankx
Bilyana
Tomas Novoselic Says
September 11th, 2009 at 7:51

Hi Bilyana,
You can’t make them rotate in certain time period using PHP, you should have custom JavaScript
Carrie Says
October 20th, 2009 at 19:56

Great solution and easy to implement – thank you!! Like Bilyana, would love to implement a time-based rotation. My javascript skills are lacking! But this is still a great way to show fresh content.

Magento 1.3.2.2
Arion Says
October 30th, 2009 at 12:14

hi, great and simpe.
How can I check if one CMS Block is active before dispaying it? Lets say you have banner no3 disabled. Is there a way to say:

if (CMS block== enabled) {
show banner;
}

Thanks
Bruno Alexandre Says
December 14th, 2009 at 8:56

you guys need some protection of some how or every Asian/Indian community will take the content of your fantastic How-Tos:

http://asia-connect.com.vn/2009/10/simple-random-banner-rotator-in-magento-using-static-blocks/

:-/
Tomislav Bilic Says
December 14th, 2009 at 9:45

Thank you Bruno. Good thing about that is that this time they put a reference to the author and our website. Branko wrote a post about them on his blog few weeks ago. Take a look. They asked him to remove the link, but he did not. A lot of people commented it and it is one of the hottest topic on ActiveCodeline.
http://activecodeline.com/building-magento-business-by-stealing-stuff-asia-connect-com-vn-knows-how
Paul Says
January 2nd, 2010 at 17:30

for anyone having issues, make sure you check:

1.) The spacing at the front of the banner_rotator.phtml code

AND

2.) the quotation marks in the code.

I had these issues and now its been corrected
Jimmy Says
February 20th, 2010 at 14:52

Just for the record, i don’t use this on my webside. So no need to come looking for it
Margo Says
February 25th, 2010 at 18:24

Thanks for sharing, it works like clock
reinier Says
March 3rd, 2010 at 21:34

instead of a graphic I want to have a daily fortune saying on my frontpage. anyone have ideas to do this? could be textline from out txt or csv file
Stephanie Says
March 10th, 2010 at 13:50

I am a newbie. I have create the above mention but I don’t know how to edit in the content of the homepage to show the banner. I want the banner rotating at the homepage header. Pls help.
Tomas Novoseli? Says
March 10th, 2010 at 16:45

Sorry, I’m at home… wordpress striped out my tags… I’ll write new post when I get in firm tomorrow (I don’t have pass here…)
Stephanie Says
March 12th, 2010 at 2:26

I did not see any code. Pls post again. Thanks! : )
Tomas Novoselic Says
March 12th, 2010 at 9:39

@Stephanie I have updated post.