static block

Create a featured slider that uses a Static Block for each slide. I’m writing this with jQuery and the Cycle plugin in mind. But it could be adapted for other slider plugins.

Create a Home Template

Refer to this post on how to create a new template that will be used by the home page.

Create the Slider

Paste the following into your template (\app\design\frontend\your_package\your_theme\template\page\home.phtml):

Option 1

<div id="featured-slider">
	<div class="slides">
		<?php 
			$numOfSlides = 6;
			for ($x = 1; $x <= $numOfSlides; $x++) {
				if(Mage::getModel('cms/block')->load('featured_slide_' . $x)->getIsActive()) {
					echo '<div class="slide">';
					echo $this->getLayout()->createBlock('cms/block')->setBlockId('featured_slide_' . $x)->toHtml();
					echo '</div>';
				}
			}
		?>
	</div>
	<div class="nav"></div>
</div>

Change the numOfSlides variable for the number of slides you will have.

Option 2
With this one you don’t have to specify the number of slides there will be, but if a Static Block is deleted, no slides after that point will be loaded.

<div id="featured-slider">
	<div class="slides">
		<?php 
			$x = 1;
			$mage = Mage::getModel('cms/block')->load('featured_slide_' . $x);										
			while(intVal($mage->getBlockId()) != 0) {
				if($mage->getIsActive()) {
					echo '<div class="slide">';
					echo $this->getLayout()->createBlock('cms/block')->setBlockId('featured_slide_' . $x)->toHtml();
					echo '</div>';
				}
				$x++;
				$mage = Mage::getModel('cms/block')->load('featured_slide_' . $x);
			}
		?>
	</div>
	<div class="nav"></div>
</div>

Create the Slides

In the Admin, create a Static Block with the following settings:
Block Title: Featured Slide – 1
Identifier: featured_slide_1
Status: Enabled
Content: Use Magento’s built-in Media Storage feature to upload and insert your slide image.

Create a new Static Block for each slide in your slider, incrementing the numbers as you go.

Using the Slider

To remove a slide or hide unused slides, just set its Static Block’s status to “Disabled”.

Reordering slides isn’t as simple.
– You could just recreate the content in each block so that they are displayed in the right order.
– You could copy and paste the html from one block into another.
– You could rename all the Static Blocks with a higher number: featured_slide_23, featured_slide_24, featured_slide_25… then update the numbers in the order you now want the blocks to appear: featured_slide_1, featured_slide_2, featured_slide_3…

Styling Tip

The Static Block WYSYWYG will wrap your image in a “p” tag, so remember to remove any margins and padding from paragraphs in the slider.