Image slider in orchard CMS with Featured Item Slider!
I know, many of you are in a deep thought of how to create an Image slider in orchard CMS?
I too was thinking the same until few days. But, now – I have succeeded in creating one for my personal use. So, No need to worry about that any more!
I have this tutorial for you guys to successfully install the Featured item slider module on your fresh Orchard framework installation and see the Image slider in action.
See Image slider in orchard working?
For this tutorial – we’ll need an Orchard CMS set up on your local machine or on a server of your choice. There will be problems with older version of Orchard framework. I have tested this module on Orchard 1.7.2 and the slider works fine. No issues, you can even test it on latest versions as well – 90%, it should work!
I hope, you have an Orchard setup already. I’ll take you through the steps involved in successfully installing the Image slider in orchard cms.
This module in Orchard framework ‘Featured Item Slider‘ provided on the orchard CMS website is not compatible with the latest versions of Orchard cms installation. So, there is an updated version of this module available on Git. Though the updated module is not officially released by Orchard. Instead the updated ‘Featured Item Slider‘ module was amended by an ASP.net enthusiast by name David Hayden.
Getting you started with creating image slider in orchard CMS
Step1: Download the ‘Featured Item Slider module‘ from Git.
Step2: Once you download – please extract the compressed file and go into the folder. You will see a folder named ‘Sunkist.FeaturedItemSlider‘.
Step3: Copy the entire folder and go into your website’s root folder and then go into the ‘Modules‘ folder and paste it there.
Step 4: Launch your website on any browser and login to your account.
Step5: Click on ‘Modules‘ link available on the left hand side of the Admin dashboard. Type in few letters of the Module that you installed. E.g: Featu. You will see that ‘Featured Item Slider module’ is been filtered and shown to your. If you don’t see the module there – just clear your browser chache and follow step5 again.
Step6: Once you see the module shown up there – click on the enable link provided on the right top. Because all the modules installed will be disabled initially. After installation, you have to go to that particular module and you should enable it.
Step7: Once enabled, you will see ‘Featured Items‘ appearing on the left side of the Admin menu.
Step8: Now, click on the ‘New Feature group‘ link just below ‘Featured Items‘ link. Fill up all the required field as shown in the below screen shot and save it.
Step9: Once you save you will see another link been show just below the ‘New Feature group‘ called ‘New Feature‘. Click on that to create your first Slider item.
Please follow the below steps!
- Click on the Add button to add Image to your Slider
- Fill up all the text fields like Headline, Sub-headline and Link URL
- Check the Separate Link check-box, it will provide you with a text box to type in your desired button text
- Provide the Slide order number so that according to the order that you provide – the slides will be shown to the user
- Finally save the ‘New Feature‘ you just created
Step10: Likewise, create unlimited number of slide shows as you wish and keep on providing them order number and save them before you exit.
If you had missed any thing while you created the ‘Features‘ – You can always go back to edit them by clicking the link just below ‘Manage Features‘.
So, I think we’ve done with installing the ‘Featured Item Slider’ module. Now, the next step is that you have to show this sliders that you created somewhere on the front end of the website. You can show the Image slider in the Featured area which is just below the ‘Navigation Menu‘.
To assign your Image slider on the ‘Featured area’ – You have to follow few steps as shown below:
Step1: Click on the ‘Widgets‘ link on the left hand side of the dashboard.
Step2: You should now see a link Orchard layer called ‘Featured‘. Now, click on the ‘add‘ button on the top right.
Step3: Here, you have to select the ‘Featured Item Slider Widget‘. Selecting that will enable your Slider Images to show up on the ‘Featured area‘ on your Website. Though, you have to fill up some more data for that. Please see below screenshot.
So, that’s it guys – you’re done with Creating image slider in orchard CMS using Featured Item Slider module!!
Here is the final product of this tutorial!!
For any reason – if you are stuck up somewhere, please do let me know. I’ll quickly get back to you with relevant solutions.
Thanks for coming along with this tutorial!