Drupal 7 Views Slideshow

By shane
Thu, 2012-12-13 18:17
Daily Dose of Drupal Episode #67

Share with Others

Note: In this video I do not mention that you need the jQuery Cycle plugin installed to get this working. I already had it installed in my video. You can see information on how to do that in steps 3 through 7 on http://drupal.org/node/903244

The Drupal 7 Views Slideshow module makes it easy to add a slideshow to display rotating content on any Drupal 7 website.

In this episode you will learn:

  • How to create a simple Drupal content type with an image field to use for the Views Slideshow
  • How to create a block that displays as a Drupal 7 views slideshow
  • How to rewrite the Drupal views output so you can more easily style the slideshow with CSS

We also have a Drupal views introduction video if you are new to Drupal and views.

Hello there everyone and welcome to another Daily Dose of Drupal, today we’re on Episode Number 67 and as always I’m Shane, you can follow me on Twitter @smthomas3, you can go to Google + and find me there, also go to codekarate.com and click on this link here to see the other Daily Dose of Drupal videos if you haven’t watched them already and if the contents is still active when you watch this video you can sign up to or for a chance to win a free Drupal book, also sign up for the newsletter if you haven’t already but let’s go ahead and get started.

We’re going over the Views Slideshow Module today and this is the slideshow that I used probably 95% of the time that I need, any type of slideshow on in any Drupal site I built, it just works well, it’s easy, relatively easy to configure and you can have it not only just slide between different images but you can have various types of contents within a slide between different nodes.

So we’ll go ahead and get started with showing how we can use this; if you haven’t used this before I would highly recommend trying this one before trying any of the other slideshows out there just because in my experience it’s been the easiest to use. There are other ones that have or maybe a few more features but some of those it can be a headache to get set up and it require other types of J Query libraries and things like that. So I’m going to head over to the modules page and I have downloaded this module but I do not have it installed yet.

So as you can see I already have Views installed which you’ll need, so Views and Views UI are installed. When you download the Views Slideshow it’s going to have Views Slideshow and Views Slideshow Cycle.

So we’re going to go ahead and just go with Views Slideshow for now and we’ll come back to the other one here a little bit. So go ahead and save that and we’re now going to create a quick content type and we’re going to call this just Slideshow just to keep it simple, keep everything else the same and we’re going to manage the fields here, we’re going to add an image field and we’ll leave that as public files, go ahead and save it and we’ll go ahead and we can change this if we needed to change any of the settings but I’m going to leave them at the default just to keep it simple and slide is up here and we’re now going to add just a few pieces of content.

So we’re going to go ahead and add some slideshow images, just grab a couple of images here and save that, also go ahead and add another one, save that one as well. If we come back to the homepage you can see that this two are showing up here but we’re going to create just a Views Slideshow block that’s going to sit on the top here in this section.

So let’s go ahead and start by creating a View; we’re going to add a new View, we’re going to just go ahead and leave contents of types slideshow, we can call this Slideshow for now and we could create a page, we don’t want to do that, we want to create a block, the format is going to be slideshow and we’ll go ahead and say Fields, we’ll go ahead and continue and edit from there.

So you can see it change the format here to slideshow so you normally wouldn’t have this be grand or a table and this added a new format, the Views Slideshow Module so we can select that and you can change the settings here, you can add a specific row class, you can set list type, different styles and just change the way that it displayed here, I’ll go ahead and just apply that.

Now we get to select our fields; we’re going to select our Slideshow Image Field and Formatter; we’re going to leave it as Image … let’s use medium style image and it kind of link to we’ll say the content, we don’t want to label it in this case, let’s go ahead and apply that.

Now we can go ahead and save this, it’s not going to be much to show yet but we’ll go ahead and open up the blocks page and I’m going to go down and find this block here, you can see its Views Slideshow, I’m going to drag it up to the Featured section, I’ll save this, after coming to the homepage it says No Mainframe Module is enabled for the Views Slideshow.

So that of course means we need to come back to the modules page and enable … so you can go ahead and search for this to make it a little easier, we need to enable the module that’s actually going to display it which is this Views Slideshow Cycle, let’s save this, you also need to enable the libraries module so you have to make sure you have that installed as well and make sure if you have any troubles with installing this you come to the Views Slideshow page on drupal.org and you can read the various documentation on how to get this thing installed and working.

So now that we have this installed, I can see it’s been installed so we go back to our View and refresh this to make sure everything is up to date, so make sure that as you can see now I refreshed the block and it shows at least one image and it flips between two images. You’ll notice that text actually changes with the image. So it’s working but it’s still not nearly what we want it to be.

So now that we have that Rotator Module or the Cycle Module I guess turned on as well we can come back into settings and you can that there’s some additional cycle options here; you can select the different effect, it can select if you wanted to pause on hover … so it just gives you a few different options as far as how you want that to work and I also thought there was … yeah there’s some additional options if you look at some these advance options here as well.

So as you can see there’s a lot of configuration you can look at but the main goal is just to get it up and working. So let’s go ahead and change this image style to Large and apply that, that’ll make it a little bit better there, I’m also going to add the body field and I’m not need a label for this and I’m going to rearrange this a little bit. So as you can see down here in the example I have the title and the text.
What you can then do with this is let’s say that you for instance wanted to pull this text to the side or you wanted to pull this text up. An example of this would be my company’s website here, just a View Slideshow, as you can see this is text setting over here on the right where this is an image.

It’s all created with Views but it switches as the slide’s filter through. So we’ll go ahead and we’re going to do something that’s really simple here; you’re going to have to know a little bit of CSS for this, I’m not going to go through how to actually apply the CSS but if you have a theme and you are competent with CSS you should be able to figure this piece out but Views actually can allow you to rewrite the output of certain fields. So let’s say for instance you want to have a Div Structure that wraps this title and this body so you can float it to the right.

A couple of different ways you can do that; you can go in here into the Body and just click rewrite results, click you want to rewrite the output of this field then in the replacement patterns you’ll see you can use the title and the body. So what we can do here; you can do Div class = slideshow text wrapper or whatever you wanted your class to be, you can put the title field and then the body field and then that would allow you to add some CSS to flow at this on the right side of the image or pull it up so it’s over laying on top of the image, whatever you wanted to do, let’s go ahead and save that then we’ll come back into this title and we’ll click exclude this from display so it doesn’t show up twice, you can also add a blank field in there and do the same thing but I just add ... route the output of just this body field, if we come back here things should be looking a little bit different, you can notice that it should flip here in a second as it does and you can change this the format of this image, you just have to come in and change the image style but I’m not going to go over that, I went over that in the previous post but you can change this to be formatted in a specific image size so you don’t have to upload consistent size images so that’s kind of nice, just go into your image styles and you can create a new style and you can use that in the view or you can edit one of the existing styles, in this case we’re using the large image style. Important thing to take note of though is if we hover over this you’ll see we have our slideshow text wrapper here that’s wrapping this content.

So as you can see that we could then float this to the right and we can also or we might actually have to do a couple of other things but we actually have to float this piece I guess to the right and float this left and it would probably work, it’s starting to move but you can get the idea that you could overlay this on top.

But you get the idea; if you had some CSS you can move this text around and as you can see every time I flipped it resets that because it goes to the next slide but you can pull this up so you can overlay it on top and you could set it over here, you can change that mark-up structure and you may need to do in here, just go ahead and add a … if you go in under global you can add a custom text and you can build out some HTML mark-up for that way as well.

So you may actually have to wrap the slideshow image in one Div and then wraps this title in body and other Div. It really depends on how you want to do it but that can get you started and as you can see it’s realty easy to get the basics of the slideshow going, this doesn’t look pretty by any means but it is working and you can then take that and add some styles to it and make a great looking slideshow.
As you can see the links worked, it brings you right to the post so it just makes it nice and easy. That’s all for this time on the Daily Dose of Drupal, went a little long but hopefully it will help you if you need to build a slideshow, just go ahead and follow me on Twitter and I’ll be back again next time. Thanks for watching.