EPiServer: Create a Gallery / ImageSlider Block

One of the tasks I needed to do was to create a block that takes in a list of Images and displays these in an ImageSlider, with the help of almighty Javascript. This might not be the best solution for it, but hey it works.

First of all, I created a Block Type and gave it one property

 public class ImageSliderBlock : BlockData  
 {  
      public virtual LinkItemCollection Images { get; set; }  
 }

I then created a simple controller to return a View:

 public class ImageSliderBlockController : BlockController<ImageSliderBlock>  
 {  
      public override ActionResult Index(ImageSliderBlock currentBlock)  
      {  
           return PartialView(currentBlock);  
      }  
 }

And then created a strongly typed View. I gave it an Id

 @model ImageSliderBlock  
 <div id="home_slideshow">  
   <ul class="slideshow show-buttons">  
     @foreach (var image in Model.Images)  
     {  
       <li>  
         <a href="@image.Href">  
           <img src="@image.GetMappedHref()"/>  
         </a>  
       </li>  
     }  
   </ul>  
 </div>

The Styles and JS will do the trick of displaying these images in the form of a slideshow.
For those who need these files, hit me up!

Meanwhile, in the EPiServer Edit View of the block, you can now drop images in the block!


Labels: , , , ,