How to Create a Drupal 7 Slideshow with Views: Tutorial 1 of 2

[Music] [Applause] [Music] hello welcome to our website developer com IMPD or speed eternal estate developer specializing drupal and in this video we're gonna take a look at creating a slideshow for drupal 7 just like this on the kings of chaos lot CA site so you'll see here as 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 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 so that's what we're going to create let's go ahead and we'll dive right into it 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 in this content type I'm just going to call front page slideshow images specifically to be displayed can't type these will not be published by default and I'll explain why in a second obviously we don't want a pose on our site so we'll call this image description actually image name it optional is fine so I'm published and promoted we don't want those the reason why we don't want those is because all these are going to be as images so we don't want Drupal to create knows that people can find and look at when the note is only going to be an image with a name just a little bit redundant these are specifically gonna be for advertising purposes on our front page slideshow so we don't want any of you need 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 colors Menem and publish obviously 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 and again menus those are 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 gonna actually remove the body 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 title in your slideshow but use the body and then have a kind of a nice wide image with the body right beside a--that's kind of like in the description a bit of a teaser for an article or whatnot if you wanted to do that but again beyond the scope of this tutorial so recall us 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 gonna make this always required so we'll go ahead the file structure will be in slideshow so that when we upload will be sites default files slash slideshow so we know that we're all of our images are will enable the alt in the title field good SEO to do this I'm pretty sure we can make sure that these are enabled when we do the slideshow but you notice I haven't done in a while so and it checked that when I was running through preparing for us we're only gonna have one value because each note 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 my anything here I like to have a slideshow image first because we don't actually create the name until we know what images we're uploading so minor thing but I would suggest you do that the other thing we're gonna go whoops not edit we're gonna go manage display so we're going to be uploading some massive images in this tutorial and you can't really seem to make sure that they're formatted properly unless we go ahead and we scale this image we'll call it a large length image - [Music] nothing because I was looking for original but that's not theirs we'll go update if you had color box installed you could link the image to original but again you're not posting these so it doesn't matter go ahead and save now we'll be able to see it when we actually upload them we'll 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 I'm going to choose our Bailey pics here or Susy so we'll go with the first one and we'll call this Susy relaxing right it's been 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 URL path settings I would suggest you go to Jupiter or slash project slash path auto and then so that all of your paths aren't you know your site / content slash whatever you could create images slash 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 something that I do commonly in all most video my tutorials especially if you look at new Burkhardt Nick Cooper cart two or three goes through setting up path autumn so now we've seen our images uploaded so we have little Suzy I'm going to go ahead pause the video tutorial upload a whole much more and then we'll reconvene and continue on with video tutorial no point you see me upload four or five images so we'll see in a sec okay great so I've uploaded five and now before we actually go ahead to setting up views what really 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 gonna have Drupal resize them on the site automatically rather than me having gone ahead and created specific images there's plus there's you know positives inventive and negative stuff both positive if you actually created this slide shows you don't need this and yours your images will be specifically defined the way that you want them the negative to that is again a little bit more time consuming and but you do have control over your site the positive dynamic 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 you're not too fussed about the specific flying game controls the downside to that is you're not really sure how your images are gonna turn out when you crop it these are massive images that I had from a camera so you can imagine that the size of them is pretty big and then I'm gonna be scaling them down I don't know exactly how they're gonna turn out but I know that you know hopefully they'll I'll have the image that I want to portray so the first thing that I did is I chose a styling effect and that was to scale and so when it 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 on each side so that's where 700 comes in 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 update the effect you don't have to add a height because we're only scaling one right so when we go back I edit a crop and my crop would take my my width that I know is gonna be 700 and it's gonna crop it to 200 the anchor itself where it's gonna position the picture is gonna be from the middle so that's what I've done there I know there is the possibility to scale and crop together the reason why I don't do that just don't have it from Drupal 6 sometimes we run into problems and so I just like having the controls different but again totally up to you if you wanna go ahead yeah so now that I know I have banner style we can go ahead and set up our modules we're gonna go over to you know our module setup page here I'm gonna show you what I went ahead and downloaded so 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 chaos tools for this specific video tutorial so only 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 so I'll show you here we pulled up or such project such 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 gonna have libraries so in doing that we're gonna 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 I'm gonna assume that you've gone ahead you've installed cast tools views view slideshow and the libraries API you set up the folder for libraries and the sites all folder so now we're going to be installing three-point 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 gonna walk through it with you so you'll click on this link and you're gonna get the jQuery cycle all latest min j/s the men obviously minimized so you'll go ahead and you'll download that I've already done that so I'm not gonna do it once you download that you're gonna have to rename it to jQuery cycle all dot Minjae yes so I haven't done that it's trying to go ahead and do that and then when you do that you're going to install it and we're gonna place it into the sites all libraries folder but in a another folder called jQuery dot cycle so I haven't created that so we'll go ahead and go new J clearing 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 so let's go back to our site and see if we've done everything correctly huge add view where you call this front image slideshow you can add a description if you'd like so this will this will cycle specific image knows on the front page right so we're going to show content of types front page slideshow notice first doesn't really matter we're gonna create a page we'll just call this welcome right this is going to be home and then we would update our site after I'll show you how to do that so we're gonna actually do this as a slideshow of fields images to display this will be unlimited because I don't know how many measures you can use we're gonna use a pager and we'll go ahead and continue an edit great so now we've got the title so we're gonna have to go ahead and add our image it should be under content and look at this slide show image so we go ahead and add that to the display you don't want to label 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 mm-hmm and 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 multiply that to all this place okay now obviously we're not getting anything down here that's because we have published as yes so what we're gonna 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 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 ranchers cycle and a fade well pause on hover and you'll see here we've got a whole bunch of other options if we wanted to do some crazy customization but again we're not going to be doing that so I would encourage you to check those out if you'd like to and what we're going to do is add a pager at the bottom way to the pager so we're going to field and what I forgot to do is add an extra field so we'll just we'll click apply at all because we're going 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 go to global you resolve the counter by that don't want that starting value is going to be 1 so go ahead buy that okay so then we see we have the one lots good so when we go to Settings here down at the bottom we're gonna say global counter apply to all displays and then we see we have all of them right now what we have to change here because it's showing us which one we're on as well as one two three four five what I forgot to do is in the global view result counter its exclude from display and then we're gonna rearrange so we're gonna have the content the title and then the result so we'll go ahead and save this and then lastly in this video tutorial what we're going to do is go to site information and our home page is gonna be home because that's what we created in the view go back to the home page and here is our slide show obviously we still got a bit of work to do in the CSS because right now we still have this painter down here at the bottom which is really ugly it's all numbers and we don't have this kind of nice-looking pager as well as the title up and kind of the image floated and transparent so 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 if again if you have any questions comments leave a comment on on the video tutorial 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 it helps everybody kind of avoids me getting inundated with emails but again if you have any questions comments concerns please leave a comment let me know the feedback and so we'll see in the next video tutorial

Channel: Web Development Tutorials

Views: 117,861

Rating: 4.8461537 out of 5

Keywords: drupal 7, slideshow, drupal views, Tutorial (Media Genre), Drupal (Software)

Id: sXh8Ng9QNaA

Length: 16min 49sec (1009 seconds)

Published: Sat Oct 27 2012