How To Install & Setup Views Slideshow Module On Drupal7 - Bright Web Design Studio

HOW TO INSTALL & SETUP VIEWS SLIDESHOW MODULE O...
http://www.brightwebsitedesign.com/how-to-install-views-slideshow...
Home Blogs ciril's blog HOW TO INSTALL & SETUP VIEWS SLIDESHOW MODULE ON DRUPAL7?
HOW TO INSTALL & SETUP VIEWS SLIDESHOW MODULE ON DRUPAL7?

Submitted by ciril on Mon, 05/16/2011 - 13:40
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. 3. 4. 5. 6. Views Slideshow (7.x-3.0-alpha1) Chaos tool suite (7.x-1.0-alpha4) Libraries (7.x-1.0) Link Field (7.x-1.0-alpha3) 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) Views Slideshow: Cycle (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)
1 van 11
26/02/2012 18:59
(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
2 van 11
26/02/2012 18:59
(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 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 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 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"
3 van 11
26/02/2012 18:59
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>  <?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
4 van 11
26/02/2012 18:59
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.
ciril's blog Add new comment
Islander (not verified)

Thu, 01/20/2011 - 05:20 permalink
Thx for your Tutorial ... but i have a little Problem

Hi Ciril, thx for your very good totorial ... i did all as you said, but mit slideshow is not working. One picture is showa in large version, and below of that there are the thumbnails ... i use Drupal 7 with : Chaos tool suite 7.x-1.x-dev (2011-Jan-11) entity 7.x-1.x-dev (2011-Jan-17) Panels 7.x-3.x-dev (2011-Jan-11) Views 7.x-3.x-dev (2011-Jan-15) jquery is also installed in the correct folder .. Do you have an idea, what the problem could be ? Many thanks for your help in advance ..
reply
andy (not verified)

Thu, 01/20/2011 - 19:03 permalink
Thank you very much Ciril!

Thank you very much Ciril! You saved a lot of time on views and google search. It worked for me with one exception: The thumbnails are lined up vertically under the main rotating imagse. I tried with firefox3 and seamonkey. I did some tweaking with the views to have body text overlay on the image. The only problem I do have is that the thumbnails are lined up vertically instead of desired horizontal and there's a gap between the large image and the first thumbnail. This happened before I did the changes changes. Thanks again.
reply
ciril
Thu, 01/20/2011 - 21:42 permalink
I will update the tutorial on that section

Ah it seems I forgot a small step, I will update the tutorial soon. For fixing this issue just follow these steps; [1] Edit your vie [2] Click on the RowStyle and choose fields, then on the rowstyle settings section you see an option with display inline. Choose the thumbnail field as inline. [3] update and save the view. Well it actually doesn't change much in appearance bit it does change in the code. Next step use the firebug and find the class and add some styles to display properly. I will try to add the CSS tips in the
5 van 11
26/02/2012 18:59
tutorial. Best wishes.

reply
igameinfo.com (not verified)

Tue, 02/22/2011 - 09:28 permalink
Do you have any updates?

I really need to make a slidershow like the image u have shown in this tutorial. Please help.
reply
Anonymous (not verified)

Mon, 03/07/2011 - 12:09 permalink
open publish
Can this tutorial be used to create a slideshow in Open Publish
reply

Wed, 06/01/2011 - 03:56 permalink
Ciril I did exacly what you

Ciril I did exacly what you showed and writed about but... I can't get my images to cycle... I have 2 slides(images). First it show first image, then second and then it dosen't show enything (well it's show thumbnails at place of the slides). Also there is something wrong with my thumbnails. I got 3 thumbnails (!) but i got only 2 slide (2 big images). The first thumbnail is a slideshow itself... (but miniature) - it's changing like the big slides... It shouldn't be there. The rest - 2 are displayed propertly.
reply

Thu, 06/02/2011 - 00:08 permalink
OK i got it. If your slide

OK i got it. If your slide don't cycle make sure you click on: Pager Use pager: Display a specified number of items And put exactly the number of your slides (if u have 3 slides put there number 3). Now your slideshow will be in cycle mode. Mine got 10 items there ,and I had only 2 slides so it took forever to fade those 8 - and I thought it's broken. Now u got cycle running but u probably have one thumb slide who do exactly that what the big one (it's in cycle mode). So add in you css this line: .views-field-field-slideshow-image-1 {display:none;} this slide will disapered and u can display via css rest of you thumbs like u want by modifying some classes. #views_slideshow_pager_field_item_slideshow-block_0 #views_slideshow_pager_field_item_slideshow-block_1 #views_slideshow_pager_field_item_slideshow-block_2 - float:left - work well for me :) Take care and THX again for this tutorial. Bart -- Greetings from Poland !
reply
6 van 11
26/02/2012 18:59
Courtney (not verified)

Wed, 07/06/2011 - 23:51 permalink
Is there a way to add new

Is there a way to add new slider images after having set up the slideshow? When I go into +Add Content I can no longer choose the type "Featured Slider". How can I add new images throughout the life of the website?
reply

Sat, 08/27/2011 - 05:23 permalink
Install FrontPageSlideShow
Install FrontPageSlideShow and all you have to do is provide it a few details and Voila! : http://demo.joomlaworks.gr/ Oh, wait .... you're using Drupal ... nevermind.
reply

Mon, 04/25/2011 - 11:19 permalink
video tutorial
A video tutorial - how to create slideshow exactly like on this news image would be nice ! Cause some of the info dosen't work (or I just do somethign wrong) on my page with latest views modules and libraries.
reply
Frustrated User (not verified)

Sat, 04/16/2011 - 10:05 permalink
CSS
Here is the CSS you need to make this work (ish). Be sure to add "stylesheets[all][] = name_of_your_css_file.css;" to your theme's .info file. .views-slideshow-pager-field-item views_slideshow_pager_field_item { display: inline; } .views_slideshow_active_pager_field_item { display: inline; } .views-row-odd { display: inline; } .views-field-field-slider-image { display: inline; } .views-content-field-slider-image { display: inline; } #views_slideshow_pager_field_item_showofslide-page_0 { display: inline; } Edit the number at the end of that last bit as needed for number of thumbs.
reply
Andrs Chanda (not verified)

Thu, 10/20/2011 - 23:17 permalink
horizontal thumbs
Sorry, I'm totally lost, I really don't know how to implement this solution, I mean, do I create a
7 van 11
26/02/2012 18:59
new file with this CSS or do I add it to an existing file, where, which file, etc. Could you give a more detailed explanation on this topic of the tutorial? 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. Thanks, I could manage to make work all the rest but not this part. Thanks again.
reply
Andrs Chanda (not verified)

Thu, 10/20/2011 - 23:21 permalink
Thumbnails on the slide

Just another question, besides the thumbnails that display the slides, also at the slide itself it appears the thumbnail, how can I get rid of it? Thanks again.
reply
soul (not verified)

Mon, 02/06/2012 20:37 permalink
Thanks for this wonderful

Thanks for this wonderful tutorial... I successfully completed the instruction but my thumbnails are still vertically aligned, I want them to horizontal (like your snapshot) or else vertical on the right or left side of the slide (e.g http://www.wisc.edu/). Where can I put this css code, I have almost tried in many css file under my base theme(picuture reloade drupal 7) and subtheme(d7) without success. Please I urgently need this slideshow in my home page... Thanks.
reply
Kashdav (not verified)

Thu, 05/26/2011 - 19:57 permalink
Horizontal thumbnails
Thanks Ciril for a wonderful tutorial (both text & screencast). The thumbnails are lined up vertically now. Can I have the thumbnails arranged horizontally in a single row on the right hand top of the images? Thanks.
reply

Thu, 02/03/2011 - 19:50 permalink
screencast
hey guys, when the screencast will be avaible? i have some problems to follow your instructions. so far thx and bye
reply
Ayela (not verified)

Sun, 02/06/2011 - 00:18 permalink
Wonderful tutorial
Hi Cyril, Thanks for a wonderful tutorial. I just finished implementing views slideshow in one of my sites. Keep up the good work for open source.
8 van 11
26/02/2012 18:59
reply

Mon, 02/07/2011 - 22:59 permalink
screencast
hi, when the screencast will be avaible?
reply
ciril
Tue, 02/08/2011 - 07:58 permalink
Screen Cast is on the way

Hi Friends, Thank you so much fir all your comments, and I promise that I will make the screencast within a week and publish it. I am working in a company and I don't have enough time to write new tutorials. Hope you guys understand my situation but still I will be creating tuts on every Saturday and Subday so may be one or two new tutorial on a week. Best wishes for all the new and old Drupalers. This comment has been typed on an iPhone on a crowded train in Tokyo, sorry for mistakes if any.
reply
Mark C (not verified)

Tue, 02/08/2011 - 14:42 permalink
views slideshow for Drupal 7

I'm seeing a strange phenomenon. I can't get my images to cycle unless I enable the slider widget. Have you experienced this issue???
reply
Heiko (not verified)

Wed, 02/16/2011 - 21:22 permalink
How to enable single frame mode

Hi, many thanks for the great tutorial! There should be a way to enable a single frame mode for multiple images of one node. I could not find any information on how to enable it for the Drupal 7 version. Any hints? Thanks, Heiko
reply
Piccoro (not verified)

Thu, 02/17/2011 - 20:56 permalink
Thank you, Ciril!

Just wanted to thank you for this excellent tutorial, it worked perfectly! I'm currently trying to adapt views slideshow to display Ubercart product thumbnails, but I think it wont be hard. Thanks again, Ciril. Motto Arigatou Gozaimasu :)
reply
igameinfo.com (not verified)

Sun, 02/20/2011 - 10:46 permalink
SLIDESHOW on - Theme danland for D7

Is this possible to apply this on danland theme?
reply
ciril
Sat, 02/26/2011 - 11:17 permalink
Make a copy of the Danland theme
9 van 11
26/02/2012 18:59
Make a copy of the Danland theme to your sites/all/themes folder and then start moifying it. You can edit the page.tpl.php for creating new region. You can edit .info file if you want to re-name or ad new files and so on.
Best wishes.
reply

Wed, 02/23/2011 - 02:06 permalink
Where is the image field

Where is the image field configuration settings page? Looking for hours now.
reply
ciril
Sat, 02/26/2011 - 11:25 permalink
It's right under your nose

1) Go to our content type 2) Click manage field 3) You can see all the fields you have created there, click the edit link of the image field 4)Booom!! there you can see all the default and advanced coniguration settings for the image field.
Note: This process is same for configuring the settings of all the other fields too.
Hope now you can find it. A small advice, Imagine yo bought a new house, don't you look all around your house to where the Kitchen, Bedroom etc are?
reply
Just consider Drupal as your home so that you will feel more comfortable while woking in it.
Best wishes.
Tim (not verified)

Mon, 02/28/2011 09:42 permalink
Which version of Views Slideshow and Views Cycle?

There is no current Drupal 7 release for either Views Slideshow and Views Cycle yet there is no mention of that in your tut? Are we supposed to use the most recent Drupal 6 versions? I saw there were a ton of posts about doing patches last year into this year but it doesn't seem like anyone has solved it as of yet.
reply
ciril
Sun, 03/06/2011 - 11:06 permalink
Dear Friend
Dear Friend,
Please check the system requirements I have mentioned at the top of the tutorial. All the modules used in the tutorial are in version Drupal7.
10 van 11
26/02/2012 18:59
Please double check before you comment.
Best Wishes
reply
Phil (not verified)

Sun, 03/06/2011 12:55 permalink
Great Tutorial, Slide Show timer values

Thanks for the tutorial, I works great. Looking forward to the CSS tips to get the thumbnails arranged horizontally. Were are the timers for the slideshow ? I have dug around through everything I can think of, but I can't find anything. Thanks Again
reply
ciril
Thu, 03/10/2011 - 19:26 permalink
It's just below the effects drop down list

It's just below the effects drop down list.
1) Edit your view 2) Click on the Slide Show Settings under views styles 3) Here just below the effects drop down list you can see "View Transition Advanced Options" 4) Check this on and there you can see advanced settings like timer and so on.
If you scroll down every thing has got advanced options, you just didn't notice it, thats all.
Hope that helps you.
Best Wishes
reply
next
last
11 van 11
26/02/2012 18:59

How To Install & Setup Views Slideshow Module On Drupal7 - Bright Web Design Studio

Caricato da

Informazioni sul documento

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

How To Install & Setup Views Slideshow Module On Drupal7 - Bright Web Design Studio

Caricato da

Copyright:

Formati disponibili

HOW TO INSTALL & SETUP VIEWS SLIDESHOW MODULE O...