Oct 25, 2011

How to use Views Slideshow in Drupal 7

1. Required Modules (Version: Drupal 7.8)

  1. Views (7.x-3.0-rc1)
  2. Views Slideshow (7.x-3.x-dev)
  3. Chaos tool suite (7.x-1.0-rc1)
  4. Libraries (7.x-1.0)
  5. Link (7.x-1.0)
  6. Token (7.x-1.0-beta6)

2. Install the Modules

In Drupal 7 you can install modules from the admin section, but I still feel this new feature doesn't have any meaning, because we have to search for the module link in the Drupal site and then copy paste into the admin module installation area, it would have been so good if they would have made it something like WordPress a small search feature. Anyway I just gonna download and install it in the old way (I still recommend this old way).
Download all the above listed modules from http://drupal.org/project and install in the directory examplesite.com/sites/all/modules

Go to http://www.examplesite.com/admin/modules and enable these modules as below:

Modules - Drupal
Enable Modules
  1. Views
  2. Views UI
  3. Views Slideshow
  4. Views Slideshow: Cycle
  5. Chaos tools
  6. Libraries
  7. Link
  8. Token

3. Create Image Cache

In Drupal 7 imagecache is part of core module and is named as Image styles. So let's create two image cache from here, one for the full size slider image and other for the thumbnail image. In this tutorial I use 640x480 (pixels) dimension for the full size slider image and 320x240 (pixels) dimension for the thumbnail image. Note: These configurations can be defered depends on your needs.

Fullsize Slider image settings

Go to http://www.examplesite.com/admin/config/media/image-styles and click on the add new style link

  1. Give an Image style name and click on create new style button.
  2. On the next configuration screen select new style you want and then click add button (In this tutorial I choose re-size style).
  3. On the next screen set the width and height and click on the add effect button. (The settings may vary depend on the style you choose). I set width as 640 and height as 480 pixels.
  4. Do this same process for the thumbnail image too. (for the thumbnail image dimension, I set width as 320 and height as 240 pixels.)

4. Create New Content Type

Let's create a new content type, from the dashboard menu bar cick on Structure and then Content types then click on the add new content type link.

  1. Give a human-readable name, I named it as Featured Slider (machine name will be auto generated based on the human readable name)
  2. Give a brief and relevant description
  3. Submission form settings, I leave as the default settings
  4. Publishing options, I checked only published (all other settings unchecked)
  5. Display settings, I have unchecked the authour and date info.
  6. Comment settings, I set hidden (disabled)
  7. Menu settings, I leave as default settings.
  8. Click Save and add fields Button

5. Create New Fields

Here in this example I'll create only two fileds, and they are image field and link field. We will use image field for uploading our slider image and link field for creating a custom link where we want our slider to be linked.

  1. Image Field Settings
  2. Label: Slider Image
  3. Field: slider_image
  4. Field type: image
  5. Widget (form element): image
  6. Click Save button, and on the field settings page leave default settings and click on Save field settings button.
  7. On the image field configuration settings page you can configure as you wish.
  • I set this field as required, I added a file director name called slider-image so that this images will be arranged separately from other images.
  • You can set the maximum upload size and resolution here, I have enabled alt and title field and finally click Save settings button.

By using same method create the link field too.

Link Field Settings:

  1. Label: Slider Link
  2. Field: slider_link
  3. Field type: link
  4. Widget (form element): link
  5. Click "Save" button

Note: For the link field configurations leave everything to default settings.

I have re arranged the field like shown below:

  • Title field
  • Image field
  • Link field
  • Body field (you can even remove this field if not necessary)

Manage Display

On the manage display tab you can conigure how the out put of the field to be diplayed, I have set the image label as hidden.

6. Create Feature Slider Content

I have created four featured slider content for this tutorial.

  1. Click on add content link
  2. Create Featured Slider content
  3. Give a proper title name
  4. Upload slider image
  5. Give alt and title field names
  6. Give a link title and url where you want the slider to be linked
  7. Leave all othe settings as default except for the path field if you want you can give an SEO friendly URL alias.
  8. Save the content.

Repeat the steps twice or thrice to create some more featured slider contents for your slide (I have created four contents)

7. Create a New View

Now it's time to create our new Slideshow view. From the Dashboard menu click on the Structure and then click on the Views.

  1. Click add new view link
  2. Give view name, I have named as Featured Slider (machiine name will be auto generated)
  3. Give an apropriate view description
  4. Choose Show Content of type Featured Slider (your content type name).
  5. Uncheck Create a Pge and check Create a block
  6. Type in Block title and choose display format as "Slideshow" of "fields" items per page 5 (you can enter the number of items you want to display)
  7. Click the button "Continue & edit"

Views Field Settings

  • Add "Link" Field
  1. "Link" must be the first field in order to work everything properly, so click on the add icon and from the filter Groups select "Content"
  2. Add Content: "Link" "Appears in: node:featured_slider."
  3. Click: "Add & configure button"
  4. In the next cofiguration window uncheck "Create a label" and check "Exclude from display"
  5. Click "Apply button".
  • Add "Image" Field
  1. Click on the add icon and from the filter Groups select "Content"
  2. Add Content: "Image" "Appears in: node:featured_slider." (Note: Make sure you choose the "Image" field which we created for this slider content type only.)
  3. Click "Add & configure button"
  4. In the next cofiguration window uncheck "Create a label"
  5. Formatter: "Image" (If you have installed "Colorbox" or "Lightbox2" you can choose them here.)
  6. Image Style: "Fullsize" (Choose the imagecache you have created in the above step "3. Create Image Cache")
  7. Link image to: "Nothing"
  8. Style Settings: "Leave default settings"
  9. No result behaviour: "Leave default settings"
  10. Rewrite Results: Check "Output this field as a link"
  11. Link path: [view_node] (Note: Scroll dow a bit and you can see replacement patterns created by Token module, (If we didn't set the link field as first we can't see link field option here) copy only [view_node] then scroll up and paste it in the link path field.)
  12. Click "Apply button".
  • Add "Thumbnail" Field
  1. Click on the add icon and from the filter Groups select "Content"
  2. Add Content: "Image" "Appears in: node:featured_slider." (Note: Make sure you choose the "Image" field which we created for this slider content type only.)
  3. Click "Add & configure button"
  4. In the next cofiguration window uncheck "Create a label" and check "Exclude from display"
  5. Formatter: "Image" (If you have installed "Colorbox" or "Lightbox2" you can choose them here.)
  6. Image Style: "Thumbnail" (Choose the imagecache you have created in the above step "3. Create Image Cache")
  7. Link image to: "Nothing"
  8. Style Settings: "Leave default settings"
  9. No result behaviour: "Leave default settings"
  10. Rewrite Results: Check "Output this field as a link"
  11. Link path: [view_node] (Note: Scroll dow a bit and you can see replacement patterns created by Token module, (If we didn't set the link field as first we can't see link field option here) copy only [view_node] then scroll up and paste it in the link path field.)
  12. Click "Apply button".

Views Filters Settings

In Views 3.x the filters are created in the beginning while we choose the content type and other settings. If you need any additional filtering you can create it here.

Views Style Settings

Click on the "Format Slideshow Settings" and on the next configuration window set as below:

  • List type: "Unordered list"
  • Wrapper class: "Leave default settings"
  • Style » Skin: "Deafult"
  • Slides » Slideshow type: "Cycle"

"Cycle Options"

You need to download jQuery cycle plugin and copy jquery.cycle.all.min.js to sites/all/libraries/jquery.cycle You can find the plugin at http://malsup.com/jquery/cycle.

In a Simpler Manner

Create a folder named "libraries" in your "examplesite.com/sites/all/" directory and then create an another folder named "jquery.cycle" in that directory and finally copy and paste only the "jquery.cycle.all.min.js" into this directory. For e.g. examplesite.com/sites/all/libraries/jquery.cycle/jquery.cycle.all.min.js

  • Transittion: "Fade"
  • Action: "Pause on Hover"
  • Internet Explorer Tweaks: "Default"
  • Widgets: You can choose either or both Top and Bottom (I choose bottom here, and the advance settings as below:)
  • Bottom Widgets » Pager » Pager type: "Fields"
  • Pager field » Content: "Image" (Note: Last one we added for the thumb, don't mistake since both field will be named same.)
  • Activate Slide and Pause on Pager Hove: Checked » "Controls" and Unchecked » "Slider Counter"
  • Click on "Apply button".

Format Show Field Settings

  • Inline fields: "Choose the thumbnail field as inline."
  • Click on "Apply button." (Note: Well it actually doesn't change much in appearance but it does change in the code.)

8. Enable & Configure the Block

Now this block will be visible in the blocks disabled area, so from the Dashboard menu go to Structure » Block and "Enable" the block to a themes default region or any of the custom region you've created. (Regions varies depends on the theme you are using.)

Block Configuration Settings

After enabling the block you get a link to configure the block so click on the "Configure" link and on the settings section set as below;

  • Block title (If you don't want block title to be displayed just type <none>)
  • Again you get all enabled theme specific Region settings.

On Visibility Setings

  • Pages » Show block on specific page: choose Only the listed pages and typeso that this block will be displayed only on the front page.

16 comments :

  1. Thanks for your explanation, but I think you need to put the illustrator.

    ReplyDelete
  2. Very nice and straightforward approach. No problems getting this working - thanks for the great tutorial.

    ReplyDelete
  3. Thanks for this post, I wonder in D7 how can I set the numbers of items per page? i mean for example i want 6 of my contents in a slide, then another 6 of them in next slide when I click next or previous button. I couldnt find it in slideshow settings, thanks

    ReplyDelete
  4. Hi, great tut. Thanks!
    I am having trouble with linking a slide to custom LINK though.
    I have the LINK module setup and linked my Slider content items to custom URL (instead of their original URL), also have the LINK field defined in the View and am rewriting results for the IMAGE field (output this field as link) with [view_node], but for some reason it still attaches the original URL of the node to my image instead of the one set with LINK module.
    Any ideas?
    Thanks alot!

    ReplyDelete
  5. I got it. Obviously for the custom LINK to work instead of the Node URL you would need to be rewriting with the [field_link] instead of the [view_node] token.

    ReplyDelete
  6. Rishi Kulshreshtha21/5/12 10:30 PM

    Hi Shofera,

    I can suggest you to try 'Contextual Filters' and use 'NID' i.e Node ID which will filter your output on the basis of your current node!

    ReplyDelete
  7. Rishi Kulshreshtha21/5/12 10:33 PM

    Hi Doxigo,

    You can simply set your post limit to 6 or as per you need into your Views page or block.

    Thanks!

    ReplyDelete
  8. Rishi Kulshreshtha21/5/12 10:33 PM

    Awww, thanks for that!!!

    ReplyDelete
  9. Rishi Kulshreshtha21/5/12 10:34 PM

    Hi,

    But whats the mean of putting their illustrator...

    ReplyDelete
  10. Thank you ever so much.......................

    ReplyDelete
  11. Thanks so much for this tutorial.  I'm having the problem, however, where all the images are showing up underneath the slideshow.  What am I doing wrong?

    ReplyDelete
  12. this is the best tutorial ever.. thankyou soo much..
    p.s.- it would have been awesome, had it been supported by snapshots..

    ReplyDelete
  13. Ayeni Adedayo13/7/12 1:36 AM

    I'm having the same problem as kevinpnb. The "non-effected" images hang beneath the slideshow. Kindly lead in the fix direction. Tnx

    ReplyDelete
  14. scarletish12/9/12 2:18 AM

    Thanks so much!!!

    ReplyDelete
  15. Hi I have a requirement like only one image should be displayed on each slide even if the content has more than one image. Because in my slider each slider is displaying all the images uploaded for the article. So how to display only single image per slide.

    ReplyDelete
  16. druppapprentice18/4/13 6:45 PM

    Still working, thanks for the explanation buddy.

    ReplyDelete