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…

40
Top

Care to rate this post?

Author

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.

Other posts from this author

Discussion 40 Comments

Add Comment
  1. mushir

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

    pls reply …

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

  3. Sven

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

    Good work!

  4. grooves1200

    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?

  5. grooves1200

    Anyone out there who can help me?

  6. Andrei

    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.

  7. grooves1200

    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?

  8. grooves1200

    help???

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

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

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

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

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

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

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

    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

  17. Hi Bilyana,
    You can’t make them rotate in certain time period using PHP, you should have custom JavaScript :)

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

  19. Arion

    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

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

    :-/

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

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

  23. Just for the record, i don’t use this on my webside. So no need to come looking for it :)

  24. Thanks for sharing, it works like clock

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

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

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

  28. I did not see any code. Pls post again. Thanks! : )

  29. @Stephanie I have updated post.

  30. ravi

    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.

  31. Komal

    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.

  32. Sunil Rana

    Thanks for all, i got one more simple example. It may help others.

    http://www.phptechi.com/magento–display-banners-on-front-page.html

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

  34. chard

    i would like to create a specific banner to coupon how to do it…

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

  36. Mojo

    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

  37. Gregory

    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?

  38. great!

  39. jen

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

  40. I am new to this and seem to follow everything okay. Is it possible to change the speed of the image rotations?

Add Your Comment

Please wrap all source codes with [code][/code] tags.
Top