Ep. 1 - Homepage Slider - Advanced Drupal Development

hey guys Jason here with a one-stop how-to you guys bringing you episode 1 of advanced Drupal development now in this episode we are going to be setting up the home page slider content type and the home page slider for our brand new site now we're starting here because it is a good way to get back into Drupal development if you haven't done it in a while now if you do not know what content types are or taxonomy terms or views if all of that stuff is completely foreign to you I really highly suggest that you pause this video and you go back and you watch practical Drupal development because we're not gonna be taking the time to explain some of these basic concepts of Drupal in this series that's kind of what that other series is for now when we get into things that we have not yet talked about such as Commerce and location we'll take the time to really dive into those modules and I'll explain them very well but the idea behind installing modules and installing different libraries and things like that we're not really gonna cover in this video or this series at all just because you know that's what practical Drupal is for so I've installed a couple of things on this site already and that you are going to need to go and grab in order to follow along in this episode and those things are the administration menu module along with the admin amol menu theme you don't have to have that one but I use it just because I like it see tools link and the wait module entity API entity tokens library views view slideshow and I will have links to all of these below just make sure you got grab them if you don't know how to install a module on your site like I said go back and watch practical Drupal development if you do grab those from the links below don't forget that view slideshow cycle requires the view slideshow dot cycle are the views the jQuery cycle library so make sure you download to that as well and there is a video in practical Drupal development about how to do that so the first thing that we want to do real quick here is just clean off this default layout we don't need this stuff here and we don't need the powered by Drupal stuff so let's real quick going to structured blocks and let's just clear off like the system menu we want to make sure we leave the main page content but the stuff in the sidebar we're gonna go ahead and get rid of and also the powered by Drupal in the footer we're gonna go ahead and get rid of that as well so that should give us a nice clean front page here so now we're going to start by creating that home page slider content tight so structure content types add content type we are gonna call this home page slide and we're gonna call that because each one of these is only gonna create one slide for the slideshow we are going to say content of this type will add a slide to the home page slider and we're gonna do that for the people who are gonna actually be editing this site so they know what this is we are going to unpublish from the front page we're gonna turn off the authoring information we are gonna close the comments now we are are actually going to make them hidden we are gonna leave the comment lands alone because we're gonna use it later on in the series and we're gonna take this out of the menu now one thing you might notice that's different is weight is no longer a global content type option with the the latest version at least it is now a feel double entity so that's going to be one slight change from practical Drupal development so we're gonna save here and add fields now if we go back and take a look at our website mock-up we can see we need a title we need a body and we need a link field and luckily Drupal by default provides us with the title the body and we need to do is add the link field and the image fields so let's go ahead and start by adding a link field in here and because our link has a customizable text field here this isn't just a URL when we save this through we want to make sure that we actually require the title so that we don't end up with a slide that just has a long URL string as its content we also need to add the image here now we are we can do this either one of two ways we can use the existing image field that's already provided by Drupal or create another one I'm actually gonna use the existing image field that way we actually saved space within the database and we don't create another database entry and we can kind of use this same field we're gonna turn on the alt in title tags and we're gonna save that and I like to have mine underneath the title you don't necessarily have to do that it's just a preference of mine so I'm just gonna move it and save it now we will be managing image crops slightly different in this series that we did in the last one we're going to take a look at a different module that's a little bit more complex and offers more variety as far as what you can do with it so that's why it's okay for us to reuse that image field so now we're gonna go ahead and we're gonna add some content here to our home page slider and our first slide was advanced Drupal and I'm going to grab an image here that matches that and I got all my images from unsplash.com it's a great place for free stock photos you can go anywhere to get your images though it doesn't really matter and we are going to say learn to program like a master and we're gonna say the courses and for now we're gonna link this to the front page because we we really don't have any other content to link to right now so we're gonna go ahead and save that we're then gonna add another slide just to make sure that our slideshow is working I'm gonna call this one practical Drupal and we're gonna add another slide image here and we'll say learn the basics of Drupal and just for a little variety we're gonna save you this course and also link this to the front and we're gonna save that so now let's build our slideshow we do that by going to structure views and add a new view and here we're gonna call this homepage slider it is of type homepage slide we don't need a page for this we just need a block and we're gonna remove the title here instead of an unformatted list we want to take a slideshow of fields and we're gonna continue and edit this we already have the title in here but we don't want this title linking to that default homepage slider node because that's kind of useless so we're gonna uncheck that and we're gonna apply and now let's add in the other fields that we're missing from this homepage slider I'm just gonna type in slide in the search box and that'll give me the body the image and the link as well so we're gonna remove the labels off of everything here and we're gonna set this to the large image for now we will be changing that when we look into our image crop module that's coming up and we want to leave the title as low link so that's all good now we're gonna do some reordering and we're gonna reorder this a little differently than you would think we're actually gonna put in the body right before the image and it doesn't matter really where the other two are now the reason for that is because if you look at our mock-up we have this whole text section kind of in the middle of this slideshow centered vertically here in the middle now we can do that by moving each one of these individual fields down when we use the CSS but if this were to break off into two lines or this it really starts causing issues within the CSS because now we have to adjust for that stuff so what we want to do is actually wrap this whole text area collectively together and move it as if it was a single unit so in order to do that we're going to come into our title and we're gonna exclude it from the display we're gonna come into the link and we're going to exclude that from the display as well and then we're gonna come into the body here and we're gonna rewrite the results of the body and what we're gonna do is we're gonna create a div in here and we're gonna class it as wrapper and then we're just gonna come down to our replacement patterns and we're gonna copy the body the title and the link and we're gonna paste those in there and get rid of this unnecessary text here that we don't need so let's get that out of there and we definitely want the body up before the link and then we're also to give ourselves even further control here we're just gonna wrap each one of these and add in themselves so that we can say this one has a class of title and this one has a class of body and then a class of link and let's not forget to close off our divs there and that's just gonna give us further theming control over this as well so now we have this here it's all wrapped together collectively in a div and we will save this all right so now we're gonna go into structure blocks and mine actually is already on here because I was running some practice earlier for this video and it just kind of saved the position data even though I deleted everything but normally it will be found down here in your list and what you're gonna do is you're gonna configure that block set it to the highlighted section of the Bartik theme and make sure that it's only available on the front Paige because we don't want this showing up everywhere we just want it on the home page so now if we go back home you can see that we have our home page slider there if we wait a second that slideshow should transition just like that this is wrapped together collectively in a div and if we inspect the element here we can see that this in fact is wrapped together collectively in the dim that we wanted so that's perfect the only other thing we need to do is now add a weight to this so we go to back into structure content types our home page slide and manage the fields here remember I said that weight is no longer a global property so we need to come in here and add a weight field and weight is now a feel double entity so we're gonna select weight from this we want to make sure they would its weight selector as that's our only option and we're gonna say that our range really only needs to be about five and this is one of the nice things about weight being a feel double entity it no longer is defaulted to just 20 or 10 you can kind of limit this down to just the amount that you need so we're gonna go ahead and save that and now that we have that in we'll come up to content and we're gonna edit each one of our slides we want advanced drupal here to be our lowest negative 5 weight and we want practical drupal to be set at negative 4 and that's not gonna change anything here because we in our view are still sorting this out by post date and that's not what we want we want to add in the sort criteria that weight field from homepage slider and let's go ahead and save that leave it sorted ascending and let's get rid of this post stage here and save that so now we have our homepage slider defaulting to the first slide that we wanted it to and it's rotating just fine and we have our homepage slider setup and that's exactly what we were planning on doing in this video I know it seems like a very practical Drupal place to start but it's a great way to get our feet wet again get back into this kind of remember how Drupal works and the structure of everything like that so in the next video we're going to move on to probably setting up the About section so that we can get this same we're gonna add our little welcome message here and probably get this set up so we'll see how far we get within that next video I want to take these first couple of videos and just knock out all the practical Drupal stuff so that we can start diving into the new topics the new advanced stuff and things like that so I hope you like this video I hope you're kind of glad to be back into it I know I am if you did make sure you give the video a like subscribe to the channel and I will see you in episode 2 of advanced Drupal development later guys

Channel: OneStop How To Guys

Views: 21,286

Rating: 4.8249998 out of 5

Keywords: Drupal, Drupal Development, eCommerce, Location, Slideshow, Views, Views Slideshow, Homepage, HTML, CSS, Website Development, Website

Id: YBl_uIfwka0

Length: 14min 26sec (866 seconds)

Published: Sun Mar 13 2016