Having a slideshow in your front page is an eye-catching way to display your most featured products or sevices. Nivo Slider is a great image slider tool that can be integrated in Drupal; however, there’s no a detailed tutorial on how to install and configure this slider tool in Drupal 7. So, this tutorial will show you how to install and configure Views Nivo Slider in Drupal 7 step by step.
Step 1: Install the dependency modules
Download the following modules from Drupal Modules:
Once you downloaded all these modules, unzip those files in the sites/all/modules under your Drupal installation directory.
Caution: Download the versions that starts with the number 7.
Step 2: Install Views Nivo Slider
Download Views Nivo Slider from Drupal Modules and unzip the file in the sites/all/modules under your Drupal installation directory.
Step 3: Enable the modules
Enable the modules for each category as indicated below:
Note: It is neccessary to enable Chaos Tools module but the other modules in this category are not mandatory.
Step 4: Create image styles
Go to Configuration and click on Image Styles under Media section. Click on “Add style” and enter the following information:
- Image style name: sliderimage
- Effect: Resize 600 x 280
Step 5: Create a content type
Go to Structure and click on Content Type. Then, click on “Add a content type” and enter the following information:
- Name: Nivo Slider
- Description: Home Page Slider
Once you entered the data in the textboxes, click on “Save and add fields” button. Then, add a new field for the image field. Your screen should look like the image below:
Step 6: Create a view
Go to Structure and click on Views. Then, click on “Add a new view” and enter the following information:
- View Name: Nivo Slider
- Uncheck “Create a page” and check “Create a block”
- Block Title: Slider Views
- Display format: Views Nivo Slider of titles(linked)
Once you entered the data, click on “Continue & Edit” button. Click on settings under Format section and configure as you like. For this tutorial, these are the setting chosen:
- Image field style: sliderimage
- Style: Default
- Effect: fade
- Direction Navigator: No
- Control Navigator: Basic
Click on “Add” button next to Fields section and tick on the box Content:Slider image (Appears in: node:nivo_slider). For this tutorial, this field was configured as the image shown below:
Click on Fields under Show line and select Views Nivo Slider as the row style. Then, configure the row style options as indicated below:
- Image Field: Slider Image
- Title Field: Content: Title
- Link Field: <None>
Click on “Add” button next to Filter Criteria section, tick on the box Content:Type and tick on the box Nivo Slider under Content Types section.
At the end of this step, your screen view should look like the image below:
Step 7: Add content
Go to Content and click on Add Content. Then, click on “Nivo Slider” and fill the blank boxes as you like. For this tutorial, two contents were added.
Step 8: Enable the block view
Go to Structure and click on Blocks. In the disabled area, look for the view created “View:Nivo Slider” and enable it by choosing the desired region in the drop-down box. For this tutorial, the block was added to the Content region.
To make the block appears only in the front page, click the link “Configure” next to the region drop-down box. Go to Visibility settings on the Pages section and select “Only the listed pages”. Then, enter “<front>” in the text box below of the chosen option. Your screen should look like the image below:
Summary: This tutorial showed you the steps to install and configure Views Nivo Slider in Drupal 7. You learned the dependency modules required for this module and the steps involved to have a slideshow in your front page.