I have 4 season sets of images. winter-images, spring-images, summer-images and autumn-images. Every set has 5 images which has to switch on browser refresh. I want to have them in 4 separate static blocks. So the user can turn on/off the static block based on the season.

What is the best way to set this up? Wright now i have a static block with the following jQuery:

<script type="text/javascript">// <![CDATA[
//Add your images, we'll set the path in the next step
    var images = ['lente1.jpg', 'lente2.jpg', 'lente3.jpg', 'lente4.jpg', 'lente5.jpg'];

    jQuery('<img class="fade-in" src="{{media url="wysiwyg/lente/' + images[Math.floor(Math.random() * images.length)] + '"}}">').appendTo('.category-image');
// ]]></script>

I insert the static block with a widget. But is this a proper way to put the jQuery in the static block? And how will i do it with the other 3 static blocks? Or do i have to make 1 javascript file?

I have the feeling there is a better way..?

Thanks a lot!

2 Answers 2


I'd go with a custom module which creates a widget to insert into your block or directly into the layout.xml.

I can't quite understand the reasoning behind having 4 different blocks - surel;y that would be overkill. And why would you want the front end customer to be able to enable / disable the blocks depening on season? Users are usually lazy, I can not see them bothering to change anything that will merely display different images.

Why not create a module that automatically changes the image root folder depening on the date? So you could have 4 folders (eg: spring/summer/autumn/winter) and depending on the date, you change the folder from which the images are loaded.

This may be of help: http://magentoexpertforum.com/showthread.php/12562-Develop-a-Magento-Widget-in-Easiest-way

In the Block code, you code the functionality.


If you want do this in a clear way, you need to create an extension, that will have a block which will hold all the logics to filter out the "right" season block. Then you need to create another static block (which will be always active, as long you want to show season images) and as it's content you should call your custom block (by block directive trick). Finally you should include the above mentioned static block in the layout so that you will see the output wherever you need.

Here I am not going to do that. I am giving it to you. I will show you a cheaper (but easier) method. But believe me, even if you are going to make a custom extension, you can really rely on the code that I am gonna show you.

So this is what we are going to do. we are going to define a template that will filter the "right" season static block and then render that block. This is our template file.

STEP - 1

File : app\design\fretend\{package}\{theme}\template\custom\seasonimages.phtml

//variable declarations
$seasonFlag = false;
//you should replace this array with your static block ids.
$seasonSBCodes = array('winter-images', 'spring-images', 'summer-images', 'autumn-images');

//let us find the current active static block
foreach ($seasonSBCodes as $sbcode) {

    //loading a static block based on it's id.
    $block = Mage::getModel('cms/block')

    //check block is active or not.
    if ($block->getIsActive()) {
        $seasonFlag = true;
        $activeSeasonBlock = $block;

<?php if ($seasonFlag): ?>
        //rendering active block.
        echo $this->getLayout()->createBlock('cms/block')
<?php endif ?>

<script type="text/javascript">
    //put your jquery here.
    //this jquery will be applied irrespective of the season static block used.
    //that means you should put same element class name, ids in every static block

Code explained

Here you need to replace the $seasonSBCodes array with your season static block identifiers. The code will will load static blocks based on the identifiers. Then check whether that block is active or not (this means, I assume at a time only one static block will be active. All other static blocks are disabled). If yes, then it will render that block's content. Simple but elegant. :-)

STEP - 2

Now what you need to do is, create another static block. Let me call this block as season_image_renderer. This block should hold this content.

{{block type="core/template" name="season.image.renderer" template="custom\seasonimages.phtml"}}

STEP - 3

Then add season_image_renderer static block inside your layout. That's it. You are done. Now clear your cache and then load page again. Surprise surprise :-)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.