Introduction & Project Goal
Hello and welcome to Torontoitedeveloper.com. I am Pety the Torontoite developer specializing in Drupal. And in this video tutorial, we're going to take a look at creating a slideshow for Drupal 7 just like this on the kingsofchaos.ca site. So you'll see here soon as you visit their main page, they've got a slideshow that goes through a bunch of different images that advertise their specific t-shirts as well.
You'll see here we've got some floated text which is actually the title for the image. Um and the image itself has a small pager here which you can float over to see any specific image. And if you float over an image itself, it will pause and you can actually click on it to go to this specific product page. Uh so that's what we're going to create. Let's go ahead and we'll dive right into it.
Creating the Slideshow Content Type
So first things first, we're going to actually need to create some images on our site that we're going to use as a slideshow. So we'll go ahead and create a specific content type for that. And this content type I'm just going to call "front page slideshow".
...images specifically to be displayed on the... I can't type... page. These will not be published by default and I'll explain why in a second. Obviously we don't want typos on our site so we'll call this Image Name, right? Optional is fine. So, unpublished and promoted, we don't want those. The reason why we don't want those is because all these are going to be is images. So, we don't want Drupal to create nodes that people can find and look at when the node is only going to be an image with a name. Um, just a little bit redundant. These are specifically going to be for advertising purposes on our front page slideshow. So, we don't want anybody to be able to access them. So, we're not going to publish them. that won't stop us from being able to display them using views because we can distinguish between published and unpublished obviously.
Configuring Content Type Fields
So, we'll go ahead and we're going to close off comments, all the rest of it, just in the event that somehow someone gets there. Um, and again, menus doesn't... you can take that off because we're not going to put them in menus, but if you wanted to, you could. So, we'll go ahead save and add fields.
Now, we're going to actually remove the body, uh because for the purpose of this tutorial, I'm not going to use it. It is possible if you wanted to to not use the um the title in your slideshow, but use the body and then have a kind of a nice wide image with a body right beside it. That's kind of like a description, a bit of a teaser for an article or whatnot if you wanted to do that. Um but again, beyond the scope of this tutorial.
Adding and Customizing the Image Field
So, we're going to call this the slideshow image. This is going to be an image. Save it as an image. So, it's going to be public destination. So, that's fine. The reason why we didn't choose a default image because we're going to make this always required. Uh, so we'll go ahead. The file structure will be in slideshow so that when we upload it'll be sites/default/files/slideshow so we know that where all of our images are. We'll enable the alt in the title field. Good SEO to do this. Um, I'm pretty sure we can make sure that these are enabled when we do the slideshow, but be honest, I haven't done it in a while. So, I didn't check that when I was running through preparing for this. We're only going to have one value because each node is going to be a specific image. So, that's fine. Public again, no default. So, we'll go ahead and save those settings.
Now, minor thing here, I like to have the slideshow image first because we don't actually create the name until we know what images we're uploading. Um, so minor thing, but I would suggest you do that.
Managing Display and Adding Content
The other thing we're going to go, oops, not edit. We're going to go manage display. So, we're going to be uploading some massive images in this tutorial. And uh you can't really see to make sure that they're formatted properly unless we go ahead and we scale this image. So, we'll call it large. We'll link the image to nothing because I was looking for original, but that's not there. So, we'll go update. If you had Colorbox installed, you could link the image to the original, but again, you're not publishing these, so it doesn't really matter. Go ahead and save.
Now, we'll be able to see it when we actually upload them. Uh, it won't just be this massive picture that doesn't fit on the screen. So, let's go ahead and create some content. We're go ahead add front page slideshow. Going to choose our Bailey pics here or Suzie. So, we'll go with the first one and we'll call this Suzie relaxing, right? So, we can go ahead and save. All this is fine. No revision, no path settings. So, one sidebar here, if you were publishing these and you wanted to create the URL path settings, I would suggest you go to drupal.org/project/pathauto. Um, and then so that all of your paths aren't, you know, your site/content/whatever, you could create images/ and then whatever your path for this specific one would be. And you would find that under search metadata. And once you have path auto installed, there would be another option here to create those patterns. Um, something that I do commonly in all most of my tutorials, uh, especially if you look at Ubercart, I think Ubercart 2 or three, uh, goes through setting up path auto.
So now we see our image is uploaded. So, we have little Suzie. I'm going to go ahead pause the video tutorial, upload a whole bunch more, and then we'll reconvene and uh continue on with video tutorial. No point in you seeing me upload four or five images. So, we'll see you in a sec.
Creating a Custom Image Style
Okay, great. So, I've uploaded five. And now, before we actually go ahead to setting up views, what we're going to do is just go to Configuration, Media, Image styles. And I'll walk you through the image style that I created. The reason why I'm doing this is because my images that I uploaded aren't specifically banner images for my slideshow. I'm going to have Drupal resize them um on the site automatically rather than me having gone ahead and uh created specific images.
There's plus, there's you know positives and benefit and negatives to both. Um positive if you actually created this slideshow is you don't need this uh and your your images will be specifically defined the way that you want them. Um, the negative to that is again a little bit more time-consuming and but you do have control over your site. The positive to having Drupal resize them is that it's all done automatically. You don't have to worry about it. You have your image, you throw it up. Um, you're not too fussed about the specific fine grain controls. The downside to that is you're not really sure how your image is going to turn out when you crop it. These are massive images that I had from a camera. So, uh, you can imagine that the size of them is pretty big and then I'm going to be scaling them down. I don't know exactly how they're going to turn out. Um, but I know that, you know, hopefully they'll uh they'll have the image that I want to portray.
So, the first thing that I did is I chose a a styling effect, uh, and that was to scale. And so, when I did that, I scaled it to 700 wide. And the reason why I did that is because I know my site, if I were creating this, would be about 960. And then I would have 240 for my sidebar, right? And then I would have, you know, plus or minus 10 uh on each side. So, that's where 700 comes in. Um, again, if you've gone ahead and you've created all your layouts and everything, you should know what size you're looking for, so you can scale to that specific width. So, you would uh update the effect. You don't have to add a height because we're only scaling one, right? So, let me go back.
I added a crop, and my crop would take my uh my width that I know is going to be 700, and it's going to crop it to 200. The anchor itself, where it's going to position the picture, is going to be from the middle. So, that's what I've done there. I know there is the possibility to scale and crop together. Uh the reason why I don't do that, it's just an old habit from Drupal 6. Sometimes I would run into problems. Um and so I just like having the controls different. Um but again, totally up to you if you want to go ahead and do that. So now that I know I have banner style, we can go ahead and set up our modules.
Module and Library Installation
So we're going to go over to uh you know, our module setup page here. I'm going to show you what I went ahead and downloaded. So to save a bit of time, I went ahead and got the modules that I needed. So obviously we need views and for views we need to have um chaos tools for this specific uh video tutorial. So you'll need views, chaos tools, view slideshow, and then the view slideshow itself will come with views cycle. Additionally what you need to get is the libraries module. Uh so I'll show you here drupal.org/project/libraries.
And all libraries is is an API. So you're going to download that module. And when you do that, you have to go to your sites/all folder and create a modules folder. So you you typically have modules, themes, now you're going to have libraries. So in doing that, we're going to go over to the views slideshow page itself and check out the documentation because there are a couple steps here that are in addition to typically installing new modules. So at this stage going to assume that you've gone ahead you've installed chaos tools, views, um view slideshow and the libraries API, you've set up the folder for libraries in the sites all folder, um so now we're going to be installing 3.x and the installation here it tells you you actually have to go ahead and you have to download a jQuery cycle plugin. So I've gone ahead and done that but I'm going to walk through it with you.
So you'll click on this link and you're going to get the uh jQuery cycle all latest min.js. The min obviously minimized. So you'll go ahead and you'll download that. I've already done that so I'm not going to do it. Once you download that, you're going to have to rename it to jQuery.cycle.all.min.js. So I haven't done that. So I'm going to go ahead and do that. And then when you do that, you're going to install it. and we're going to place it into the sites/all/libraries folder but in a another folder called jQuery.cycle. So I haven't created that. So we'll go ahead and go new jquery.cycle. Here's my previous file and I have to rename this. So I've gone ahead and done that and dropped it into the folder and then that's it. So now when we go to actually create our slideshow, we should see that option there in views.
Creating the Slideshow View
So let's go back to our site and see if we've done everything correctly. Views, add a view. We're going to call this Front Page Slideshow. Uh you can add a description if you'd like. So this will this this will cycle to specific image nodes uh on the front page, right?
So, we're going to show content of types front page slideshow, newest first doesn't really matter. Uh we're going to create a page. Um we'll just call this welcome, right? This is going to be home. Um and then we would update our site after. I'll show you how to do that. So, we're going to actually do this as a slideshow of fields. Images to display. This will be unlimited because uh I don't know how many images you're going to use. We're going to use a pager. Uh and we'll go ahead and continue and edit.
Great. So, now we've got the title. So, we're going to have to go ahead and add our image, which should be under content. and we'll look at slideshow image. So, we go ahead and add that to the display. We don't want a label. Um, we want the image. We want the banner style. Now, if we want to link this to something, we could do that, but we're not going to. In our style settings, we don't need to do anything. Rewrite results. We should be fine. The only one thing. Yeah. Let's just go ahead and we'll apply that to all displays. Okay.
Configuring View Filters and Settings
Now, obviously, we're not getting anything down here. That's because we have published as yes. So, what we're going to do is remove that filter. Now, well, we're supposed to be seeing our image. Obviously something's going wrong. There we go. So the reason why the delay was was because obviously this is being done dynamically. So uh created the image and now we can see that what we need to do is go to our settings for our slideshow. And when we scroll down here, we're going to choose cycle to fade. We'll pause on hover. And you'll see here we've got a whole bunch of other options if we wanted to do some crazy uh customization, but again we're not going to be doing that. So, um I would encourage you to check those out if you'd like to.
And what we're going to do is add a bottom weight of the pager. So, we're going to fields and what I've forgotten to do is add an extra field. So, we'll just we'll click apply to all because we've got to add one more thing. So what we want is if we go to kings, we want to have these little bullets down here at the bottom. So we do that by adding a global counter. So we'll go to global view result counter. Apply that. Don't want that. Starting value is going to be one. So we'll go ahead apply that.
Okay. So there we see we have the one. So that's good. So when we go to settings here down at the bottom, we're going to say global counter apply to all displays. And then we see we have all of them. Right? Now, what we have to change here is because it's showing us which one we're on as well as 1 2 3 4 5 what I forgot to do is in the global view result counter is exclude from display and then we're going to rearrange. So, we're going to have the content, the title, and then the result. So, we'll go ahead and save this.
Final Steps and Next Steps
And then lastly in this video tutorial, what we're going to do is go to site information. And our homepage is going to be home cuz that's what we created in the view. Go back to the homepage. And here is our slideshow. Obviously, we still got a bit of work to do in the CSS because right now we still have this pager down here at the bottom, which is really ugly. it's all numbers um and we don't have this kind of nice looking um pager as well as the title up in kind of the image floated um and transparent. So in the next video tutorial I'll walk you through some of the CSS that we can do to actually make this look a little bit cleaner, a little bit nicer and then you'll have your view slideshow. But if you already know how to do that, don't worry about it. You have your slideshow set up here in Drupal. You can just go ahead and move on. So I hope that helps. Uh if again if you have any questions, comments, leave a comment on uh on the video tutorial, uh it always helps leave it there rather than trying to find a way to email me directly because everyone will be able to see the feedback that we discuss when you leave a comment. So uh helps everybody. It kind of avoids me getting inundated with emails. But again, if you have any questions, comments, concerns, please leave a comment, let me know. Uh I appreciate the feedback and so we'll see you in the next video tutorial.
