There are a few great modules in the gallery that can aid you in the creation of an image carousel but with the invention of Projections this functionality has become really easy to implement with very little code. If like me you’re a fan of Twitter’s Bootstrap framework you’ll no doubt have noticed they offer an image carousel component. This article will show you how to bring the bootstrap carousel into Orchard CMS.
Create a content type
First of all we need to create a content type for each of the images we want to show in our carousel. This type should contain a way of choosing an image as a minimum requirement - I’ve opted for a mediapicker field. I’ve also added a numeric field that acts as an ordering system.
Add a few images
Upload at least 3 images so that we can test the rotation and order and give each a different priority.
You should now have at least 3 carousel images in your content list:
Next thing we need to do is create a new query and call it descriptive e.g. “Carousel images for homepage”. Add a new filter for the query that just brings back all carousel images that have images assigned. If you wanted to put this carousel on different pages then giving each image another field such as group will allow you to filter based on that otherwise a custom filter that uses the url of the page would work.
Next create a sort and chose the priority field and sort ascending. Alternatively, you can randomise the selection by selecting the random sort order.
The last item of a query is the layout. By default the two layouts that are out-the-box aren’t quite what we want so we need to create our own that uses the markup required from Bootstrap.
Create a Layout Provider
In your theme project create a folder called Providers and then under that create a new one called Layouts. Within there copy over the gridlayout.cs, gridlayoutforms.cs and layoutshapes.cs from the projections module.
Rename the files in your theme from Grid to Carousel:
Optionally, modify the CarouselLayoutForm.cs to expose the classes/properties of the carousel.
Next we add the html markup to the LayoutShapes.cs file that will determine how our carousel is rendered.
And finally we need to register this new layout, so we need to edit the CarouselLayout.cs file like so:
Now we have our query in place we need to re-build our theme project and we should be able to see a new layout.
If you have exposed the html properties on then be sure to fill them in.