Simple random banner rotator in Magento using static blocks

By: Tomas Novoselic, Last updated: Jan 08, 2011 | Published: Apr 29, 2009
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:

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…

Published in:
Leave a comment
Tomas Novoselic

Tomas Novoselic

- Backend Developer

At Inchoo, Tomas is backend developer, Certified Magento Developer who handles Magento modifications at any level. He also works closely with clients on Magento projects of any size and difficulty.

Read more posts by Tomas / Visit Tomas's profile

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

42 comments

  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.

    Reply

  2. Cant find callouts to create banner_rotator.phtml
    /app/design/frontend/YOUR_INTERFACE/YOUR_THEME/template/callouts/banner_rotator.phtml

    Reply

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

    Reply

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

    Reply

  7. 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
    http://stackoverflow.com/questions/9233133/magento-how-do-you-return-results-of-unlimited-cms-static-blocks-with-certain

    Thanks for code anyway

    Reply

  8. as you can see in my website, http://www.aryaitalianjewels.com/ 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:
    PHOTO1_PHOTO2
    PHOTO3_PHOTO4..

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

    Reply

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

    Reply

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

    Reply

  13. 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 :-

    	SomeBannerIdentifierName_1

	SomeBannerIdentifierName_2

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

    Reply

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

    Reply

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

    Reply

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

    Reply

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

    Reply

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

    Reply

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

    Reply

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

    Reply

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

    Reply

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

    Reply

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

    Reply

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

    Reply

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

    Reply

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

    Reply

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

    Reply

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

    Reply

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

    Reply

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

    Reply

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

    pls reply …

    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.