Content Item Slider

Orchard, Projection, Layout, Alternate

Download Package

Aim: Produce a slider carousel that displays a list of content items. Lets pick a random slider (why not). 

Needed: Orchard.Projections; Unslider

The module can be achieved quite quickly with the following steps:

  1. Create a module
  2. Create a layout definition for the content query
  3. Create a view and enable the JavaScript for the slider
  4. Some styling
  5. Create a projection - remember to select a different layout to the default one, such as: SliderDetailLarge. Otherwise the content will be displayed as a simple list.

1. Create a module

Beginners guide. 

The module created is Breakout.ItemSlider.

2. Create a layout definition for the content query

    Two files are used for the editor and description of the layout:

    1. Layout/SliderLayout.cs - Describes view to use, properties and content
    2. Layout/SliderLayoutForm.cs - Describes the editor form for the layout settings

    If the module is needed in pre 1.7 version this part will need a little change (SliderLayout.cs):

    • var options = new SliderSettings
    • {
    • Id = context.State.SliderId,
    • CssName = context.State.CssName,
    • Speed = context.State.Speed,
    • Delay = context.State.Delay,
    • Complete = context.State.Complete,
    • Keys = context.State.Keys,
    • Dots = context.State.Dots,
    • Fluid = context.State.Fluid
    • }

    The above state is a dynamic object that will handled by Newtonsoft Json (Orchard v1.7 or current 1.x branch), which is clever enough to work out the types and allows me to write less code. Previous versions of Orchard use the default JSON provider and will fail at parsing string to number, and string to a nullable<bool> on the above lines but is easy enough to write a little more to check the conversion of string to type.

    3. Create a view and enable the JavaScript for the slider

      The slider itself it a very simply view:

      • @{
      • Breakout.ItemSlider.Models.SliderSettings options = Model.Options;
      • Style.Require("breakout.itemSlider.default").AtHead();
      • Script.Require("breakout.itemSlider").AtHead();
      • }


      • <div id="@options.Id" class="@options.CssName">
      • <ul>
      • @foreach (dynamic shape in Model.Items) {
      • <li>@Display(shape)</li>
      • }
      • </ul>
      • </div>

      The shape part is built by SliderLayout.cs and described by the query part (while setting up the layout description) of the projection. Basically the shape display type can be set allowing for different alternates and content templates for the slider. Lets come back to this later.

      4. Styling

        Unslider describes what the CSS must have:

        • .banner { position: relative; overflow: auto; }
        • .banner li { list-style: none; }
        • .banner ul li { float: left; } should be wrapped as inline.

        Replacing .banner for the css class name specified during the layout creation. For this module Im using LESS CSS files to help create and maintain the final CSS files (development and minified production).

        LESSCSS.Org

        and the current output for this theme is Styles/unslider.default.less

        After spending a little bit of time on placements and styling the module I've got the projection displaying blog posts like the following:

        Slider

        5. Create a projection

        On May 27 2013 11:53 PMBy matthew