complex 4-column Front page layout with lots of blocks and node teasers?
Hello all,
I am trying to create a high school newspaper website using Drupal, and the front page design is quite complicated. I am trying to create block-like regions of node teasers (similar to the New York Times) in a 2-column layout in the content column. I can't figure out how to do it. I have seen questions about how to put a block of the most recent posts in a certain category, but I want to put headline node teasers on the front page with different regions based on the taxonomy term. I also need to be able to have staff reporters to easily upload their articles so that these front-page stories can be promoted to the front page. Any ideas? I have attached a very basic design of the front page (without any CCK fields or anything like that). I hope that it helps.
We would prefer not to mess with code, since we know little. I am using the Admire Grey theme (a three column theme).
Thanks in advance for any help and sorry if I'm not doing a great job explaining. That's why I put the design so that it could help :)
narsil351
| Attachment | Size |
|---|---|
| design-pencil.JPG | 157.37 KB |
Ambitious. I've done a
Ambitious.
I've done a couple projects like these, and there are definitely numerous ways to go about it, but the one that requires the least coding knowledge might be to dive into views and use something like http://drupal.org/node/85769
I suggest designing a static version (with filler headlines and text) of your page first and then going back and inserting the dynamic content after that.
If you have a low trafficked site, that should be fine for your needs. We had one site that was getting 10k hits/day, however, and the views calls brought it to the ground, in which case we used more aggressive caching + custom php calls.
Hope that's helpful,
Michael
Michael Morisy
Web/Development Committee, SpareChangeNews.net (internally being redesigned)
Twitter: @morisy
Newsite Approach
As Michael Morisy noted - "there are definitely numerous ways to go about it." That's the beauty, power and flexibility of Drupal.
I'd recommend the following approach:
Consider a grid-style theme like 960.gs This will dramatically simplify you're design. Take a look at the Times UK, the Wall Street Journal etc. - They don't use 960, but they are grid-based. Also, take a look at Taekwondojournal.com a Drupal 960 site. There's a Drupal 960 theme you can use. Personal preference - I would never attempt to develop a news style site without a grid framework.
You'll absolutely need a Views.
There are couple of ways to handle Teasers. You can create a "Teaser" content type that you use to link to the related Node or Landing Page. Or, you can build a "Teaser-Group" of fields within a content type that you can expose in a view on the Front Page or other Landing Page. I prefer the later approach - it keeps everything compact and predictable.
Imagecache - You'll need this to manage your images
Use Nodequeue to stage your content - This will allow you "stream" your content from one view to another. See Taekwondojournal.com to see how the front page section displays a main article, to the next level article, then to a list of articles.
Menus, "Channels" and Landing Pages. Consider using the module menutrails, to create rock-solid navigation. Couple this with a well vetted Taxonomy.
Use Viewscarousel to deliver the "Recent Photo'd" section. This is a simple, but very effective module for jquery display.
A couple questions:
Totally agree with doing the
Totally agree with doing the HTML first them bringing the Dynamic elements. You have the following tasks in hand
1. Create the required HTML
2. Map each zone in the HTML to Drupal functionality (views node queue,...)
3. Create the Drupal Theme - This could be individual elements (a node.tpl, block.tpl,...) + the layout (page.tpl)
Netlink Technologies Ltd
I blog and Twitter :)
BlueprintCSS
Adagio makes some great points, particularly about the grid-based theme. I've been using BlueprintCSS, which has some great base elements and a dedicated Drupal module. If you want, I'd be happy to share the base theme I've built sparechangenews.net/beta off of, but it's still very early days (it's my night volunteer project). Otherwise, from anecdotal evidence 960.gs seems to have more traction in the Drupal community and you might be better off with it.
Michael Morisy
Web/Development Committee, SpareChangeNews.net (internally being redesigned)
Twitter: @morisy
Thank you all
Thank you all for your comments,
To Mr. Morisy: We have knowledge of php, but are unaware of how to theme with it, so that is why we are hesitant with coding. I like the idea of starting out with a static page and slowly building on it. We don't get that much traffic (about 200 visits/day tops). We might want to consider using 960.gs.
To Mr. Adagio: Is it not possible to use views to create the teasers? If not, could you explain a bit more in detail what you mean by a teaser-group?
Also, is it not possible to use panels to accomplish what we want? It shouldn't be that difficult, if we use a custom layout. If not, we can, as you suggested, use a 960 grid.
And answering your questions,
yes, we plan to deliver video, but using emfield and not on our own server. I am a high school student, but there is also one more on my team. That would be great if you could give us some pointers. Unfortunately, I am not going to be available until the 25th of August by phone. Could we possibly communicate by email until then? I think my email is given in the contact list (your's seems to be no-reply@drupal.org).
Thanks all for the guidance,
narsil351
Hello, I would recommend you
Hello, I would recommend you check out the Nodequeue project which will help you with your front page layout. Views is a must for creating lists of articles in each news department.
As for a theme, I would suggest you take a look at Zen Ninesixty, which is a sub theme for Zen. I know where you are coming from about not being sure how to theme. It can be overwhelming at first and takes some time to sort out. But with Zen (and the Zen Ninesixty theme) you can actually put together a complex grid layout in a day or two. There are a few tutorials on theming that are worth looking up with google.
good luck!
I second this. It's very
I second this. It's very possible -- I'd look at using Panels, too.
I have long struggled with
I have long struggled with this also. It's fine to use the grid system and Nodequeue, but I get different widths of my columns. See this comments.I will appreciate all the help I can get
Panels, panels, panels
A layout like this is fairly trivial to accomplish with Panels, and the result is easily modified without requiring any real understanding of HTML, PHP, or understanding of Drupal's theming system.
And upgrade to Drupal 6 immediately. You shouldn't be building on D5 at this stage.
Adagio listed the other obvious modules you'll need.
I would not use the ninesixty theme unless your goal is to spend a lot of time tinkering with CSS and theme development instead of building a site.
What theme would you
What theme would you recommend to someone who is not that good with CSS? (or php)
*_*
The best way to set multiple blocks on a page is using panels. As Mr. yelvington told, the flexible layout of the panels allows you set any number or regions. Moreover, with panels 3, you can define the front page of the site, right away, creating the front page with panels, so no need to set it explicitly at site information page.
Regards.
:)
Beautifulmind
Blueprint Rules
If there really is no ability to code whatsoever, then panels is probably the way to go. But for a solution that has less overhead and is actually more flexible, I'd recommend the Blueprint framework without any hesitation.
I can't imagine an easier approach to complex page layouts than with Blueprint. You want complex? You could probably code a 8- over 6- over 4- over 8-column layout in about 5 minues. (And Hey, Hey! It works! Even on IE!)
I suppose there is a tiny learning curve to Blueprint--but the coding is sooooo easy-- actually easier than coding an HTML table, in my opinion. (Conceptually, if you understand tables, you can understand Blueprint. Although, let's be clear, Blueprint does NOT use tables. )
Check it out: There's a really decent tutorial on Blueprint here: http://drupaleasy.com/blogs/ultimike/2009/04/getting-started-blueprint-t... --definitely worth a few minutes to explore this quiet little starter theme.
Learning Drupal
I'm starting to make a newspaper website with drupal too. (I don't know much about anything CSS, HTML, PHP, ect. If you've completed one year of high school computer science you know more than me.)
The folks at Lullabot, a Drupal training and consulting company, wrote the first O'Reily book on Drupal, Using Drupal. It's really just an indepth look at series of Drupal recipes which the reader is walked through. The recipes in the book include a wiki, photo gallery, multilingual forum, publishing workflow and event management -- all which could be integrated into a newspaper website. Lullabot also made a series of videos about CCK, views, and theming and advanced theming (http://store.lullabot.com/products/the-everything-bundle). It's a little expensive but I've learned a lot from it. In the Advanced Theming video they explain the process of turning a static html page into a Drupal theme and enough PHP to understand how to create variables in template.php and print them in the tpl.php files using a 960 grid template.
In the video they explain how to use the Devel module to access the list of variables contained in a node and then explain the php code used to access the dynamic information stored in the an array. How it was explained to me was so simple in intuitive that I jumped out of my seat while watching it doing an Ari Gold flair of the arms. They also go indepth with firebug to show how to analyze dissect the structure and css of any website which you could use to learn from other people things that you might find interesting in their layout.