Simple random banner rotator in Magento using static blocks

Simple random banner rotator in Magento using static blocks

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:


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:

<reference name="content">
<block type="cms/page" name="cms_page"/>
P U T  [*] H E R E  ! ! !

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


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

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

You made it all the way down here so you must have enjoyed this post! You may also like:

How to keep your CMS blocks organized (and not go insane) Adrian Bece
Adrian Bece, | 10

How to keep your CMS blocks organized (and not go insane)

Injecting Variables into a Magento CMS static block Thomas Spigel
Thomas Spigel, | 9

Injecting Variables into a Magento CMS static block

Magento CMS syntax – part2 Ivan Weiler
Ivan Weiler, | 16

Magento CMS syntax – part2


  1. What could be the reason that I am not seeing my changes on the Frontend? I created several banners using the Banner Rotator feature. My pages are not representing those changes.

  2. Cant find callouts to create banner_rotator.phtml

  3. Great tutorial! Still relevant almost five years on. Just did this in 1.7 and it worked perfectly.

  4. Is there a way to display 2 banners (without duplicating the same banner?)
    In other words, I can’t just repeat the code:

    echo $this->getLayout()->createBlock('cms/block')->setBlockId('SomeBannerIdentifierName_'.mt_rand(1, $blockCount))->toHtml();
    echo $this->getLayout()->createBlock('cms/block')->setBlockId('SomeBannerIdentifierName_'.mt_rand(1, $blockCount))->toHtml();

    Because then it can randomly select the same banner twice. Is there a way to make an array of 2 randomly selected banners?

  5. Hi,

    didn’t like that the amount of banners is hardcoded in there for the random method

    Like this its more dynamic

    $collection = Mage::getModel('cms/block')->getCollection()
        ->addFieldToFilter('identifier', array('like'=>'SomeBannerIdentifierName_%'))
        ->addFieldToFilter('is_active', 1);
    $blockCount = $collection->count();
    < ?php
    echo $this->getLayout()->createBlock('cms/block')->setBlockId('SomeBannerIdentifierName_'.mt_rand(1, $blockCount))->toHtml() ?>

    Inspired by

    Thanks for code anyway

  6. as you can see in my website, the banner rotator doesn’t work properly.
    At start it shows all the photos in grill, then they fix themself…
    How can I make this banner rotator perfect? It show at start all the photo in this way:

    then it show me the banner effect -.- WHY?

  7. Issue is in template folder. If you have own template and you will copy banner_rotator.phtml to calllouts in your template it doesnt work.
    You must copy it to default template folder not your own template.

  8. I want to call block html file in block. How can I add the code to static block from admin so that I need not to put the block on layout.xml.

  9. done step by step in process which u define
    then after i add slide show for my home page so i add below code in my home page custom layout :-


    but only last static block image is display.
    what is problem? plz help me.

  10. 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…)

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

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

  13. for anyone having issues, make sure you check:

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


    2.) the quotation marks in the code.

    I had these issues and now its been corrected 🙂

  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;


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


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

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

  18. 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?

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

  20. 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?

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

  22. @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 =)

  23. 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?

  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.

  25. 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?

  26. 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.”

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

    pls reply …

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <blockquote cite=""> <code> <del datetime=""> <em> <s> <strike> <strong>. You may use following syntax for source code: <pre><code>$current = "Inchoo";</code></pre>.

Tell us about your project

Drop us a line. We'd love to know more about your project.