Feature
Post

Category
Code


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

<div class="headline-summary">
	<div class="imageframe"><?php print $fields['field_image_fid']->content; ?></div>
	<h2>Headline</h2>
	<h3><?php print $fields['title']->content; ?></h3>
	<div class="teaser">
		<?php print $fields['teaser']->content; ?>
	</div>
</div>

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

<div class="featured-summary">
	<div class="imageframe"><?php print $fields['field_image_fid']->content; ?></div>
	<h4><?php print $fields['title']->content; ?></h4>
	<div class="teaser">
		<?php print $fields['teaser']->content; ?>
	</div>
</div>

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 */
$terms_to_exclude = array(1,6,7,271);

/*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) {
if ( !in_array( $value->tid, $terms_to_exclude ) ) {
      print t("<div class=\"category-list $value->description\">\n<h3>" . $value->name . "</h3>");
      print views_embed_view($view_name, 'default', $value->name);
      print t("</div>");
   }
}   
?>
</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.

Download the Framework theme with styles and View templates


  1. By Mike posted on November 13, 2008 at 6:41 pm
    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.

  2. By Mike posted on November 13, 2008 at 6:47 pm
    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.

  3. By Mike posted on November 13, 2008 at 8:07 pm
    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.

  4. By Joop Laan posted on November 14, 2008 at 3:01 am
    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:

    print t(“description\”>\n” . $value->name . “”);
    print views_embed_view($view_name, ‘default’, $value->name);
    print t(“”);

    Why do you use the “t” function here?

  5. By Lethabo Mashike posted on December 9, 2008 at 6:10 am
    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.

  6. By ball.in.th posted on January 5, 2009 at 7:23 am
    Want an avatar? Get a gravatar! • You can link to this comment

    Thanks for the tutorial. I think I’ll adapt the techniques for our website.

    I’ve noticed that you’ve ignore the “Promoted to front page” flag. If nodes are promoted, they will still get displayed, probably in the wrong place.

    Also, is there a way to disable the default front page (/node)? I am thinking about using a module to produce an empty page. Is there a better way?

  7. By Spiddy posted on February 10, 2009 at 6:07 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    thanks for the great tutorial! I managed to follow to the end and it all seems to be working except my text is showing underneath the photo rather than to the right hand side. Any ideas? thanks!

  8. By Dustin Boston posted on February 10, 2009 at 7:36 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    @Spiddy: do you have a link? Sounds like a CSS issue.

  9. By Spiddy posted on February 11, 2009 at 9:33 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    thanks, you just made me realise that it was working when I first used the framework theme with the downloaded files from this article. I then tried to use the aboutpeople free theme at http://drupal.org/project/aboutpeople when the issue arose. I guess I need to copy the correct part from the downloaded css file? Sorry I can’t send you a link, i’m still working on local host at the moment as i’m a newbie to drupal and css :-)

  10. By kayman posted on March 11, 2009 at 7:51 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    If your images don’t show up, check end edit permissions for your different user types under: Administer > User management. That sorted it out for me.

  11. By Gman posted on May 27, 2009 at 2:14 am
    Want an avatar? Get a gravatar! • You can link to this comment

    I have followed all of this tutorial and I have ended up with two blue boxes that have the title of my articles only (no pictures). What am I missing?

  12. By northern woman posted on June 5, 2009 at 11:44 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    Followed the tutorial fine up until this last page. This last page is the reason people like me get an urge to return to hand coding and/or Dreamweaver. Using Drupal means we need to learn PHP to develop web sites, although at the Drupal site there is much chatter about how one does not need to learn PHP. It just t’aint so! Without a site with content like this, those of us who are not coders would be lost, unfortuately.

    Is there a way to do this last page with a module?

  13. By Kinny posted on June 8, 2009 at 5:21 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    I keep getting stuck on this too; not sure if it is a problem with the tutorial or me not understanding something. I am learning though regardless and feel like I am getting there but I feel there could be possible gaps in my knowledge which this tutorial presumes we knows as newbs already.

    For the Extending Content Types with CCK section I have had to go into content type, story, display fields, image, and have had to set the full node to ‘Medium image linked to node’ in order to get a medium sized image to display in the content page after the features teaser has been clicked on to avoid getting the full image sized. I don’t see that mentioned in here. I also have a problem where to upload an image I have to after locating it in the browse field, I have to then click save at the bottom of the page then quickly click on upload next to the image browse button. I have found that clearing the cache in the performance area of the site has been the greatest help in solving a few problems whilst following this tutorial. I hope that helps anyone newbs who chooses to follow this. What are you stuck on Northern woman? I am no PHP coder either.

  14. By Tim posted on August 28, 2009 at 11:18 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    There’s just one step missing. You’ll need to add some instructions on editing the Blocks on your site to put the Headline block into the region Headline, the Features block into the region Features, etc.

    Other than this little gotcha, this was an awesome tutorial. Thanks.

  15. By James posted on December 13, 2009 at 3:39 am
    Want an avatar? Get a gravatar! • You can link to this comment

    The image doesn’t show on the left nor any CSS is applied because the “headline” and “feautures” of the css aren’t defined anywhere as ids (those id only appear in the style.css file). I assume those are supposed to be generated by some module… but it doesn’t work here. When and are does id defined (in order to call them from the css)??

  16. TrackbackHow to Make a Magazine-Style Homepage with Drupal | Achmad Bisri