Create image slider in orchard cms – Featured Item Slider

Image slider in orchard CMS with Featured Item Slider!

Featured image slider successfully installed - Image slider in Orchard CMS - pepfry

Featured image slider successfully installed – Image slider in Orchard CMS

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‘.

Create image slider module - Image slider in Orchard CMS - pepfry

Create image slider module – Image slider in Orchard CMS

Step3: Copy the entire folder and go into your website’s root folder and then go into the ‘Modules‘ folder and paste it there.

Copying image slider module - Image slider in Orchard CMS - pepfry

Copying image slider module – Image slider in Orchard CMS

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.

Filtering modules to enable image slider module - Image slider in Orchard CMS - pepfry

Filtering modules to enable image slider module – Image slider in Orchard CMS

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.

Filling fields in featured item image slider - Image slider in Orchard CMS - pepfry

Filling fields in featured item image slider – Image slider in Orchard CMS

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.

Filling slider content and  images - Image slider in Orchard CMS - pepfry

Filling slider content and images – Image slider in Orchard CMS

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.

Saving featured  slider content and images - Image slider in Orchard CMS - pepfry

Saving featured slider content and images – Image slider in Orchard CMS

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.

Assigning image slider to featured section - Image slider in Orchard CMS - pepfry

Assigning image slider to featured section – Image slider in Orchard CMS

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.

Selecting featured image slider widget - Image slider in Orchard CMS - pepfry

Selecting featured image slider widget – Image slider in Orchard CMS

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!!

Featured item image slider successfully installed - Image slider in Orchard CMS - pepfry

Featured item image slider successfully installed – Image slider in Orchard CMS

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!

53 thoughts on “Create image slider in orchard cms – Featured Item Slider

  1. Well written article… Is there a way to apply a css / style to the heading and sub headings for a featured item

    • Hi Kashif,

      Yes, we can apply styles to all the elements present inside the Image slider. You can apply styles to the Heading, Sub-heading and even to the Link/CTA button as seen in the screenshot above at the end of this tutorial.

      If you want – I can show you how to style those elements.

      Thanks!
      Sumesh M.S

    • Hi Idrees,

      You can’t upload the module from Orchard’s Admin dashboard. That is the reason – I have provided step by step instruction on how to Install the module manually and then create the Image slider.

      Hope that helps you at this moment!

      Thanks!
      Sumesh M.S

      • Hi Sumesh M.S,
        thanks for your reply. Actually i installed first the old version. So, i think it was the browser cache or maybe some other problem. However, in my local computer (fresh installation) it works perfectly.
        Once again thanks and keep it up :)

  2. I’m using this module but need to be able to add in an additional textarea with content, aside from the headline, sub-headline, and link. I’ve tried adding to the content part in Orchard and that won’t allow me to access it, any ideas?

    • Hello Friend,

      I haven’t tried to add an extra field to the Image slider module. You can give a try by editing the template file inside the Featured Item Slider module and adding an extra field which shows up in the dashboard which allows you to add content. Before you edit, please backup the file that you edit.

      The other way is that – You can type in your new content into the sub-heading once the actual sub-heading is over. But, make sure that you wrap your new content is wrapped with a new HTML element. E.g: <p></p> or any other element of your choice and also try applying a class or ID to that. So it should look like below:

      <p class”Your_class” OR id=”Your_id”> Your new content after the actual sub-heading inside the Orchard image slider subheading field </p>.

      After saving – if you see the new content inside the Image slider in your website, then just use firebug to check whether the <p class=”Your_class”></p> is still there wrapped around the new content or is it been stripped out. If it is still there – you can write your custom styles to bring the whole <p></p> element along with the content inside to where ever you want inside the Image slider.

      Please let me know if you succeed with this!

      Thanks!
      Sumesh M.S

  3. Hello,

    Great stuff on making the featured slider working with 1.7+!

    I have one question. I have a responsive website, but the featured slider only takes static widths and heights. How can I give a percentage with these lengths?

    Cheers

    • Hi Sander,

      I too wanted to make the Image slider to be responsive since it is now the trend of Responsive websites. To some extend it can be made responsive by overwriting all the inline css.

      I tried that way and ended badly. It took me tooooo much time that I couldn’t withstand the pressure… I gave up there and never tried it again.

      Please go ahead and give it a try. Overwrite all the inline css with your custom css, make sure you end all your custom css with !important. Some times it may work.

      Good Luck friend!!

      Thanks!
      Sumesh M.S

  4. Hi Sumesh,

    I have tried using this module with Orchard 1.8. However, the Feature Item Group/Widget doesn’t appear to be showing the images which I have uploaded for each Feature Item. Would you be able to assist?

    Thanks,

    Nick

  5. I also don’t see the “Add” button for adding pictures neither in New Feature or Manage Features screen, what might be causing this? I tried the latest version from Orchard Gallery and the one you uploaded here both, there is no “Add” button in neither.

    • Hi Metehan,

      I see the problem. If I’m not wrong – you haven’t checked a ‘Check box’ which says ‘Include images in the slider’ while you created a new feature.

      If that’s that cease:
      Just click on ‘Manage Feature Group’.
      It will show the list of features that you have created.
      If you followed my tutorial and created only one feature – then, it should be shown as ‘Slider’.
      Click on ‘Slider’ – It will take you to its configuration page once again.
      Just make sure if you have already checked the check box that says ‘Include images in the slider’. If not checked – please check and save the configuration.
      Go back and click on ‘New Feature’. Now, you will see the ‘Add’ button.

      Please, let me know if that works for you Or else I shall investigate what else might have happened.

      Thanks!
      Sumesh M.S

      • Thank you Sumesh for your reply, but I checked that Check-box “Include Images”, still I don’t see that “Add” button. Can it be something with Orchard version? I am using 1.8.0.

        • Hi Metehan,

          OK, I see.
          Tell me from where you installed the ‘Featured Item Slider’ module?

          Is it from :-
          The Orchard gallery
          OR
          Manually from Github?

          Anyways – Just paste the link to that module from where you installed in your next comment.

          Thanks!
          Sumesh M.S

          • Hi Metehan,

            I have tested featured item slider on Orchard version 1.8 – its working fine. I don’t know what have you missed out. I suggest you to delete the configurations you’ve done for the slider and the plugin as well and redo from the very beginning.

            I think – I might need to create a video tutorial to show the installation process. But, it takes time. Mean while – Please check your Gmail inbox for an email from pepfry.

            Thanks!
            Sumesh M.S

  6. Please help me¡ I get an error when installing the module designer tools already try to with all versions of the module The assembly reference ‘ClaySharp’ could not be loaded for module ‘Orchard.DesignerTools’.

    • Hi Araceli Mora,

      I think you have installed ‘Designer Tools’ from ‘Gallery’. Actually – you shouldn’t.

      No worries – Here is what you can do now:

      • Logout from your website – Delete the installed module from your site manually by going into your website’s module’s folder.
      • Now, download the latest version of ‘Orchard CMS package’ from -> http://www.orchardproject.net/download.
      • Extract it on your computer and Go to -> Orchard.Source.1.8.1 -> Src -> Orchard.Web -> Modules.
      • Copy ‘Orchard.DesignerTools’.
      • Go to -> Documents -> My Web Sites -> Your site -> Modules
      • Paste the copied folder here
      • Now, go to your Orchard dashboard – There should be no error.

      Thanks!
      Sumesh M.S

  7. Hey,

    I’m also trying to make the slider responsive, but I’l getting stuck, has anyone succeeded into making it responsive?

    Tx,

    Borrie

    • Hi Borrie,

      Currently, the plugin doesn’t seem to support responsive stuffs. As far as I see it generates too much inline styles which are impossible to override to some extend.

      I have tried make the slides responsive – but, didn’t succeed. However, I was able to make it responsive to some extend but, not completely. I ran into issues.

      My advice is – If you are good at CSS, please try to override all the inline styles generated by the plugin. You might just be lucky!

      Thanks!
      Sumesh M.S

  8. Hi Sumesh please help me ¡¡ again problems with Orchard on the dashboard does not appear the Email option to configure sending email, install modules email messaging and messaging already try several versions and nothing, please help me thank you ¡

  9. Hi Sumesh,

    I followed your tutorial using Orchard 1.8.1 and I get the same problem as others, I do not see an “add” button to add an image. Can you please tell me if there is a fix for this.

    Thank you.

    Kind Regards,

    Shujah R

    • Hi Shujah,

      Go through the above comments posted by other users – you’ll see that one other person had the same issue as your’s.
      I had listed out some instruction and the other user was able to achieve that. I mean the other user got the ‘add images button‘.

      See this image to see how and where the button is located: Image

      Let me know, if you don’t see those line of instructions. I’ll post it again.

      Thanks!
      Sumesh M.S

  10. Hello,
    I’ve problem with slider. Successful install, add features with images, add slider to a the home page widget but when display home, slider dont showing ? I have only title…

    • Hi Suhas,

      I had listed out some instruction in one of the comments above for another user who had the same issue and that user was able to achieve that. I mean the other user got the ‘add images button‘.

      See this image to see how and where the button is located: Image

      Let me know, if you don’t see those line of instructions.

      This is for everybody those who can’t see the ‘Add Image Button’!

  11. Hey, i also get the exact problem in orchard 1.8.1, the “add picture” button is not displaying on the featured item. i have done both gallery installation and github manual installation, both are the exact same. are you sure you have tested this in 1.8+? the rest of it seems to work but ofc the slider isnt showing anything as theres no where to add images

  12. rodrigo vazquez March 2, 2015 at 8:11 pm - Reply

    Hey,I work with the 1.6 orchard cms version and install item Slider module my actual version is 2.0, so I create a feature group for the slider image and feature for the images to diplay, but my problem is , can’t display slider plugin or content in the Homepage layer url ‘~/’, my home page is a static html view, please help me , and nice work !!!!

  13. Actually I had solved the responsive layout problem its not in the css u need to remove all emmbeded css in html file and then YOU need to change the [jquery.cycle.all.js] in line 251 to make it work

    • Hi kamal,

      That’s a great finding. Thanks for sharing this info.
      If you can share further more info on this – it might help other people who are in need of…

  14. When I add the Featured Item Slider to the Featured Widget of my site I get the following error…
    Exception Details: System.ArgumentException: Value cannot be null or empty.
    Parameter name: contentPath

    And this line of code is highlighted…
    string backgroundImageStyle = useBackgroundImages ? “background-image:url(‘” + @Url.Content(featuredItem.ImagePath) + “‘);” : “”;

  15. After enabling Featured Item slider, I am getting an error “hexadecimal value 0×00, is an invalid character. Line 1, position 1.” help.

Leave a Reply to araceli Mora Cancel reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">