How to create a simple news archive in Drupal

How to create a simple news archive in Drupal

In this fairly simple tutorial I’ll show you how to use Drupal to create a simple news archive.
We’ll cover creating a new content type, setting up a new View and then add a bit of theming to smarten things up.

Although I’m focusing this tutorial on creating a news archive the principles can be reused to create lists of any types of content, blog posts, videos, whatever.

An Example
As regular readers will know I always like to have an example of what we’re aiming towards before beginning a tutorial to give some inspiration.

In a recent DrupalSN question born2destruct highlighted a pretty nice example on Ballerstatus.com of something he was looking to recreate in Drupal, so although it’s not a Drupal site I think it’s “Recent Posts” list is a nice example to follow.

News acrhive example

In addition to following the above style we’ll also add a nice date list block so news posts can be categorized by month and year making it feel more like a news archive.

Install Some Modules
Rather than go back and forth let’s install all the modules we need in one go.
I highly recommend using the Acquia Drupal download which is a Drupal bundle which already contains a bunch of useful modules including all the modules we need for this tutorials.

If you’re working with an existing Drupal installation not using Acquia then here are the modules you need to install:

Views
Content Construction Kit
File Field
Image Field
ImageCache
NOTE: This list does not include any module dependencies so read each project page for which other modules you will need to install.

Configurations
Let the configurations begin!!

1) Create a node type with an imagefield
To make things easier we’re just going to use the default “story” node type that come with Drupal (you can create a new node type) which we’ll rename and add an imagefield to.

a) Change the story node type to be called “news” by navigating to Administer > Content management and clicking the “edit” link under “Operations” and then alter the “Identification” info changing the Name field to “News” and the Type field to “news”, this is not essential but I’m going to do it.

b) Next, click the “manage fields” link next the “news” node type again under “Operations”. On the next screen you can see all the fields within the content type and can add new ones. So scroll down to the “New field” row and input the following and then click the “Save” button.
CCK Imagefield setup

Label: News Image
Name: news_image
Type: File
Operation: Image

c) On the next screen you can optionally add help text for the new image field or specify a folder (under “Path settings”) to put all our news images in but I’m just going to skip these and just save the default settings.

2) Create an Imagecache preset
We don’t want to mess around with resizing our story images before uploading it to story nodes so we’ll create a new imagecache preset and let that do the resizing for us.

Looking at the Baller Status website their story images are resized to 200px by 150px which looks pretty nice so we’ll add a new imagecache preset consisting of two actions. The first a “scale” action which scales the image to 200px with and then a “crop” action which crops it into 200px wide by 150px high square. I’ve called my preset “news_thumbnail”.

Here’s a good overview on creating image presets on drupal.org

PUT THE NEW IMAGECACHE PRESET INTO USE
Now navigate to Administer > Content management > Content Types > Edit news > Display fields and set the “News Image” field to use the new “news_thumbnail” preset by selecting it on the drop down menus under “Teaser” and “Full node”.
We want the image to be a link to the full node on our teaser list so change the teaser option to “news_thumbnail image linked to node” then save the settings.

Display fields settings

3) The News Archive View
DUMMY CONTENT
Before we start creating our View go ahead and create some test “news” posts with a news image attached OR use the devel generate module in the devel module package to generate some dummy content for you. Doing this gives us some content to check out View is working correctly.

THE VIEW
Not everyone will be aware but the Views module (I believe) comes with a default View called “archive” which is what we’ll use as our starting point because it already the neat little date list block so posts can be categorized by month and year.

a) So navigate to Administer > Site building > Views, scroll down and find the grayed out “archive” View and click the “enable” link on the right to make the View useable:

Enable archive view

b) Next, click the “clone” click on the the newly enabled “archive” View and on the next screen change the name to “news_archive” and the “Views Tag” to “My Custom View” or something like that and then click “Next”.

c) As our View is basically already set up for us we only need to make two changes to it:

1) Add a new Filter for “Node: Type” so we only pull up “story” nodes in our news archive. We’ll apply the filter to both the page and block display within the View so you can make the change with the default display selected.
So under “Filters” click the “+” sign and add a filter for “Node: Type”, click “add” and on the next screen check the “news” box and click “update”.

Views Filter settings

2) Alter the Argument setting under the Page display by first making sure you have the Page display active then under “Arguments” clicking on the “Node: Created year + month” link.
Next, click the “Override” button in the top right (so that these changes will only alter the Page display and no other) and then under “Action to take if argument is not present” change it to “Display all values”, this will make our news archive show all news items if no specific month and year are given.

Views arguments

Save the View and then go to the blocks admin page and enable the new “Archive list” block, setting it to only show on the archive pages (archive, archive/*) under the “Page specific visibility settings”.

Archive block

OPTIONAL VIEWS CHANGES
You may optionally want to tweak the View to suit your needs for example the current View page URL is “archive” which you may want to change to “news” or something else.
Feel free to play around and if you mess the View up you can just clone the “archive” View again and again.

4) A spot of theming
You may have noticed the we didn’t add any fields to our View choosing to use a “node” “row style” instead. This was done deliberately so that we can do all our theming for the items in the news archive list and news items node view (when you click to view the news item in full) in one place (ie. one template (.tpl) file) and use the same base CSS code.

ADD A NEW .TPL FILE
In your themes root folder (where the themes .info file is ie. garland.info) copy the node.tpl.php file and then rename it node-news.tpl.php and open it.
Copy and paste the following code into the new file:

field_news_image0[‘view’]; //output the news image ?>

Leave a Reply

Your email address will not be published.