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:
The module created is Breakout.ItemSlider.
Two files are used for the editor and description of the layout:
If the module is needed in pre 1.7 version this part will need a little change (SliderLayout.cs):
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.
The slider itself it a very simply view:
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.
Unslider describes what the CSS must have:
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).
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: