Multiple Views Part 1

By adam
Thu, 2014-08-14 06:50
4 comments
Daily Dose of Drupal Episode #162

Share with Others

In this episode, you will learn how to set up the foundation of building a view that can display content in multiple ways. This video highlights how to set up the content type and view to display the content. In the coming videos in this series, you will learn how to style and apply jQuery to change how the view displays the content.

Need help learning views? Look at our Drupal views intro.

Hey Everybody! Welcome to another Daily Dose of Drupal, this is Episode Number 162. I am Adam and today we’re going to be changing things up slightly. I’m actually doing a three part series on No Module in particular but a couple of modules and some Java Script and some CSS so you need a little bit of everything. But the end goal at the end of the three videos will be to display something similar to this. The ability to easily switch between the same view but change the layout based on if you want a grid or a table listing in the view.

So you’d be able to see how I build the view, how I styles the view and how I used J Query to switch between different modes and add classes to the CSS that change the look and feel. So in this video we’re actually just going to build the view. The Content Type View, kind of all the framework, backend and the next video we will do the J Query and the last one we’ll style it up and make it look really nice.

Quickly before we get started, make sure to head over to codekarate.com and sign up for the newsletter and also check out the EBook recently released and then you can also follow myself at AdamLearing on Twitter or Shane at smthomas3, I appreciate that. So let’s get started; so the first thing to build the functionality, again if we look back here we’re looking at…these are courses but we’re just going to make a new content type, we’re going to call it Players, Football Players since it is football season.

So if go into my content type, I’ve actually already made my content type Football Players and if we look at the field I’ve added a few fields as well. The Title or the Name, Bio, Picture, Weight and Height. So these are the fields we’re going to use in the displays and then we’ll change how they layout based on doing it on a grid or a table. So once the content type is created and again obviously you can customize this with the fields you want. Next thing you do is create the view that’s going to you as how as all the fields.

So actually the first thing we’ll do, let’s create some content so we have something to show in the view. We’re going to add content, we’re going to add Football player. I myself, I’m a 49er fans so I’m going to add some 49ers here. Jump text, I’ll blow a picture of this, this is actually going to be a picture of me, just take your time, weight in pounds.

So we’re going to go ahead and just save that options. So obviously we’ve created a football player Jerry Rice and on that and let’s upload a script one more, switch to a different football players. So now we have two different players created, Steve Young and Jerry Rice. So from there, now we have some content that we can build and view and display this in the view. So obviously the created view is going to structure and we go to Views and then let’s add in a new view. Let’s call these Players, we’re going to create this as a block and we’ll drop it on the page.

So similar settings here, we’ll obviously…this is very important when we get the styling that we want just be set as an unformatted list. That’s the easiest way to do what we desired. My outside page here, let’s set that to zero so it’s unlimited, and then let’s keep going. Alright so here we go. Here we’re going to build our view. So the first thing, let’s get all our fields added that we want. So here’s our Football player, let’s get the weight, picture, height and body, [inaudible - 0:04:47.8] all is default and then we can configure these fields.

For all these fields we’re actually going to rewrite the output of the view. So we want to exclude all of them from display. We’ll make sure you check the Exclude from displaying all of these. So now you see that we need to filter where our content type, which is…select content type and we’ll select Football Players, we’d want our football players. And then you’ll see here our view is starting to come together. We see Steve Young and Jerry Rice and the reason I’m not seeing anything else is because we excluded those from the view which I forgot to do about the title so I’m going to do that real quick. So exclude that from display as well.

So now we see nothing because all our filters are excluded. But hopefully you’re probably familiar with, if not you…this is a really pro tip with you’re using Views is you can rewrite output of the Views using Custom Text Field and you can customize the HTML within that. So we want to drop the label but inside there’s text field, you’ll see we can use this thing called Replacement Patterns and here all the fields that I’ve added to View.

So I can simply paste in all of the replacement patterns here and then they will display in the View and I can customized the HTML around it which is what ultimately we’re going to do here. Just a second. Get all these and first then we’ll move them around. So just to show you how it’s working here, if I just save this or apply this right now, you’ll see here’s my view and now it starts to display things and now as I printed out some of the names, the body field, the picture, excuse me, the height, the picture and the weight. So it matches up with how I have it in my Custom Text Field.

It’s important to note that any field that you want to use as replacement patterns have to be sitting above the custom text field. So if I would have happened to have weight sitting below the custom text I wouldn’t be able to reference that field. It’s important to have them all above that to use them. But obviously we want some HTML wrap around here because it’s pretty unusable. Without that it just doesn’t give you anything to style off of or use J Query with.

So what we’re going to do is we’re just going to wrap this in a wrapper and we’re going to call it Wrapper and then we’ll pull that off, and then on each of these it’s kind of to you how you want to style them. I kind of like to use heading tags as possible, so I’ll wrap my title in each too and body over wrapped to the paragraph, I’m going to wrap my height with all in this biz with the classes representing the fields. And this might change a little bit once we get the style and we can usually drop in the view and change those but for now since they don’t necessarily know exactly how I want it to look. I’m just going to give it some generic classes so we can get to the point of styling it. And then one more here, alright so as you can see right now, so we built this really simple div structure here, a div wrapper with an [inaudible – 0:08:51.4] a few tags and a couple of other div within it.

So if we apply that to Display, you’ll see that now time has changed here, still look relatively the same but if we go to…let’s save that actually, I’ll make sure it’s saved. Okay so now we have…let’s actually give this a main name. Okay let’s just get to the end of seeing the view in action here so let’s add the view to a page which is where I will end up having all of that. So we got a content, we’re going to add the page to show this view on, one moment. There’s the page. Alright let’s save that real quick. So we have a path of node 24. Alright so if we go to Structure, going to the blocks, you can remember when we made our view as a block we will see football players down here…right here, view football players.

Let’s add that to the content and save that real quick and then we’re just trying to make sure you only want to show that on that node page and not on every page. So if you configure that only on listed pages we’ll paste it in node 24. So that will only show up on the football player. That’s good and then if we just reload this page, here we go; so now on the Football Player stage here’s the team, here’s our View. So we have Steve Young there and we have Jerry Rice there.

So obviously that’s pretty basic, obviously just adding a content type configuring the content type and then obviously building the View to display the page but again it’s said, the other two videos here we’re going to get in the more technical stuff about how to build the correct div structure to display the different types of views. So here’s a real quick before I sign off here, I just want to show you here’ sour div structure that we built.

So here’s our class of wrapper which I gave H2, the P tags and then the height, pictures and weights getting displayed. Again I said we’ll probably all end up changing that a little bit once we start styling it but this gives you a general idea of at least how to get the foundation set up to get to step 2 which will be again styling the views and making the views look like this and then third step will end up running the Java Script and stuff like that to change the view styles. Alright guys that’s all for today. Again this is Adam of Code Karate. If you have any questions or anything in the meantime, feel free to email me at adam@codekarate, otherwise we’ll talk to you later. Thanks guys.

Comments

Thank you for your tutorial. I have never used before custom text field in views for output layout.
If i use Display Suite in my View with my oun view mode, instead fields does it work the same?

Honestly, I don't know the answer to your question. My hunch is that once you get your display working correctly in views, you would be able to use the custom text field and rewrite the results however you would prefer.

Does anyone else out there know how display suite works with views?

Post new comment