Feature
Post

Category
Code


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

In part one of this three part series we laid the foundation for a magazine-style home page in Drupal. This week we are going to get our hands dirty by digging into CCK and Views. Get out your pocket protectors, this one is a little geeky!

Vocabulary settings

The first thing you will need to do is make sure that the Story content type has the two vocabularies that we created in part one. Go to Content management » Taxonomy and click on the edit vocabulary link next to Categories. Select the Story checkbox under content types. Next, check the Multiple Select checkbox below Settings. You can clear the other checkboxes in this section. Now hit save and move on to the Tags vocabulary.

The Tags vocabulary also needs to be available to the Story content type. Under settings, select both the Tags and Multiple Select checkboxes. This will allow us to free-tag a Story.

Extending Content Types with CCK

In order to take advantage of the ImageCache module you will need to extend the Story content type with CCK. At the very least, you will need to add an Image type field. If you ever use Creative Commons licensed photography you will want to credit the Author and Source. It can be useful to add these as fields so that you do not have to remember a special format every time.

Add the following fields to the Story content type by going to Content Management » Content Types and then clicking the Manage Fields link next to Story.

Label Field Name (prefixed field_) Type of Data to Store Form element to Edit Data
Image image Image Image
Image Author image_author Text Text Field
Image Source image_source Text Text Field

Toward the bottom of the page, you will see several input boxes. In the New Field section, enter the settings in the table above. Views will automatically prefix the field name with field_, so you do not need to include that part.

After you hit save there are, only two things that you need to configure on the next page. If you prefer, you can configure the Path Settings to put uploaded images into a subdirectory. I like to get clever here and put my images in a directory called—you guessed it—images! The other optional setting is the ALT text. Be nice to your disabled users and select this box. Finally, save the field settings.

Add the Image Author and Image Source fields using the data in the table. The options are up to you. I like to limit the amount of text that can go into one text box to 255 characters. That is all that you need to configure for Content Types. Next up is the hard part, creating the views that will display the content on your homepage.

Creating the views

Views seem to be one of the most powerful and yet most confusing modules there are. The overhauled Views module looks good but I found it startling at first. There is a LOT that you can do with it.

If you are feeling lazy you can just import the views by copying the export code provided and then pasting into the form under Site Building » Views » Import. Imports do not usually work well for me, so you are on your own.

Warming up with the headline view

The headline view will display a single post with a nice big image. This is for your most important stories only. Go to Site Building » Views » Add. The View name should be “Headline” and the description can be anything you would like. I used “Display a single post teaser and medium size image in the Headline category.” A tag is optional but may help you find your views quicker if you have a lot of them. Finally, select the Node View type and press the Next button.

On the next page, you will begin to configure the view settings by selecting the Block display type from the drop down. Next, click the Add Display button. Views will create a new display type that uses the default settings. You will only need to configure the Basic settings, Fields and Filters for the headline view.

You can change each of these settings by clicking the setting’s link or gear icon. Views will display the configuration options below the settings. The tricky thing about the configuration options is that you have to look for the Override button on the right side of the editing area. Because you did not set any default values, you will usually want to override the setting by clicking this button. Remember to click the Save button or your changes will be lost.

Configure the Headline view with the following settings:

Basic settings
  • Name: Headline
  • Title: None
  • Style: Unformatted
  • Row style: Fields
  • Use AJAX: No
  • Use pager: No
  • Items to display: 1
  • More link: No
  • Distinct: No
  • Access: Unrestricted
  • Exposed form in block: No
  • Header: None
  • Footer: None
  • Empty text: None
  • Theme: Information

To set the Fields you will need to click the little + icon beside the Fields header text. You can use the drop down to display only relevant Fields but I have found that it is just as easy to scroll through the list. You will need to select the following fields and then click Add.

Fields
Field Notes
Content: Image: Image (field_image) Label: none
Format: medium image linked to node
Node: Teaser No additional configuration required
Node: Title Check Link this field to its node
Filters
Field Notes
Node: Published True
Taxonomy: Term Vocabulary: Categories
Selection Type: Drop down
Operator: Is one of
Select terms from vocabulary Categories: Headline

Remember to click the Save button!

The Features View

The features view displays three excerpts each with their own thumbnail image. You will configure it to show the three most recent stories marked as a Feature.
Basic settings

Basic settings
  • Name: Block
  • Title: Features
  • Style: List
  • Row style: Fields
  • Use AJAX: No
  • Use pager: No
  • Items to display: 3
  • More link: No
  • Distinct: No
  • Access: Unrestricted
  • Exposed form in block: No
  • Header: None
  • Footer: None
  • Empty text: None
  • Theme: Information
Fields
Field Notes
Content: Image: Image (field_image) Label: none
Format: thumbnail image linked to node
Node: Teaser No additional configuration required
Node: Title Check Link this field to its node
Sort criteria
Field Notes
Node: Post date asc
Filters
Field Notes
Node: Published True
Taxonomy: Term Vocabulary: Categories
Selection Type: Drop down
Operator: Is one of
Select terms from vocabulary Categories: Featured

Remember to click Save!

Posts by Category

This view is a little tricky. It will display the last five posts for each category. The difference is that you will not add the view to a region. Instead, you will hard-code the calls to it in the front-page template file. Add a new view called posts_by_category with a display type of Node. You can just use the default display type instead of creating a block.

Basic settings
  • Name: Defaults
  • Title: None
  • Style: List
  • Row style: Fields
  • Use AJAX: No
  • Use pager: No
  • Items to display: 5
  • More link: No
  • Distinct: No
  • Access: Unrestricted
  • Exposed form in block: No
  • Header: None
  • Footer: None
  • Empty text: None
  • Theme: Information
Arguments
Field Notes
Taxonomy: Term Action to take if argument is not present: Display all values
Validator:<Basic Validation>
Action to take if argument does not validate: Hide view/Page not found (404)
Fields
Field Notes
Node: Title Check Link this field to its node
Filters
Field Notes
Node: Published True

Smooth Sailing

If you made it this far, you have done well. The good news is that was the hardest and most tedious part. It is smooth sailing from here on out. Next week we will wrap up the series by themeing the views and adding some CSS to spruce things up.

View Import Files


  1. By Noone posted on November 3, 2008 at 9:39 am
    Want an avatar? Get a gravatar! • You can link to this comment

    Wonderful article! Thank you, power of Drupal community at its best!

  2. By Thad posted on February 28, 2009 at 2:21 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    Awesome tutorial. Theming with Drupal always seemed a little mystifying, probably because of my WordPress background. There is much less digging into code for theming a magazine layout that I originally imagined.

    Anyway, quick question:

    You said: “you will hard-code the calls to it in the front-page template file.”

    Can you provide an example?

    Many thanks!

  3. By Dustin Boston posted on February 28, 2009 at 11:27 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    @Thad, yeah check out part 3. It’s got all the code :D

  4. By AndyA posted on April 3, 2009 at 2:31 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    Wonderful article! But I met a problem,

    +++++++++++++++++++++
    Label Field Name (prefixed field_) Type of Data to Store Form element to Edit Data
    Image image Image Image
    Image Author image_author Text Text Field
    Image Source image_source Text Text Field
    +++++++++++++++++++++

    But I cannot find “Image” data type in “Type of data to store.” Combo, there are only “Decimal, text, file, integer, float etc..”

    How can i get “image” data type ???

    Thanks for any help.

    Sincerely
    Andy

  5. By Greekgirl831 posted on May 14, 2009 at 7:34 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    AndyA… The newest install of imagefield requires you to select “file” as your field type then “image” as a widget. You can read all about it in the README.txt that comes with the imagefield download.

  6. By arashi posted on May 20, 2009 at 6:52 am
    Want an avatar? Get a gravatar! • You can link to this comment

    It’s great!but I use drupal 5.x(views 1.x),How To do like ablove?
    Thanks!

  7. By Tone posted on November 22, 2009 at 12:46 am
    Want an avatar? Get a gravatar! • You can link to this comment

    Hi,

    I am having trouble with getting the views for the featured and headline to auto-update. For some reason it just stays with the first stories I written. It won’t change stories or images. Any help will be much appreciated.

    Thanks,

    Tone

  8. Trackbackdev mrhappymac » Blog Archive » links for 2008-11-03Useful Links (03/11/2008) | ApramanaCheck out My Drupal Series on DevLounge | dBlogItHow to Make a Magazine-Style Homepage with Drupal, Pt 3 | 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 3How to Make a Magazine-Style Homepage with Drupal | Achmad Bisri