Drupal Tutorials

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:

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:

<div class="node-wrapper <?php echo !$page ? 'node-teaser-view' : 'node-full-view'; ?>">
  <div id="node-<?php print $node->nid; ?>" class="node<?php echo !$page ? ' node-teaser-view' : 'node-full-view'; ?> clear-block">
   
    <div class="field-field-news-images"><?php echo $node->field_news_image<a href="#fn901349408586eab69237eb">0</a>['view']; //output the news image ?></div>
   
    <?php if ($page == 0): //if teaser view title is shown and a link ?>
      <h2><a href="<?php print $node_url ?>" title="<?php print $title ?>"><?php print $title ?></a></h2>
    <?php endif; ?>
 
    <?php if ($submitted): ?>
      <span class="submitted"><?php print $submitted; ?></span>
    <?php endif; ?>
    <?php if ($links): ?>
       | <span class="links"><?php print $links; ?></span>
    <?php endif; ?> 
 
    <div class="content clear-block">
      <?php print $node->content['body']['#value']; //content has already been run through check_markup function so should be secure (see: node_prepare) ?>
    </div>
 
  </div>
</div>

As I said we’re using pretty much the same template for both teaser (list) and node view but if you look at the top line you’ll notice the node code is wrapped with another div which gets assigned a class depending on whether we are in teaser (class node-teaser-view) or node view (class node-full-view). This means we can alter the display for teaser (list) or node view with CSS without having to change the template HTML code (although we have that option if we need it).
Notice I’ve tried to make the layout similar to the example we noted at the start of this tutorial so I’m not using all the available node variables.

SOME CSS CODE
Open up your themes style.css file and add the following:

1) On our teaser list view lets add a border to the bottom of each item and a bit of spaces:

/**
* @group news archive
*/
.node-teaser-view .node {
  padding-bottom: 1em;
  margin-bottom: 1em;
  border-bottom: 1px dotted #ccc;
}

2) Now lets align the news image to left for both the teaser & node view:

.field-field-news-images {
  float: left;
  margin-right: 1em;
}

That should give you a pretty nice layout for both teaser & node view (even with the devel temporary images) which you can easily expand on as you please.

Archive teaser list

Hope you’ve enjoyed this tutorial, thanks for reading.

If you like what you read here please comment below and make any suggestions you have to expand on this tutorial.

Commenting on this Tutorial is closed.

Categories:

Comments (98)

MusicIBe.com's picture

for the node-news.tpl.php i get this error: Parse error: syntax error, unexpected T_STRING, expecting ‘,’ or ‘;’ in /home/blakkvi/public_html/index/themes/MUSICIBE 2.0/node-news.tpl.php on line 7

which is this:

<?php
echo $node->field_news_image<a href="#fn5104517184c7c2ca412340">0</a>['view']; //output the news image
?>

MusicIBe.com's picture

How can I fix this error?

$node->field_news_image[ 0 ][‘view’];

I was looking an important thing and here I found it. I am doing a project and this information is very useful me. If you are interested, but this is my duty to inform you that virtual administrative assistant a very dedicated service and can be applied anywhere you want and get better results.designer clothes men

I had never heard of e-cigarettes until I read this article. It appears that a lot more research needs to be conducted to ensure that this product is funny games and car games.

Using the right mobile app development platform developing games and similar apps is such great fun.

Real good articles here mate, I will be back again as im learning so much about this area that im interested in a lot. Thanks for the great insight you’re a gem buddy. horny goat weed icariin epimedium

If possible, as you gain expertise, would you mind updating your blog with extra information? It is extremely helpful for me.Fountains and ponds perth

thanks you very good
شات الحبشات بنات مصردردشة مصريةدردشة الحب

very nice
thanks

Very cool – good catch.
Google it!

the tutorials that you given here is useful but if you add video it would be easier for us as a newbie learner of Drupal

Matt – Bali Flight- Laguna Bali

Great info. I like all your post. I will keep visiting this blog very often. It is good to see you verbalize from the heart and your clarity on this important subject can be easily observed..Juicy Couture Outlet
Juicy Couture Outlet
Juicy Couture Bags

hairstyles
hairstyles are a primitive one and often linked with the popular and demanding styles in 60s and 70s both in men and women. A parallel hairstyles approach is still followed for girls and women in modern
amazing hairstyle with a little untidy that confers a rock & roll look to your hair. This shag style has gone through slight changes over the time. Unlikely to older styles

long hair styles

Search engine optimization (seo)is the process of improving the visibility of website in search enginesseo tips
through the “natural” or un-paid search results. In general, higher ranked on the search results page and moreoff page seo
frequently a site appears in the search results, the more visitors it will get from the search engine users

Agree, adding video is just awesome.

Hoc bong du hoc
Du hoc Singapore

this was really helpful.

regards,
Veterinary technician

I am very impressed. I do have a couple questions for you personally however. Do you think you’re thinking about doing a follow-up posting about this? Will you be going to keep bringing up-to-date
high pr backlinks

I was looking for some topics that are enough popular and finally founded your blog, it has superb topics with great popularity.
PR Submissions | SEO India Profit By Search | Shopify Design

Thanks for the great article!

Find software at http://www.muggies.com

Yes, everyone will know more from DrupalSN car games

Thanks for the muggies^^, what the hell are muggies?
ue40d6500vsxzg Game Key kaufen

webgal's picture

That’s looking neat.. nice set of code to make drupal more user friendly as well as attention capturing!
Preserve Plant life

Anugerah Digital Printing's picture

Thanks for this great tutorial.
Mobil Keluarga Terbaik on BPP and Forex Tips

I need talk. Extremely seldom do I occur opposite a blog thats both educational also entertaining, further authorize me recount you, youve success the capture on the pate.juicy couture tracksuits

Many thanks for the tutorial. I was surprised that it´s not difficult to create a simple news archive with drupal. Irena from web hosting reviewsvps hosting reviews

I just would like to give a huge thumbs up for the great info you have here on this post. I will be coming back to your blog for more soon.SEO India | Shopify Design

Nice Article. Thanks !!! : )

Hi friend ,
Article is really great . I am doing each and every thing pretty nice way but problem is this images is not uploaded while display news article .
Please solve this problem , thanks in advance.

hi friend ,

I solved my problem .
Once again thanks for your awesome article .

hi,

I want to know that this article is working on admin only because without admin login images are not shows .
Please help me .

Is anyone help me please , i am waiting .
Or i am doing any thing wrong please tell me because images shows only on admin login , when i logout the admin login images didin’t show.

kamran's picture

please check the permission of that module

psychic's picture

Hi friend ,
Article is really great . I am doing each and every thing pretty nice way but problem is this images is not uploaded often. free psychic readings online

I am happy to find so many useful information here in the post, thanks for sharing it here. I hope you will adding more…Free Cell Phone Spy

hi kamran ,
Its works .
Thanks for your help.

studystuff.in's picture

this is very great document for learning.
using this i learnt CCK,View both

Thanks a lot

Very interesting and informative. I had never heard of e-cigarettes until I read this article. It appears that a lot more research needs to be conducted to ensure that this product is safe. It should not be taken lightly.
free i phone

Hi friend ,
Article is really great . I am doing each and every thing pretty nice way but problem is this images is not uploaded while display news article .
Please solve this problem , thanks in advance.
Steroids for sale

johnsander's picture

I am extremely impressed with your writing skills and also with the layout on your blog.CUSTOM LOGO DESIGNS Is this a paid theme or did you customize it yourself? Either way keep up the nice quality writing, it’s rare to see a nice blog like this one these days.

Thank you for the tips, for beginners these tips would serve a great purpose..
websites builder

Impressive article, like the way it is being written. Thanks for clearing some of my doubts.
Web Redesign
Opensource Solutions
Social Networking Web Design

you tutorial was very much nice.. thank you for spending time for us. it valuable information to every one..
drupal developer

wesome tutorial, man. I really appreciate when people go over the basics because I often find Drupal to be a bit overwhelming and not knowing what certain things are doing.
Wedding gowns

I really like Drupal as more as I seen tutuorials so well explained like this.Acquia is verye easy to use..thanks for tips Car Games|Bike Games

lschloss's picture

Thank you. I’ve been looking for something like this. While I don’t want to set up an “autoblog”, I would like to have a bit of up-to-date content that is fire and forget. Thanks.

medical assistant salary

Your blog article is very interesting and fantastic, at the same time the blog theme is unique and perfect, great job. To your success. One of the more impressive blogs I’ve seen. Thanks so much for keeping the internet classy for a nice tutorial.Blog commenting

thank you for this understandable tutorial, worked fine for me and saved from all those unneccesary modelus. great
sexy costume

I love those glasses in that picture!
Car Games | Parking Games | Free Brain Games

Great site, tutorials like this are invaluable.
canvas art
canvas wall art

I wanted to thank you for this great post!!! I definitely enjoying every little bit of it I have you bookmarked to check out new stuff you post.
custom wedding gowns