Feature
Post

Category
Publishing


How to Make a Magazine-Style Homepage with Drupal, Pt 1

Magazine style layouts are a great way to organize a lot of content on your home page. But do you know how to do it in Drupal? Over the next few posts, I will walk you through the process of creating a great looking home page much like what you see on many of the major news and magazine sites.

I will be using Drupal 6 and a handful of common modules. Unfortunately, many of the modules for Drupal 6 are still in development. Do not be surprised if you run into some little bumps. You should have some experience with the Views and CCK modules, some experience with themes, and a decent knowledge of CSS, XHTML, and PHP.

For now, I am going to focus on three main sections that are characteristic of most magazine style sites.

  • Headline story with a teaser and large image
  • Several featured stories with teasers and thumbnail images
  • A list of recent post titles by category

Once we have completed the series, you should be able to add other common elements on your own.

Install modules and themes

For this to work, you will need to download and install the following modules:

RootCandy is a very nice admin theme I am using the Framework theme for the front-of-site, and RootCandy as the admin theme. These are optional but it will probably help to have at least the Framework theme installed.

Install everything as normal. Remember to put your themes and modules in the /sites/ directory. Here are the important settings you will need.

Automatically size images with ImageCache

Create three presets named Large, Medium, and Thumbnail. They should all use the Scale and Crop action. I used these dimensions:

ImageCache Preset Dimensions
Namespace Width Height
Large 640px 640p
Medium 350px 350p
Thumbnail 100px 100px

Later on, we will use a CCK field to upload an image and attach it to a story. The ImageCache module will automatically scale and crop your image to the dimensions you set.

Use WordPress style Taxonomy to keep things simple

The best Taxonomies are simple. We can all learn a lesson from WordPress when it comes to organizing our Vocabulary and Terms: keep it simple.

Set up a Vocabulary called “Tags” that allows you to free-tag to your heart’s content. Then set up a Vocabulary called “Categories” and add these terms:

  • Headline
  • Feature
  • Category 1
  • Category 2
  • Category 3
  • Category 4

Feel free to replace Category 1-4 with something more suitable to your content. I have a feeling that this Taxonomy structure is probably suitable for 95% of the world’s websites—but that is debatable.

Create regions

Now that we have finished configuring the modules, we can get our hands a little dirty. The first thing you will need to do is open up your front-of-site theme directory (Framework). Next, copy the page.tpl.php file and name it page-front.tpl.php. Drupal will automatically use this file as the template for the home page.

This is the generic code for a region:

if ($the_region) {
  print '<div>';
  print $the_region;
  print '</div>';
}

The variable $the_region can be anything you choose, but it must be defined in the theme’s .info file. The region definition looks like this:

regions[the_region] = My Region

the_region corresponds to the variable that you defined in the code. “My Region” can be whatever you choose to name that region. Create the following regions in the .info file, somewhere near the bottom:

regions[headline] = Headline
regions[features] = Features

If you try to view your site, it should break. That is because we are overriding the default regions (sidebars, content, header and footer) that Drupal recognizes out of the box. We will need to redefine the default regions. You should now have something like this:

regions[left] = Left sidebar
regions[right] = Right sidebar
regions[content] = Content
regions[header] = Header
regions[footer] = Footer
regions[headline] = Headline
regions[features] = Features

The last step in this part of the series is to add the regions. Find the main content area of your template and add this code:

print '<div class="main">';
if ($headline) {
	print '<div class="region">';
    print $headline;
    print '</div>';
}
 
if ($features) {
	print '<div class="region">';
    print $features;
    print '</div>';
}
print '</div>';

I added the main div and the region classes to make it easier for styling later on. Otherwise, they are not required.

Part 1 Wrap-up

That was easy. Our theme is now fully receptive to most of the content that will go on the home page. Apart from installing some modules and doing some very basic configuration, we were able to lay the foundation for a magazine style home page with just a little code.

In the next part of the series, we will enhance the Story content type with CCK and create several Views for displaying content.


  1. By ultimike posted on October 22, 2008 at 4:27 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    Dustin,

    Why not use Panels instead of having to worry about the layout in the theme? I’m always curious to hear how people decide which modules to use when implementing something like this.

    -mike

  2. By kevin posted on October 22, 2008 at 5:36 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    So, how do you identify the “main” area of the framework template?

    ?

    thanks for the insight into building Drupal sites, looking forward to part two!

  3. By Lukka posted on October 23, 2008 at 2:37 am
    Want an avatar? Get a gravatar! • You can link to this comment

    Great post. I’m developing magazine-like portal based on drupal and am awaiting for next part of this tutorial.

    Please correct :

    line 11. print ‘; to print ”;

  4. By NikLP posted on October 23, 2008 at 8:26 am
    Want an avatar? Get a gravatar! • You can link to this comment

    I’m always interested to see new ways of developing complex page layouts like this. I think this sort of thing has been done a lot in the past, and documented also.

    I would have to say that using Panels to construct complex layouts such as this is very simple. Creating panel page templates using a simple .tpl.php-based html/css solution and applying this as a layout in Panels allows a lot of flexibility.

    People should not underestimate the power of the Dark Side Panels 2. Facilities such as node and taxonomy context allow for *vastly* powerful features with barely a stroke of work; such features would be very difficult to implement in a custom page template with regions, without a lot of custom code in the template.php file.

    Another angle that should be recognised is that aside from single custom layouts such as this, you can override *all* your node type layouts with custom templates, and node/x and taxonomy/term/x and so on. Further to that, you can create custom panel page instances for feature rich site areas such as section pages.

    Myself and a couple of other guys developed the Curt Smith Official site using a lot of Panels 2 – check that out for some snazzy examples.

  5. By Marty posted on October 23, 2008 at 11:03 am
    Want an avatar? Get a gravatar! • You can link to this comment

    Nice run through, looking forward to reading more..
    Keep up the good work…

    thumbs up :)

  6. By Dustin Boston posted on October 23, 2008 at 12:14 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    @lukka – fixed
    @mike and NiKLP – I used to use Panels but I wanted to focus on Views and Templates.
    @kevin – that’s up to you. By main area I mean your content area but really you can put the regions wherever you’d like

  7. By Free Premium Drupal Magazine Theme posted on October 24, 2008 at 7:45 am
    Want an avatar? Get a gravatar! • You can link to this comment

    Well, you can also download Drupazine, the Free Premium Drupal Magazine Theme at http://mais.blog.br/?q=node/3

  8. By Lost posted on October 31, 2008 at 12:36 am
    Want an avatar? Get a gravatar! • You can link to this comment

    I got lost. I copied lines 1-7 at the bottom of my framework.info file. Then added the regions code into the “center” div of the page-front.tpl.php file. When I save and refresh I just get the code sitting in the center div of the site. I believe I need some help with the “Create Regions” section of the tutorial. Thanks in advance.

  9. By Dustin Boston posted on October 31, 2008 at 9:22 am
    Want an avatar? Get a gravatar! • You can link to this comment

    @Lost, I know this may seem silly, but did you put the php tags around the code?

  10. By lost posted on October 31, 2008 at 11:06 am
    Want an avatar? Get a gravatar! • You can link to this comment

    @Dustin No, it wasn’t silly. I just don’t know enough about php to recognize that it needed them. Thanks for the help.

  11. By blue posted on October 31, 2008 at 10:08 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    Should the public side of the site look different now that the code has been added? I can’t tell what changes have been made.

  12. By Niftie posted on November 2, 2008 at 1:42 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    Part 2 pls, thx.

  13. By iamhe posted on November 6, 2008 at 10:01 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    I’m afraid I might have missed something. When the “generic code for a region” is introduced should that be included in the page-front.tpl.php file? If so, where?

    BTW: thanks for the walk thru

  14. By Mike Sharp posted on November 20, 2008 at 2:13 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    This was brilliant, but when it the next installment. Slobbering developers want to know.

    m

  15. By curious posted on November 24, 2008 at 5:01 am
    Want an avatar? Get a gravatar! • You can link to this comment

    Greetings,

    I am also eagerly waiting for part 2, perhaps you can give some basic pointers in the mean time?

  16. By Warren McMillan posted on December 12, 2008 at 6:49 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    I’m real new at this so I’m sure this is a dumb question but nonetheless… where it says: “Find the main content area of your template and add this code:” which file exactly is the one you are calling ‘template’? Is it the actual ‘template.php’ or ‘page-front.tpl.php’?

    Thanks

  17. By lost posted on December 24, 2008 at 1:37 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    I’ve got the modules installed but I don’t know which components to turn on. ie in CCK there is Content, Content Copy, Content Permissions, and so on. Which do I need and which do I leave ‘un-enabled’?

    I’ve got high hopes for this being a great site when its done. Thanks for the help.

  18. By DuLe posted on January 19, 2009 at 4:11 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    I have something to ask about this tutorial. I know that the question is wrong but jas do not understand from the above for the regions where the shepherds and the codes. If anyone can explain to me would be grateful

  19. By interlina posted on February 8, 2009 at 6:53 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    a good post, this is veri usefull to a beginner on drupal. thanks for a good post. i us eit to learn more about customizing drupal theme.

  20. By roma posted on February 18, 2009 at 6:58 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    can you say me, where can I find the complete drupal theme?

  21. By photographer posted on July 3, 2009 at 10:11 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    its greate advise! very usefull for me right now, thank you!
    to roma, look for theme themegarden.org

  22. By Richard posted on July 15, 2009 at 3:08 am
    Want an avatar? Get a gravatar! • You can link to this comment

    I worked through the entire tutorial. Perhaps I’m missing something. The main page doesn’t look like a magazine layout. I even tried using your framework zip. Still no magazine layout. What am I missing?

    Thanks

  23. TrackbackCheck out My Drupal Series on DevLounge | Dustin BostonHow to Make a Magazine-Style Homepage with Drupal, Pt 2 | DevloungeSurfing » Blog Archive » Ich liebe Surfen und frage mich, welche Art von Wasser-Nachweis Kamera zu kaufen. Vielen Dank, dass Sie?How to Make a Magazine-Style Homepage with Drupal, Pt 2links for 2008-12-01 « /home/servrrockrHow to Make a Magazine-Style Homepage with Drupal | Achmad Bisrilinks for 2009-01-25 at Ik enzoHow to Make a Magazine-Style Homepage with Drupal, Pt 1 | Devlounge