How to Make a Magazine-Style Homepage with Drupal, Pt 3
In part two of this series, you got into CCK and views. This time around, you will be theming the views and adding a little spit and polish to pretty it up.
Views Templates
Views has a neat feature that allows you to create a simple template file to coerce the ugly default output of views into something more presentable. If you created the CCK fields and Views just like I did in part two you can copy and paste the following code into the appropriate files.
Headline Template
Paste this code into a file called views-view-fields--Headline--block.tpl.php and copy it to your theme folder. The headline view will now output the image followed by the title and teaser. This convoluted file name is actually specified in Views itself by clicking the Information link for the selected View. I simply looked for the file name that most closely matched what I wanted to do.
Features Template
This is the same as the Headline but this time you need to name the file views-view-fields--Features--block.tpl.php.You should now have a fully functioning Headline and Features list.
Categories Template
This get a little complicated for the categories. In this case, you will need to paste some code into your page-front.tpl.php file. Here is the code.
-
<div id="categories" class="region">
-
<?php
-
/* Enter the ID of the vocabulary which terms you want to show as headlines */
-
$vocabulary_id = "1";
-
-
/* Enter the IDs of any terms that should not be displayed */
-
-
/*Enter the name of the view that should show the nodes */
-
$view_name = "posts_by_category";
-
-
foreach(taxonomy_get_tree($vocabulary_id,0,-1,1) as $value) {
-
}
-
}
-
?>
-
</div>
It simply loops over each Term for whatever Vocabulary you specify. During the loop, Drupal makes a call to the posts_by_category View, which returns the five most recent post titles formatted as links.
Just find a good spot for it in page-front.tpl.php file and specify the commented parameters. That is it.
Styles
The last thing you need to do is a few styles to the stylesheet to make everything look nice and tidy. See the attached files for a full example.
Wrap up
It does not take much to style your views if you know file to create. In this case, just a few lines of code did the trick. With a little CCK and Views you have managed to create a dynamic Magazine-style layout for Drupal that is robust and structured.
Want an avatar? Get a gravatar! • You can link to this comment
I’ve followed along until today. For some reason my views aren’t showing up on the front page? I’ve changed this variable…
/* Enter the ID of the vocabulary which terms you want to show as headlines */
$vocabulary_id = “1″;
…but only display titles of nodes and the headline and feature appear under the categories.
Thanks for the post and any help would be appreciated.
Want an avatar? Get a gravatar! • You can link to this comment
Just an update, if I remove the if statements from Headline and features, I get a blank region for each.
Want an avatar? Get a gravatar! • You can link to this comment
Disregard the previous comments. I forgot to put the headline and features blocks in their regions under the Blocks menu.
Want an avatar? Get a gravatar! • You can link to this comment
Thanks for a great series! I was wondering that you put the Headline name of the block in the code. How would you do this if the site mas multi-language (I have had some troubles with Views and page/block names in a multi-language site)?
In other code snippit you wrote:
Why do you use the “t” function here?
Want an avatar? Get a gravatar! • You can link to this comment
Thanks for the great tutorial, I have followed up till the now and have revised the 3 part series but am still struggling to get the Headline image to display. Please let me know what you think might be the problem here. You can visit the site at http://www.lddesign.co.za/demo/takeoffonline which is still a demo site. Im still learning how to use drupal.