HOW TO INSTALL & SETUP VIEWS SLIDESHOW MODULE ON DRUPAL7?

Views Slide Show on Drupal7

Today I gonna show you how to install and setup the amazing views slideshow module on Drupal7.

This tutorial is now uptodate with latest modules!!!

(1) Required Modules (Version: Drupal7.0)

  1. Views (7.x-3.0-beta3)
  2. Views Slideshow (7.x-3.0-alpha1)
  3. Chaos tool suite (7.x-1.0-alpha4)
  4. Libraries (7.x-1.0)
  5. Link Field (7.x-1.0-alpha3)
  6. Token (optional) (7.x-1.0-beta1)

(2) Install the Modules

In Drupal7 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 Druapl site and then copy paste into the admin module installation area, really crazy. It would have been so good if they would have made it something like wordpress a small search feasture. Anyway I just gonna download and istall it in the old way (I still recommend this old way).

Download all the modules from Drupal site and install in the directory yoursitename/sites/all/modules.
Go to http://www.yoursitename.com/node#overlay=admin/modules and enable these modules as below;

(1) Views (2) Views UI (3) Views Slideshow (4) (5) Chaos tools (6) Link (7) Libraries (8) Token (Optional)

(3) Create Image Cache

In Drupal7 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 935x293 (pixels) dimension for the full size slider image and 210x100 (pixels) dimension for the thumbnail image. Note: These configurations csn be defered depends on your needs.

* Fullsize Slider image settings

Go to http://www.yoursitename.com/node#overlay=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 resize 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 935 and height as 293 pixels.

Do this same process for the thumbnail image too. (for the thumbnail image dimension, I set width as 210 and height as 100 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 (machiine 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 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.

 Image Field Settings

    (1) Label: Slider Image
    (2) Field: slider_image
    (3) Field type: image
    (4) Widget (form element): image
    (5) Click Save button, and on the field settings page leave default settings and click on Save field settings button.
    (6) 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 sperately from other images.
You can set the maximum upload size and resolution here, I have anabled 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,
For the link field configurations leave evrything 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 link field as hidden and I have also set image label as hidden
Drupal7: manage fields

(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 yo want you can give an SEO friendly URL alias.
  (8) Save the content.

Same way create more Featured Slider contents (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
  (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
First let's add link field (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
Add Content: Link, Click "Add & configure button" in the next cofiguration window uncheck "Create a label". "Check" Exclude from display.
Click "Apply button"

Next let's add image field, so click on the add icon and from the filter Groups select content

Content Filter
Add Content: image field (Note: make sure you choose the image field which we crerated for this slider content type only.)
Click "Add & configure button" in the next cofiguration window uncheck "Create a label".

Formatter: Image (if you have installed Colorbox or lightbox you can choose them here!)
Image Style: Fullsize (Choose the imagecache you have created in the above step)
Link image to: Nothing
Style Settings: Leave default settings
No result behaviour: Leave default settings
Rewrite Results: Check Output this field as a link
Link path: [view_node] (Note:Scroll dow a bit and you can see replacement patterns created by Core 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.)
Click "Apply button"

Finally we need one more field for the thumbnail, so let's click on the add icon and from the filter Groups select Content
Add Content: image field (Note: make sure you choose the image field which we crerated for this slider content type only.)
Click "Add & configure button" in the next cofiguration window uncheck "Create a label" and CHECK EXCLUDE FROM DISPLAY,
Formatter: Image (if you have installed Colorbox or lightbox you can choose them here!)
Image Style: Thumbnail (Choose the imagecache you have created in the above step)
Link image to: Nothing
Style Settings: Leave default settings
No result behaviour: Leave default settings
Rewrite Results: Check Output this field as a link
Link path: [view_node] (Note:Scroll dow a bit and you can see replacement patterns created by Core 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.)
Click "Apply button"

Views Filters Settings

In views3 the filters are created in the beginning while we choose the content type and other settings! If you need any additional filetering you can create it here!

Views Style Settings

Click on the Format Slideshow | settigs and on the next configuratioin window set as below;
  (1) List type: Unordered list
  (2) Wrapper class: Leave default settings
  (3) Style> Skin: deafult
  (4) Slides> Slideshow type: cycle
  (5) 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 SIMPLE ENGLISH
Create a folder named "libraries" in the site/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.

  (6) Transittion: Fade
  (7) Action: pause on hover
  (8) Internet Explorer Tweaks: default
  (9) Widgets: You can choose either or both Top and Bottom (I choose bottom here, and the advance settings as below;)
  (10) Bottom Widgets>Pager>Pager type: Fields
  (11) Pager field: Content: Image (Note: last one we added for the thumb, don't mistake since both field will be named same.)
  (12) Activate Slide and Pause on Pager Hove: checked, controls and slider counter leave unchecked.
  (13) Click Apply button.

Format Show Field Settings

  1. Inline fields: Choose the thumbnail field as inline.
  2. Click Apply button. (Note: Well it actually doesn't change much in appearance but it does change in the code. Next step use the firebug and find the class and add some styles to display properly.)

(8) Create a Custom Region (optional step)

(1) On your thems folder open the your_theme_name.info file and add a new region like this shown below;
regions[featured_slider] = Featured Slider and save the .info file.
(2) Open your themes page.tpl.php file and add these code where you want your slide to be displayed as shown below;

  <?php if ($page['featured_slider']): ?>
    <div id="featured-slider">
      <?php print render($page['featured_slider']); ?>
    </div> <!-- End Featured Slider-->
  <?php endif; ?>

You can even create custom front page template like page--front.tpl.php so that you do't need to make any changes to the default page.tpl.php template.

[9] 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 the custom region we created (featured_slider). (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;

  (1) Block title (if you don't want blobk title to be displayed just type <none>)
  (2) Again you get all enabled theme specific Region settings.
  On visibility setings
  (3) Pages>Show block on specific page: choose Only the listed pages and type <front> so that this block will be displayed only on the front page.

CSS TIPS TO DISPLAY THUMBNAILS INLINE

Add these CSS codes to your themes style sheet to display the thumbnails inline.
.views-slideshow-controls-bottom .views-slideshow-pager-field-item { float: left; margin: 20px 6px; } Make necessary adjustments.

That's all now we have successfully created our new Views Slideshow on Drupal7. I hope yo could understand the tutorial I tried my best to explain as much as I can, if you still have doubt's comment below and I will try my best to help. The scren cast of this tutorial will be coming soon.

Play around and find the best you can in Drupal7, Best wishes.

Comments

how to hide published nodes

Hi,
Thank you so much for this indepth article. I have a question though, I'm probably missing something obvious. I want to use the slideshow to show banners. But because I am making a contenttype and placing the banner in here, a url is created for the contenttype. I don't want it to be accisble anywhere else except in the slideshow. HOw do you do this?

Thank you,
Karin

Set your slideshow pages as unpublished

Dear Karin,
 
You can set your slideshow contents as unpublihshed and in your views settings make sure you filter your slideshow for only unpublished contents.
 
Hope that works for you. Please feel free to ask me if you have any questions.

Pager Fields Can Be Awesome!

I wanted to thank you for writing this guide to using views slideshow, I used it for recreating a home page banner on my fitness and exercise website that I just migrated to Drupal 7. I wanted to add that when you select pager (in the settings for slideshow), you can also choose any fields you want to play a particular slide at any time. I used three fields: an image, title text, and teaser text. I also used an active/hover state for my pager. There is really no limit to what you can do using views slideshow with just a little bit of css! (for my fitness site, it took about 20 lines to get it the way I wanted it)

Thanks a million !!!

Ciril, Thass a fantastic job... I was thrilled after i got my slideshow working, However I am trying to center align my Slideshow, am unable to get it done. Just a thought i am using ATCommerce theme, (Sub themeing it) I wanted to use the slideshow in the header region.... I am not getting the satisfactory result. Problems am facing
1. Aligning the slideshow
2. How to place it in the Header region
3. For better controls, how can we use color box module ???
If you could give me a little tip, i shall explore the restt.....Please assist.

Problem with "link" field type

I attempted to go through these directions today.

However, when I came to the part of creating the Sliding link field, I do not see the "link" field type as an option.

Would you know what's going on? Did I miss something.

Yes, you missed enabling the

Yes, you missed enabling the LINK module. Navigate to modules, scroll down to the FIELDS section/modules. Find the LINK module and check it. Then save. Go back to the Creating Link field and you'll see that "link" field type.

Unable to add the link field

I am also unable to add the link field in step 7.. I do have the Link module enabled.

Great!!!

Very nice article and step by step explanation :) Thanks for taking out time to make this tutorial.

THANK YOU!

Wonderful tutorial. Works perfectly in Drupal 7. Got my slideshow up in no time!

Cheers :D

Hi there thanks for this tut
but i followed it to the letter i think but all i'am getting is the images i upladed one under the other and not slideing :(

any hints on what i may have messed up here am using drupal 7.19 and all latest modules that were needed

Dear Ciril,

Dear Ciril,

Thank you for your amazing tutorial and for taking the time to write it down. I have one question. Do you know if it is possible to add a carrousel to the pager in case there is more content?
Thanks in advance,

Winter

Use JCarousel Module

Dear Winter,
You can use the Use JCarousel Module module for the carousel functionalities. For an example you can see www.wacom.asia page slider.

thanks

thank you very much for your answer, I will give it a try :)

fields on the view

Hi,

I am trying to implement this view slideshow on my first Drupal website ever, but I have 2 questions:

1) when we add the fields, in the link path we should enter [view node] as found in the replacement patterns. However, I cannot find this token. The only entries I see in the replacement patterns are :

Replacement patterns
The following tokens are available for this field. Note that due to rendering order, you cannot use fields that come after this field; if you need a field not listed here, rearrange your fields. If you would like to have the characters '[' and ']' please use the html entity codes '%5B' or '%5D' or they will get replaced with empty space.

•[field_slider_link] == Inhoud: slider link
•[field_slide_image] == Inhoud: slider image
•[field_slide_image-fid] == Raw fid
•[field_slide_image-alt] == Raw alt
•[field_slide_image-title] == Raw title
•[field_slide_image-width] == Raw width
•[field_slide_image-height] == Raw height

2) In fact I don't understand the principles of adding the fields. We add first the slider_link field as hidden, then we add the slider_image field with full image but displayed as a link towards ???, and then we add the slider_image field with thumbnail also displayed as a link towards???
Can you explain the reasoning behind?
(this will help my general understanding of views and this slideshow setup)

many thanks!

I've created the link field

I've created the link field without a title (on 'Link Title' check 'No title') and used the link replacement rule, it worked, don't know why :/

You need to Add Link first

In the tutorial he states you must add the link first in order for it to show in the list of token options for the image fields.

I think you can remove the image fields (next to "add" is a dropdown that reveals "Rearrange", and that is where "Remove" is hiding). Then add the link field, configure it, and afterwards add the images.

Same Problem, unsolved, no solution? Links issue a big problem!

Same problem here, no matter what I cannot get [view node] available (in the displayed list of available tokens) or usable as a token. Yes I have the link field before the image field, and to be sure of this I recreated the view several times after removing and re-adding the image field made no difference. If I just put in [view node] into the url field it just creates urls ending in exactly that string, not some other value. Are the instructions here up to date and working? What is the function of this link? Showstopper.

As someone pointed out instruction 6.6 is also really unclear
6 (6) Give a link title and url where you want the slider to be linked
What are we linking here and to what? Images to source nodes? Thumbnails to larger images? Please explain, that really would help. Does where here mean "if" or does it mean source, or destination?

In fact without having, or linking to, a working example of what we are trying to create it is hard to know what the point is here. I'd recommend more screenshots, a working example, and clear explanations of all the link-related stuff.

Step 7 is incorrect

1. Don't add Content: Link to the image in Step 7. Instead at Content: Slider Link. This will give you the [field_slider_link] option, and this is what you want to add. As far as I can tell Content: Link is the URL back to the view node of the slider content, not the [field_slider_link] value, which is what you want.

2. We add fields because this tells the View what we want including in this presentation. We want the slider link to be there — but not displayed. We just want it present as a token so we can use the link on the image, so that when the user clicks on the image, she's sent to the link.

Say your slider says "Visit our Cheese Page!" And it has a slider link to our Cheese content simple page at node/100. So we put node/100 in the slider content link field. Then we link it to the image in views. When a use clicks the image, she goes to the Cheese page at node/100.

If you used the Content: Link instead, she would click the image and go to the slider content, not the simple page content you specified.

cycling not happening

i am trying to create a front page slide show.
Created content type (fp_slides)for images ( fields: title, image, caption, link, body)
Create a View block to select & display (fp_slides: title & images) & to use jquery cycle.
-- this look OK in preview (the 3 images are cycled thru' as expected.)
Configured the block to appear on the front page Above the content.
I get the block appearing with image 1 of 3 displayed. but it does not cycle. !!

Any ideas?

ta..

slideshow of images and videos

Hello,
Thanks for this "how-to".
I'm looking for a way to show pictures and videos in the same slideshow with thumbs.
How would you do this ?
Tnx

Paul

What URL ?

Hi,

Thanks for this guide, I'm a total noob to drupal, going through this guide I'm stumped at part of adding slider content "6) Give a link title and url where you want the slider to be linked" what is probably obvious but I'm not sure what should the URL be, site will be run as local for time being. Is there a relative path I should be using?

Lost at this point

The directions are great until I get to here.
(7) Click the button "Continue & edit"
Views Field Settings
(UNDER format I have field | settings and under fields and add button their is a filter for several content types but no groups)
need a little more direction

Me Too !

At this point, I'm stuck too. Under Display Pane, clicking on the Add icon will show a pulldown menu with: Attachment, Block, Feed, and Page. Nowhere the group "Content" can be found. Under Block Detail Pane, the Add icons show "Rearange" when clikced on. Please give more details. Thank you very much for such an indepth tut.

Me 2

I'm also stuck here, please advise?

I have updated the tutorial with few more screen shots!

I have updated the tutorial with few more screen shots! I hope that helps you guys to understand better.
Let me know if you still can't figure out thie settings.

I also am lost

There is a disconnect here.
The lost location is:

(7)-[this is the step 7 with and the subheading]

(7) Click the button "Continue & edit"
Views Field Settings [there is no "Field Settings." There is a Fields | Settings, but neither have the following "link field" choices".
First let's add link field

We need more guidance here.

Thanks for your extra efforts to help!

Content: Link

Step 7 is incorrect. It specifies adding the Content: Link field, but this field isn't what we added to the Slider Content. We added Slider Link to the Content, so we need to add Content: Slider Link to the View.

When you do that a new Settings appears for the field: Format: URL as plain text.

thank you!

i was starting to lose it wondering why the links weren't working. good catch :)

help me in sliderview

after following all step i don't kw what i m getting ?????? i m newbie to drupal plz tell me what to do after complicating all steps ,, in view i can see only images like a normal filter plz help me fast ,thanks in advance

pager thumbnail

hi cyril thanks for the tutorial, but i've a little problem here, at first the pager thumbnail was showed but then tomorow i loked up the pager was dissapear, i try to look up in the firebugs and suddely the div for the pager was not there, what's the problem i hope you can help me...... big thanks

link not working:(

First, THANK YOU for the great article! Your detailed instructions helped A LOT.
Our problem is that the link does not link us to the URL we have added in the link field of the new content type (for the slideshow). Instead it goes to /view and we get a 404. Any idea what we did wrong?

link not working - solved

I just found out what I was doing wrong. Instead of my "Content: Slideshow Link" link field (which I added to the slideshow content type) I was adding the "Content: Link" to the view, so there was nothing to link to.
Thanx again for the instructions.

Images displayed one under the other

I'm having the same problem as the post from 02/14/2013 but I did not see a solution.
My images are displaying one under the other and there is no slideshow.

Slideshow Image Sizes in Code

Hi there:

Awesome module and great instructions! I am attempting to make the slideshow on my site be responsive but I am finding that the height and width of the image is somehow being detected and then trickled up into the DIVs that build the slideshow. Any idea how I can stop this from occurring? If I hand-remove the sizes, they are re-written when the new image slides in.

Thanks much!
B.

fields of view

hi,

) when we add the fields, in the link path we should enter [view node] as found in the replacement patterns. However, I cannot find this token. The only entries I see in the replacement patterns are :

Replacement patterns
The following tokens are available for this field. Note that due to rendering order, you cannot use fields that come after this field; if you need a field not listed here, rearrange your fields. If you would like to have the characters '[' and ']' please use the html entity codes '%5B' or '%5D' or they will get replaced with empty space.

•[field_slider_link] == Inhoud: slider link
•[field_slide_image] == Inhoud: slider image
•[field_slide_image-fid] == Raw fid
•[field_slide_image-alt] == Raw alt
•[field_slide_image-title] == Raw title
•[field_slide_image-width] == Raw width
•[field_slide_image-height] == Raw height

Solution

Hi,
I'm having the same problem,
did you find a solution?
Thanks!

Solution

Seems like its working just fine without the Rewrite results

More clean tutorial

http://www.ostraining.com/blog/drupal/views-slideshow/

Qiyam, [field_slider_link] is

Qiyam, [field_slider_link] is actual the field you want.

The requested page "/view" could not be found.

Hi,

I am having the same problem as Submitted by Qiyam (not verified) on Fri, 04/26/2013 - 15:19

Whatever I do or recreate, I don't have [view node] when I choose the Content: Slider Link.

I do have [view node] when I use Content: Link.

But, when I click on a image (thumb or full) I get the error that the page is not found:
The requested page "/view" could not be found.

Also, I have the row of thumb images, which is fine,
but I have twice the "featured" image displayed, once big and underneath a thumb version.
so; I have 3 items: One big active image, one small active image and the row of thumbs...

Please, can you help?

Thank you

Cannot see view style setting

Thank a lot its detailed enough for even the newbies like me. but cannot see the Views Style Settings on the views page. what could be the problem

Undefined index

The only change I made was I called it Marketing Banner instead of Featured Slider and I get this error after trying to do step 8:

Notice: Undefined index: marketing_banner in include() (line 126 of /bryden/drupal-7.22/sites/all/themes/professional_pro/templates/page.tpl.php).

On top of that error, the preview shows up really well but when I go to put it anywhere I have the title of the images cycling, but no images are shown at all.

undefined index

so what did you do to resolve this issue? I have the same issue without changing anything (keeping the same names)
thanks!

requirements

requirements 7.0 so am using 7.22 will that work ?

link field

Thanks a lot for making this tutorial, it's very helpfull.

Is it possible to make a link for only 1 picture from the slider? Let say I want to have a slider of 4 pictures without a link and when it's sale time I want to add 1 picture and I want that this picture will have a link to a page. Is it possible?
Thanks

images color

thanks for this topic . But my problem is that all the images are in gray color ? why that ?

Problem on local server

Thanks for this topic. Exactly what i wanted to try on my site. But i didn't managed to run it on a local serve (MAMP on OS X Lion). On step 5, i have no access to my local site (just à White page and no message of error). I tried it 4 times with the same result.
I'm not a developer but i usually managed to try module on local before using it on the real web site.
Can someone help me ?
Thanks

Thanks for this tutorial :)

Thanks for this tutorial :) good job! After this i have ideas for diffrent types of slider.

Nice one

Hey, thanks for writing this up. I've been looking at several blogs to find something like this. Do you by any chance have a contact email that you could share? I would like to contact you directly.

Regards
Ashley
<a href="http://www.mygoogle.com">Google promoter</a>

Javascript popup link

Hello.. What if I want to put javascript pop-up links (which I'm able to set the size too)?
Currently, it works fine but I'm confuse how to use the javascript popup links
such as this code: javascript: var e = window.open('somelinks_here.html','title','width=800,height=600,resizable=1,scrollbars=yes');

Thank you for the tutorial!

Pages

Add new comment