Creating a Responsive MVC Based Image Carousel in Sitefinity

Creating a Responsive MVC Based Image Carousel in Sitefinity

Posted on April 15, 2014 0 Comments
Creating a Responsive MVC Based Image Carousel

The content you're reading is getting on in years
This post is on the older side and its content may be out of date.
Be sure to visit our blogs homepage for our latest news, updates and information.

Description

In this post I’m going to demonstrate how easy it is to create Sitefinity MVC based, responsive image carousel widget for your Sitefinity projects. When complete you will have 3 columned carousel that will adjust its columns from 3 to 2 to 1 as you scale your browser’s width down.

Before we begin I’d first like to give props to two resources that were integral to building my prototype. For the responsive carousel I used the example found on Sorgalla.com. For the carousel’s lightbox feature I relied on the tutorial found on Lokesshdhakar.com. Thanks for the help! A github repository for my widget will be linked to at the bottom of this post, but you may want to download the full files provided by both links, since you may need different custom modifications.

This post assumes you have at least a general understanding of developing custom Sitefinity widgets using Thunder and Visual Studio. If you are new to Sitefinity development, then I’d suggest looking at this resource about creating custom widgets, first.

One thing I want to make sure you are aware of is that I have associated the various styles to my Carousel widget in two different manners for example purposes only. I first show how to add styles using standard html stylesheet links and javascript script tags within the MVC View html. I later added them via the Sitefinity backend “Scripts and Styles” Drag widgets. I’ll go into this in more detail shortly, but just know that I’m only doing this for demonstration purposes. You can do one or the other, or both as you like.

Prerequisites:

 

Create a new Image Library

Let’s start off with the easiest stuff first. Login to your Sitefinity project, go to the backend, click on the “Content” menu and then select “Images”.  Click on the “Create a library” buttons and give your new library a name. I called mine "Carousel", but feel free to call it whatever you’d like. Now we’ll need to upload a few images. This carousel expects images that have roughly a ratio of 600 x 400. If you don’t have any handy you can always use the ones that came with the Sorgalla.com example, but feel free to play around with the CSS if you need to use different sizes too.

 

Adding our Styles

If you haven’t already, then please go to Sorgalla.com and Lokesshdhakar.com and download the accompanying CSS, and Javascript files. You might also find the available Sorgalla images helpful too.

I created a folder in my project to hold all my styles called “~/custom/styles” with three sub-folders, “css/carousel”, “img/carousel” and “js/carousel”. See image below for an example:

Feel free to adjust the folder structure as you see fit, but make sure to adjust the Github code as needed. Please note that the “img” folder is for images that are used to control the Carousel rotation and not for the images displayed in the Carousel itself.

For more info about how Sorgalla.com implemented the responsive portion of the carousel, please see their following documentation: How to create a responsive carousel.

 

Create a Thunder MVC Widget

Now let’s go to our Sitefinity project in Visual Studio and create a MVC Widget with Sitefinity Thunder. I called my MVC widget “CarouselWidget”. You can call your widget whatever you’d like, but just be sure that if you use my Github code that you adjust the namespaces as/if needed.

Before you start the wizard process in earnest make sure that you leave the “Create a designer” checkbox UN-CHECKED. We will be adding the designer later and letting Thunder do all the heavy lifting for us. More info coming shortly.

Follow the rest of the wizard and voila! You have a “Hello World” custom MVC widget that you can now drag and drop on to all of your pages.

 

Adding the Designer to the MVC Widget

Before we add the designer you should know that by default all Models, Views and Controllers will automatically be added to their appropriate folders when creating MVC widgets using Thunder. The location will always be in the “~/Mvc/” folder. Designers do not follow this pattern though. Whatever folder you have currently selected is the folder where you Designer will end up. I decided to add a new sub-folder called “~/Custom/Designers”. You can change the location of the Designer folder to wherever you want with no issues, though. The Designer gets associated with the Widget via a class decorator that Thunder auto inserts into the Widget.

The reason we’re adding the Designer is that I want to allow an easy way to set the Image library we created earlier as the default image provider for our Carousel. This will also allow us to change the Library name if we have separate Libraries for our Carousel widget on other pages. When we’ve finished, the Designer will simply provide us a textbox that we can then set the Library name in.

In order to take advantage of Thunder’s automatic Designer functionality we need to add a LibraryName property to our MVC controller first. Open up the Carousel controller and add the following code underneath the class decoration:

[Category("String Properties")]
public string LibraryName { get; set; }

Save your project and recompile. Now right click on your ~/Custom/Designers” folder and add a new item.

Now select “Sitefinity” and “Designer for Existing Widget”. I called mine “CarouselWidgetDesigner.cs”, but you can call it whatever you want. Click add and then follow the wizard.

In the next step you will be provided a wizard interface where you will select your custom MVC widget to add your Designer to.

Now we will add your LibraryName property to our Designer. Click the ”Field” dropdown and select the “LibraryName” property from the available options. Change the “Label” and “Instructions text” to whatever you’d like:

Before clicking “Next” make sure to click the “Add” button first. Your property will now be added to the Properties dialog section.

Click “Next” and your Designer will be created for you. Since we used Thunder we don’t have to do anything else.

 

Adding the Image Library Code to your MVC Widget

Open up the Carousel Controller that we created earlier and adjust your existing code to the following:

/// <summary>
/// This is the default Action.
/// </summary>
public ActionResult Index()
{
    var items = GetImagesByAlbumFluentAPI(this.LibraryName);
    var model = new CarouselWidgetModel(items);
 
    if (string.IsNullOrEmpty(this.LibraryName))
        model.LibraryName = "No Library Name set in Designer";
 
    return View("Default", model);
}
 
/// <summary>
/// Gets all images in a library with a status of live
/// </summary>
/// <returns></returns>
private static IQueryable<Image> GetImagesByAlbumFluentAPI(string libraryName)
{
    return App.WorkWith().Images().Where(a => a.Parent.Title == libraryName && a.Status == ContentLifecycleStatus.Live).Get();
}

Add the following using statements:

  • using Telerik.Sitefinity.Libraries.Model;
  • using Telerik.Sitefinity;
  • using Telerik.Sitefinity.GenericContent.Model;

Open up the Carousel Model and adjust your existing code to the following:

public CarouselWidgetModel(IQueryable<Image> imageItems)
{
    this.ImageItems = imageItems;
}
 
/// <summary>
/// Gets or sets the Library Name for the carousel.
/// </summary>
public string LibraryName { get; set; }
 
public IQueryable<Image> ImageItems
{
    get;
    private set;
}

Add the following using statement:

  • using Telerik.Sitefinity.Libraries.Model;

Open up the Carousel View and adjust your existing code to the following:

<link rel="stylesheet" href="/custom/styles/css/carousel/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="/custom/styles/js/carousel/lightbox.min.js"></script>
 
<h3>
    @Html.Raw(Model.LibraryName)
</h3>
<div class="wrapper">
    <div class="jcarousel-wrapper">
        <div class="jcarousel">
            <ul>
                @foreach (var imageItem in Model.ImageItems)
                {
                    <li>
                        <a href="@Html.Raw(imageItem.ItemDefaultUrl)" data-lightbox="Responsive Image Carousel with Lightbox!" data-title="@Html.Raw(imageItem.AlternativeText)"><img src="@Html.Raw(imageItem.ItemDefaultUrl)"/></a>
                    </li>
                }
            </ul>
        </div>
             
        <a href="#" class="jcarousel-control-prev">‹</a>
        <a href="#" class="jcarousel-control-next">›</a>
        <p class="jcarousel-pagination"></p>
    </div>
         
</div>

You’ll notice in the View that I have linked to the Lightbox css and js files using standard html link and script tags. 

 

Putting it All Together

Finally we need to login to the backend of our Sitefinity site and start creating a page to host the Carousel widget. Below I will add the rest of my css and js files via the “Scripts and Styles” widgets. This is the second manner of adding styles and scripts that I mentioned before. Again, you don’t have to do this, you can instead add them as standard HTML “<script>” and “<link>” tags in your View as we did in the previous section.

  • Go to the “Pages” section of the backend
  • Create a new page if needed
  • Open your new Page for edit
  • On the right side expand the “Scripts and Styles” section of the “Drag widgets” menu.
    • Add 2 “CSS” widgets to your Page
    • Click Set CSS  on both and point them at the two Sorgalla CSS files in your ~/Custom/Styles/CSS” folder:
      • jcarousel.responsive.css
      • style.css
    • Add 3 javascript widgets to your Page
    • Click Set Javascript on all three and point them to the three Sorgalla JS files in your ~/Custom/Styles/JS/Carousel” folder:
      • jquery.js
      • jcarousel.responsive.js
      • jquery.jcarousel.min.js
  • On the right side expand the “MvcWidgets” section of the “Drag widgets” menu and drag/drop your CarouselWidget on to your Page.

 

  • Click the “Edit” button on your Carousel widget and Set your “Library” name.

 


It may take a second for the images to be loaded into your carousel, but you should eventually see the 3 column carousel populated with the Library’s images.

Finally publish your Page and then “View” the live version of it. You should now be able to click on the left and right buttons to make the Carousel rotate as needed. Click on one of the pictures and you should get an expanded Lightbox version with some associated text. You can also rotate left and right while in “Lightbox” mode. Last but not least, start making your browser’s width smaller and smaller. If you have the responsive css linked correctly, then you should see the 3 column carousel turn into a 2 column and eventually a single column Carousel.

And that’s it. I hope you found this exercise useful and that it’s helped stoke your imagination into creating new and more powerful widgets using Sitefinity.

A public Github repository has been created for this blog post.

 

David Cowart

View all posts from David Cowart on the Progress blog. Connect with us about all things application development and deployment, data integration and digital business.

Comments

Comments are disabled in preview mode.
Topics

Sitefinity Training and Certification Now Available.

Let our experts teach you how to use Sitefinity's best-in-class features to deliver compelling digital experiences.

Learn More
Latest Stories
in Your Inbox

Subscribe to get all the news, info and tutorials you need to build better business apps and sites

Loading animation