Cathy+Chan

=__**Creating A Nivo Slider**__=



**Setup:**
Before you begin, you would need to install the Views Nivo Slider and Links module from the given link below. [] [] //Ensure you have the Views Nivo Slider, Link,Views and Chaos tools checked off. Save Configuration.//

**Creating a Quick Scenario to Test the Nivo Slider**
First, we will have to create a new Content Type under the Structure menu. I labelled mine as Nivo Slider Portfolio.

Under the following tabs, uncheck the following items: and within Comment Settings, change the Default Comment Settings to Hidden. //Click 'save and add fields'.//
 * Publishing Options --> 'Promoted to front page'
 * Display Settings --> 'Display author and date information'
 * Menu Settings --> 'Main menu' (as we will be creating a block rather than a page)

Now let's add an Image and Link field to this new content type! Here are the list of details. //Note: If you have already went through Greg's "Views Slideshow" walkthrough, you should select the Image field from the 'Add existing field' below.// //**Label: Image**// //**Field name: field_image**// //**Type of data to store: File**//

//**Label: Link**// //**Field name: field_link**// //**Type of data to store: Link**// //**Widget: Link**// On the next screen just click on 'Save field settings' (We don't need to change any settings). //Remove the Body Field and click 'save'.//

You would then be lead to a page similar to the one below: Change the number of values in 'Image Field Settings' to 5 for the moment. This will set how many images you would want to display on the Nivo Slider. (Other options allow us to streamline our image submissions workflow by restricting the minimum and maximum image sizes, limiting file sizes, etc.) We can adjust these settings later, //click 'Save Settings' for now//.

You will be bounced back to the editing fields page like the image below. //Click 'save'.//

**Adding Content to the Quick Scenario**
Now we need to add dummy content for our Nivo Slider. Go to Add Content --> Nivo Slider Portfolio (or any name you have chosen to label your content type above). Label your Nivo Slider "Nivo Slide" for the moment. Upload a few images of your choice to display for the moment. Set comment settings to 'closed'. Save.

**Configuring Views**
Navigate to //Structure --> Views --> Add new view.// //View name: Nivo Slider.//

//Uncheck 'create new page' and check off create a block!!// //Under display format --> click 'Views Nivo Slider' in dropdown menu// AND of 'fields' next to it. You should now have something that looks like the image below.

Click 'save and exit'. Click continue editing by scrolling down to Nivo Slider and clicking edit on the right.

You should now be led to the Nivo Slider (Content) Display Options:
 * In the __**Fields**__ section, notice we currently have **Content: Title**. Here, we need to add **Content: Image** and **Content: Link**. //Click 'Apply'.//
 * For the **Configure field: Content: Image**, uncheck create a label. Select Formatter as **Image** and Image style as **large**.
 * IMPORTANT: Expand the 'Multiple Field Settings' and UNCHECK 'display all values in the same row! **(This is essential for the module to work properly for multiple images!!) //Click 'Apply'.//**//*//


 * For the **Configure field: Content: Link**, uncheck create a label. Select Formatter to **URL, as link**.
 * Now we need to filter our criteria. In the __**Filter Criteria**__ section, we need to add **Content: Type** and checkmark **Nivo Slider Portfolio**.


 * Under **__Format__**, beside 'Show', click Fields and change it to 'Views Nivo Slider'. After you click apply, you would be guided to the Row Style Options. Adjust the settings according to the image below.

In Format Section, beside Views Nivo Slider, select settings. Here, you are welcomed to change these settings according to your preference of how you want your Nivo Slide to display. This is what I have done to closely match with the example displayed above.

Change Image field style to 'large' and the effect to 'slideInLeft'. Change Control Navigator to Basic. Turn off the Direction Navigator, Keyboard Navigator and Pause on Hover,. Click Apply and remember to press save to save your newly added views!

Lastly, to make it show on your page, go to Structure --> Blocks. Enable your 'View: Nivo Slider' in your content section. //Save block.//