Multiple Views Part 3

By adam
Mon, 2014-08-25 08:23
Daily Dose of Drupal Episode #164

Share with Others

In the last installment of multiple views you will learn how to change the look of the view using the two classes you set in the previous video. By using CSS, you will be able to display content in two ways depending on the choice of the viewer. This is a nice advantage to provide options for the visitor to your site.

Hello everybody and welcome to Episode Number 164, the Daily Dose of Drupal. And today is we’re going to finish up the three part series on Multi Views. We’re looking up a little bit of styling on how to change a view look based on a class that were split now with some Java Script. Before we get into all that, we’re going to do a little housekeeping things.

Of course make sure to check out and the EBook there. It’s been going really well but a little over a month now it had a lot of success. If you have purchase it on the past, let us know what your thoughts are, if you have it purchased I appreciate I appreciate if you did and let us know what your thoughts are. Also a few other things, you’re going to let us follow us, Shane and I on Twitter at AdamLearing and at smthomas3. Shane would be better to follow there. He actually post some more stuff than I do, so check that out. Other than that let’s get down to the video and showing you again a little bit about how to style the view based on the class that you’re dynamically putting out.

So to get started, let’s hop over to my previous example of what we’re actually trying to pull off. If you look at part 1 you’d see this but what we’re trying to do is depending on if we have a List or a Table View selected, we want to display different content. I shouldn’t say it’s a different content. It’s the same content, just displayed differently. So if I pull up my code here little quick, you’ll be able to see that when I switch between.

So as it is loading here, let’s see how we can pull and we can see that we have a list or a class changing when we click. So you see right now we’re on Grid view, we switch over to List view and when we do that we’re calling different CSS which is changing the look of the view even though it’s still displaying the same content from the same view, it looks a lot different based on this class. So that’s what we’re going to accomplish here on this part three. So if you’re familiar, we left off part 2 with being able to just switch the classes from the table to list and I’ve actually already add a little bit of CSS that shows kind of what we’re going to cover in the video but I’m going to take the CSS of real quick and we’ll add it back in.

Once I show you what we’re trying to accomplish. Alright, so if I refresh this page you’ll be able to see, kind of where we left off video 2 or part 2 and then we’ll show you what I’m changing on part 3. So if you search here and if you look right here, it says Grid View. So that’s on one of the tables like we were on a Grid. We want to switch to list. If we switch over to list, this changes the list and we can change back and forth. But obviously by view, nothing is changing.

So that’s what we’re going to accomplish, is by clicking one of these we’re going to change the look and feel of this view. So I’m going to add this CSS back in and I’m going to kind of show you what’s going on here and then I’ll show you what exactly is happening. So in the first realm I’m saying Grid view, so when we have a Grid view…winning grid view, use Rose view and we’re going to float them together and making a grid. So there are going to be 20%, 2 ½ margin on each of the left and right and we’re going to float them. So bring that views roll up. And then on list view we’re just going to take this picture and we’re going to hide it. So you’ll be able to see how this changes pretty easily.

So again if I save my style sheet here real quick, and I’m using…you might wonder why I’m going here with my FTP client, that’s because I’m looking here on a local site and I don’t…I’m not directly working on the server. Alright, so anyway let’s refresh this page and you’ll start to see some stuff try to change. That’s hopefully what we want. And there we go. So now we’re using a Grid view here and we’re floating them up. So each of these are 20% where the 2 ½ margin on each left and right side and then when I click over to List view, the picture no longer is getting displayed. So if I click the table, my picture is back. So it almost looks like I’m using two different views here to display the content but it’s really only one view again. We’ll pull up that view for in here too.

Once that loads here, but again, the same content, Steve Young, 74 inch height, 250 pounds, same information, you’re just getting it displayed in a different way. Nice use case for this is for people that are on a mobile browser or using a tablet Sometimes it’s easier for them than are just on a grid view versus a list view. It’s got up to them but at least you have them options. Again let’s take a quick pick at the view that’s running all this. Here you see all the fields that I’m using. Picture title, height, weight and body and I’m just rewriting it in a custom text field with views. If you need information on how to do this, check out part 1.

I’ll layout to do all this but again I’m just spitting out the fields using the replacement patterns below and then using the…I would say the CSS that displayed differently. But again it’s the same view bringing up the same thing. I’m just hiding and showing based on my CSS class via J Query. So that’s the video. I want to keep it short, I don’t want to spend time to time styling because styling is obviously are going to be up to you and what you to do. But the general idea is to get the styling to work.

All you need to do is use the list Grid view class and the List view class and then inside that, you can do whatever you like on change the look and feel of the view. If you guys have any other questions like further how to style or anything like that, make sure to ask, I can help you out there. Also if you have any other questions relating to part one or part two make sure to shoot them over to us at Code Karate. Alright guys, that is going to conclude the video for today, if you have any questions again, make sure to let us know, otherwise have a good one. Bye.