Hi,I am Prashant Shrestha, a web developer based in Kathmandu. I specialise in Front end Drupal Development and I also do CSS. And I am passionate about Photography.
Styling Views using Output rewrite
There is a module Semanticviews which achieves similar functionality. You can check that out as well.
Views is without a doubt the most powerful and useful drupal module. Views helps to bring out content from our site in a variety of ways. Anywhere you think of list of contents in your site you think of views. Views 2 provides even more awesome features than that were available in Views 1.
But just getting the content is not enough you need to present them in a way that is suitable to your needs and Views can output the result of your view in a variety of ways. There are many approaches to styling the output from your views. The basic approach is to use the style option that is provided by views. There are four basic styling options:
- HTML list
The Grid formats the output in a html table grid. You can specify the number of rows and colums. The HTMLlist option simply lists the view output in ordered or unordered list. The table option outputs the result in a table with each result displayed in a row. It has some cool features like sorting and grouping. The last option is the Unformatted option and as the name suggest it outputs the result unformatted it simply displays them in some divs and spans.
These option are simple but it does not provide you with the level of control that yon usually need. Another approaches is to use templates. A template is nothing but a html file with embedded php code and it must end with the extension .tpl.php . A template file can be places in the themes directory and you can override the default display styles that are used by views. Views allows us to create a template file for the whole view or just the individual rows as well as for the individual fields. But creating templates for each and every field is a cumbersome and time intensive process.
The easiest and quickest method of outputting the views in the format that you want is using rewrite output option, It is easy and we can easily output the view in any format that we want without creating a single template file. The downside is it can just be used for theming row output and not the whole view. But I think this is good enough. You can create a single template file for the whole view and for the rest you can use rewrite output.
So what is output rewrite and how to use it. Well this tutorial is all about that. So lets begin.
Before we start
Before we begin, I assume that the reader is comfortable using CCK and Views. If you know how to create a simple view then you should do fine. If you don't know what a CCK is and what a view does then I advide you to go through some tutorials on how to use them. Yo will find a lot of them in the internet.
Create the content type
For the purpose of this tutorial I have created a new content type. The only thing about the content type is I have added an image field to it using CCK. Apart from that everything else is the same. Go ahead and add a few contents to your newly created content type.
Creating the view
The View itself is really a simple one. In the filters I have selected Node: published as yes and Node: type filter as my content type. In the Fields I have displayed the following fields:
- Node: Title
- Node: post date
- User: Name
- Content: Image (the one added by CCK)
- Node: Teaser
- Node: Link
I have added a page display, and set the style option to Unformatted. Now after you save your view head over to the url of your view. It should display something like this.
If you use firebug or view the source then you will see that the html for the fields are quite complex.They are nested with many divs and span with class names like views-field-name. We want a simple html output that we can theme easily using CSS and we want the class name to be simple like image or author.
Rewrite output to the rescue
Lets say that we want the html output for each item to be of the form
- <span class="post-date">Post Date</span>
- <span class="author">by author name </span>
- <div class="content-image">Image</div>
- <div class="content-teaser">Teaser text</div>
- <div class="more-link">Read more link</div>
To do this first click the first field Node: title in this case in the Fields section and see the configuration options that it offers. There you will see a check box named Exclude from display. Select that and click on update.
What this does is,it hides the current field from the views output. I will explain why you need to do that in a bit. Go ahead and exclude all the remaining fields except the last field. This is important so dont forget this. You need to exclude all the fields from display except the last one.
Now click on the last field in the Fields section. In this case its the Node: Link field. In its configutation option you will see an option Rewrite the output of this field . Tick on that. After you tick on that you will see a bunch more option come up. You will see a text area called Text, This is where you put your rewrite output code. The great thing about this is you can use html tags so you can put divs and span or anything you like.
There is a section called replacement patterns. It displays all the fields that are available to you. Replacement patterns are kinda like a token that represents that particular field. So to display that field you simply need to type the replacement pattern in the textarea that is provided. Since you are in the last field all the fields above that field is available to you. If you had selected the second field then only the first and the second field would be shown.
Since we have exclude all the above fields from display we need to display them here using the pattern that are available.
The text to put in the textarea is as follows:
- <span class="post-date">[created]</span>
- <span class="author">by [name] </span>
- <div class="content-image">[field_content_image_fid]</div>
- <div class="content-teaser">[teaser]</div>
- <div class="more-link">[view_node]</div>
Now click update and save the view. Now go to your view page. You will see the output change just a little. If you look at the source or use firebug then you will see that the html for each item has changed and now it is according to format that we wanted.
That's all folks
Well there you have it. Once we have the output the way we want we can easily style it according to our needs. I hope you enjoyed this tutorial, If you run into any problems please put them in the comments I will be more than happy to answer them.