Simple random banner rotator in Magento using static blocks

Featured Image

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…

Interested in hiring us?

Have a chat with us. You would be surprised how small changes can make your business even more successful.


About Tomas Novoselic

Team Leader, Backend Developer

At Inchoo, Tomas is a Team Leader and 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

41 comments

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    Good work!

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

  26. 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> <strike> <strong>. You may use following syntax for source code: <pre><code>$current = "Inchoo";</code></pre>.