Custom home page in Drupal 7 using Views (part 1)

after first adding some content to their Drupal site most people notice the front page is just a dump of all that content they've just created but it doesn't have to be that way this video will show how to use views to customize your site's front page so it introductions over let's get stuck in clicks structure and click views down at the bottom click add new view and type recent posts this is correct because we are creating a page but we do not want a title for it so delete the page title going to want to note this URL down for later and the items to display as three with that done scroll down and click continue and edit will take us into a more advanced edit screen first thing we're going to do is set up paler how Drupal uses paging so under page a click use pager full and so to display a specific specified number of items this actually means that we turn the page our off and click apply items to display three yeah those settings are correct so hit apply again the pager in Drupal means the previous/next links and page numbers as well now we have our basic view created click Add next to page and in the drop down list click attachment scroll down and then the pager click 10 items you have to change the offset here to 3 the reason for this is that we've already printed the first three items on Paige display so we don't want to print them here too so let's set that to three click apply now we need to tell the attachment what to attach itself to so click on Paige and apply now we need to tell it whether to attach itself before or after the thing that it's attaching to in this case the page by default its before we want after so change that and click apply like the page display this is currently an unformatted list and it actually needs to be a table so over under format and click unformatted list change the four to this attachment which means it doesn't turn our main page into a table as well so click table to change it and then click apply some very exciting settings they are all okay now I've only got one field at the moment and we need to add some more so under field click add we're going to phi content post date and user name find bios you can use the search box at the top to filter it and once you've ticked them both click add and configure fields at the bottom this is the configuration page for the posted date column in our table anything we want to change here is to remove the colon after the label as I wouldn't look right in a table click apply next we get the configuration page for user name I want to do two things here firstly remove the cola after the label and as name is a bit Aang ambiguous we're going to change it to author so that's the author of the content and click apply next we just want to rearrange the field order so under fields and the little drop down arrow next to add click sort so bring up the settings page and this little drag handles off to the left so click and hold content and content post date say post date and drag it beneath author and then click apply last thing to do is give this attachment a meaningful name so under display name at the top left click attachment and change it to recent posts table and click apply finally our view is complete so what we have is three what we call node teasers so much like you get by default but only three followed by ten more recent posts in a table beneath them if we scroll down we should be able to get a preview of the table this is something that views provides and that's what our table will look like scroll back up again and if I click page up at the top under displays scroll down again and there's the preview and in fact that also gives us the attachment so you can see what it's going to look like and our view is finished so scroll back up to the top and click Save now we need to take this page view to be the home page of a drupal so click configuration at the top then under system and click site information scroll down to the front page section and under default front-page into recent posts that's the URL we saw when we first created the view once you've done that scroll down and click Save configuration now that's finished so click the little home icon up on the top and the toolbar and this is the new front page scroll out there's our table and these are our three article teasers there's a lot more that can be done this is a good start next we'll create another table which will go at the bottom of the ten most commented posts on the site and we'll do that right now click structure views this should be familiar add a new view as the view name enter ten most commented you'll see I've done this before in this case we are going to create a block instead of a page so uncheck create a page also it's not going to be an unformatted list it's going to be a table wait while it updates need to change the items per page to ten then click continue and edit as it is this view won't do marches just a table of recently created content so we'll start by adding a filter so under filter click add we only want content that has been promoted to the front page which is what will tick adding configure filter criteria promoted to front page click yes then click apply now let's add a couple of fields under fields click add you going to find the comment count and click add and configure feels like our previous table view we don't want to : after the label comment can is fine then click apply we also want to add user name field I could have checked both the first time so find user name and also remove place a colon after the label when our previous view we called it author so we'll call it author here too as the label then click apply now the fields have been added we need to put them in the right order click under field click the drop-down arrow next to add click sort from the list and drag comment count down beneath the author name and then click apply now we need to add a sort criteria so click Add under that section and look for comment count ticket then click add and configure sort criteria make sure this is set to sort descending then click apply now under sort criteria again click the drop down arrow then click sort much like add to field so what we're saying two views here is that we want to we want to sort everything by comment count then by when it was posted so comment can is the most important factor in sorting once you put comment going to the top click apply let's have a quick look at the preview before moving on that's what the table that's going to look like let's scroll back up click Save on the view now that we've created a block we need to actually position it on the page and only on the home page so to do that click structure from the toolbar then blocks in the disabled blocks right at the bottom we will find our view view 10 most commented in the drop-down select content now it will have appeared in the content region up here you can see it highlighted in yellow with a little star next to it we want it below the main page content so drag it below using the drag handle now we've got it positioned scroll down and click save blocks then scroll down again find the content region and look for the view 10 most commented and click configure we don't want to block title but we do want to only listed on the front page so the visibility settings pages make sure only the listed pages is set then enter this front in the text box and click Save blocks save block rather with that done we should be able to return to the home page and see our new table scroll down there it is the 10 most commented by no means is this everything that views can do next time will look a little deeper and create a few more blocks that will give you some ideas for how to customize your home page feel free to play around with the views and come and comment on the webmaster forums and pass questions if you get stuck with anything we'll be glad to help so good luck I hope you've enjoyed this and that your views and homepages turn out great

Channel: aPaddedCell

Views: 62,374

Rating: 4.875 out of 5

Keywords: drupal, custom, front, home, page, views, drupal7

Id: 4WOeRgtuobg

Length: 13min 24sec (804 seconds)

Published: Thu Jun 09 2011