By rszrama on

I recently revamped the front page look at Ubercart.org in preparation for an eventual (hopefully sooner rather than later) first release. In the process, I learned once again that all the wonderful contributors have made Drupal an excellent tool for designing web pages. With a simple combination of Panels, Views, and Drupal's own content type creation, I was able to achieve what you see there with no headache whatsoever. It was just too easy!

What isn't necessarily easy is knowing the tools exist to do something like that and how to use them together for your site. I decided to spend some time writing up my experience, including the preliminary thought processes and then actual configuration of the modules, so others could benefit from my fun. The voice in the tutorial is pretty informal, but I trust it gets the job done. Also, I'm just darn proud of the end result and thought I'd put this up to get some feedback while helping people, too. ; )

From the tutorial's introduction:

Purpose: Describe the thought processes and modules used to design the front page of Ubercart.org, a site designed to be both an information portal and user/developer community.

Modules explained: Drupal's own content type creation, Views, and Panels.

Honorable mentions: Deciding on what to display, visual aids, "enhancing" the forums and Navigation menu.

The tutorial is available here: http://ryan.grinhost.net/tutorial/2007/anatomy_front_page

The end result is visible here: http://www.ubercart.org/

I'd love to have your feedback and get more ideas for easy, fun page creation!

⋅ Categories: Drupal 5.x

Comments

sduford’s picture

sduford commented

Very well done front page! Thanks for the tutorial. I'm building my first Drupal site (www.lostinpanama.com)and that is exactly what I needed.

Sylvain Duford
www.lostinpanama.com www.duford.com www.tragicplanet.org www.digitalfotographer.com

Cross_and_Flame’s picture

Cross_and_Flame commented

Thanks for posting it.

sciman’s picture

sciman commented

I like the writing style -- it's friendly. Past being engaging and showing such an up-beat personality, your creative process of working through the features of Views and Panels give me courage to try to do some pretty similar kinds of things. In fact it's amazing that one can do such stuff without having to get to coding themes. Hooray! A million thanks!

rszrama’s picture

rszrama commented

Awesome! I'm glad this has benefited you all, and I hope it helps many more. : )

It's nice, like you said, to be able to accomplish something that looks sharp and gets the job done without being a total design genius. Many geniuses have paved the way for us with Drupal and the contributed modules. ^_^

Cross_and_Flame’s picture

Cross_and_Flame commented

I noticed in your tutorial that you mentioned you had to do some workaround with the flatforum.

Do you mind posting your node-forum.tpl.php? I've gotten flatforum installed, but dangitall if I can't seem to get it to orient properly on the page. Studying your code would help me a great deal!

Thanks in advance. Sorry for detracting from the tutorial at hand.

rszrama’s picture

rszrama commented

hehe No problem. I'll package up what I've got on Monday. Like I said, I'd like to tweak it more... you'll notice it's overwriting the precomment block I setup for Google AdSense, and I'm not happy with the left side yet. I did find it best to use hook_nodeapi to remove the forum navigation links (http://drupal.org/node/115442) and make sure comments were displayed linearly instead of "threaded." I'll have to get with Lyle at work to see if he had to make any other changes, too.

enky’s picture

enky commented

thanks a lot for the tutorial,

edinjapan’s picture

edinjapan commented

Thank you for taking the time to write this up. I'm sure it will save me and a lot of other people some precious time.
I too am interested in your tweaks for the forum. It would be most helpful if you could post them somewhere "public" when you get a chance.
Thanks again.

rszrama’s picture

rszrama commented

My apologies to Cross_and_Flame... I totally forgot to do that on Monday. When I get a chance, I'll put the code up at our site and post back here.

----------------------
Current Drupal project: http://www.ubercart.org

rszrama’s picture

rszrama commented

Ok... so I got stuck finalizing and bugfixing the uBrowser module with the rest of my day (and finalizing an order for a lady in Mexico.. woohoo). So, I've gotta post the stuff tomorrow... Sorry again. = P

----------------------
Current Drupal project: http://www.ubercart.org

rszrama’s picture

rszrama commented

It's up! Let me know if it's still not working for you using these files:

http://www.ubercart.org/forum/general_discussion/267/flatforum_garland#c...

----------------------
Current Drupal project: http://www.ubercart.org

wenhuo’s picture

wenhuo commented

glad to see it here. I will build my front page with it. so ,thanks again. hope to get mare works.

http://www.wenhuo.com

akis p’s picture

akis p commented

rszrama nice tutorial.
Another good one for the views module http://drupal.org/node/63230.

DocMartin’s picture

DocMartin commented

Looks good tutorial; read it a little while ago, and now back to actually have a go.
Been wondering: have you thought of also getting rid of your left column for the front page?
____________________________
CheungChauHK 長洲HK - South China Sea island in Hong Kong.

____________________________
DocMartin and Hong Kong Outdoors

rszrama’s picture

rszrama commented

Hmm... you know, I hadn't really thought of it. (I think mostly because then I'd have too much real estate on screen and Garland doesn't play well with logos and no left column.)

For those interested, this would be simple to do through your blocks configuration page. Just go to your blocks' configure pages and scroll down to the section headed "Page specific visibility settings." Keep the first radio select box marked and put in the text area below it. That should hide it nice and tidy.

----------------------
Current Drupal project: http://www.ubercart.org

DocMartin’s picture

DocMartin commented

It's something I'm experimenting with - got a little way with a new frontpage (not yet live) using views much as you describe; tho I have adapted Aberdeen template. I also figure Views could make for some fine custom menus, tho another step or two away.

If and when I get something I'm fairly happy with, will post back.

Edit: well, not perfect, but now have frontpage (newfrontpage - old version still around should I wish to revert) without regular Drupal columns.
A full width "welcome" message: just using panels.
Then, left column with teasers of some article nodes, as per frontpage normally. Right column has lists of articles, forum topics, blog posts (only few as yet). Hopefully useful both for search engines to find and index articles (and pass on pagerank, should the site recevie any!), as well as for users navigating. For these columns, first created pages in views.
Hardly ideal - but may be useful for others to have look at, even if to assess what not to do!
One oddity: tried including login block, but didn't appear; maybe as Views/Panel "thinks" people viewing are authenticated, tho may change in future judging by thread I've found.
____________________________
CheungChauHK 長洲HK - South China Sea island in Hong Kong.

____________________________
DocMartin and Hong Kong Outdoors

rszrama’s picture

rszrama commented

Hey Doc... couldn't get your page to load. Is it supposed to be the one in your signature?

DocMartin’s picture

DocMartin commented

I'm very slow to return to Drupal site.
Yes, it's the front page of the site in my signature - had some server troubles lately, but working just now.
Nodeteaser module also helping with this front page.

Martin
____________________________
CheungChauHK 長洲HK - South China Sea island in Hong Kong.

____________________________
DocMartin and Hong Kong Outdoors

netidme’s picture

netidme commented

thanks, thats really helpful for us beginners

www.netidme.net

RaZor Edge’s picture

RaZor Edge commented

Thank you so much rszrama. This tutorial was really useful to me!

rszrama’s picture

rszrama commented

Awesome! :) Glad people are finding it helpful.

lias’s picture

lias commented

I thought I was going to have to spend some serious time figuring out how to use panels. This is just what the doctor ordered!

lsabug

Webinationstation’s picture

Webinationstation commented

I clicked to watch the tutorial and the link is broken. Do you have this at a new location? I would like to see it. Thanks.

Toxid’s picture

Toxid commented

I would also very much like to see this tutorial.

rocoinc10’s picture

rocoinc10 commented

I too really need to see this tutorial. I have a project I need to get done and this sounds like just thing to get me there. If you could repost the tutorial I would so much appreciate it.

Thanks,

Mike

rszrama’s picture

rszrama commented

Sorry, that webhost mysteriously went down. The only way to find the info is to search Google's cache or perhaps the Internet Archive.

DocMartin’s picture

DocMartin commented

Since I benefited from the tutorial, now use Panels as standard for front pages (not that I build lots of sites), a few v brief pointers here.

First, Views and Panels are complex looking modules; can do some "deep" stuff. But, you can use only portions of them to do useful things. I still haven't figured contexts, say...

Panels is key, I think. Can create a page with content placed into various blocks; this can be achieved through theming, but Panels makes it easier.

You create a Panels page. Needs a URL path (once it's ready, visit config to tell Drupal this is to be used as frontpage).
Choose a design that looks like it will suit your page; I choose flexible.
If you choose flexible, you need to then use layout designer (via Edit content), where you can add rows, which in turn contain rows, which contain regions into which you place content. (I've learned about this by doing it, so maybe give this a go - you'll find it takes a bit of time, but isn't really complex).

Then, you'll have a page with various regions where you can place content. You can follow options to add content; Panels takes you to various menus, where you can select from a variety of content.
Maybe add something, save the page, and have a look. Then, hopefully, onwards to a better page!

Views: looks scary, and can be so. Yet you can again ignore many settings, and create Views that are useful. Can select various content elements (whether images, titles, teasers etc), and can mix and match them, also displaying in orders you choose. They can take time to set up, but then work automatically: as your site's content changes, so to do the Views.
Add a View, very likely selecting Node as the type. Then, select what it will display - in Fields. Plenty of choices here; but for home page, maybe a View with titles linked to nodes will be handy: user can click on these, to view the nodes (pages). You probably don't want all content items to perhaps display, so use Filters to select from only certain nodes. You can sort - order - the stuff that will be displayed.
Number of items to display also important.
Style is unformatted when you start; just a bare bones listing will appear. Can look better to have a grid, or a table.
Style can also include Slideshow (using Views Slideshow, which is among the modules that extend Views functionality) - this is of course handy for images; but you might also have a slideshow for text, such as latest comments - so one or two new comments display, then fade out as another one or two appear.

If you're new to Views, I think you'll find it best to experiment here. Maybe take a bit of time to figure how to use Views to create some interesting and useful displays with your site's content.

Once you have a View you like, you can create variants of it, by choosing to create Block or Page, say; in these, you can override defaults. So maybe have a block to content of a certain vocabulary.'

Well, I hope these notes help point someone in the right direction.
All being well (no server glitches, say!), you can see how I'm using some of these ideas at http://www.hkoutdoors.com/

____________________________
DocMartin and Hong Kong Outdoors

tonyofthewoods’s picture

tonyofthewoods commented

No tutorial there just a page full of cheesy ads.

AI_586-robin’s picture

AI_586-robin commented

hi there..
i'm having a problem in getting into the site you provided for the anatomy of the frontpage. I didn't see anything about frontpage on that site but instead its a free web hosting. i really really need to know how to use the frontpage module. HELP ME PLEASE. I'M BEGGING...
I copy and paste this http://ryan.grinhost.net/tutorial/2007/anatomy_front_page but it gave me a page that doesn't gave me any help.

it show this:
Edited by silverwing: Removed the copy/paste from the site

rszrama’s picture

rszrama commented

That site's been down for quite a while, but the content was waaay out of date anyways. There are likely to be much better Views and Panels tutorials now. ; )

AI_586-robin’s picture

AI_586-robin commented

can you then please send it to my email at least if you still have that tutorial? i'll appreciate it a LOT. THANKS! here's me email add: brblueberry7@gmail.com

AI_586-robin’s picture

AI_586-robin commented

how am i going to remove the copy/paste from the site? ....

to rszrama:

can you then please send it to my email at least if you still have that tutorial? i'll appreciate it a LOT. THANKS! here's me email add: brblueberry7@gmail.com

silverwing’s picture

silverwing commented

I removed what you copied/pasted here because it has no value. (It was all advertisements.)

But you can check the Way Back Machine http://web.archive.org/web/20080708225620/http://ryan.grinhost.net/tutor...

~silverwing

AI_586-robin’s picture

AI_586-robin commented

hey, thank you so much for that link!, i appreciate it a lot. thank u.!

by the way, do you have any idea on how to validate fields in drupal? like for ex. in the field Farm Name, it should only accept letters and for the field farm location it should accept letters, spaces, hyphen, the number sign, comma and numbers?

its for our project study actually, last year in college so I'm hoping you could help or anyone who knows how..
thank you..=)

pavlovt’s picture

pavlovt commented

The link http://ryan.grinhost.net/tutorial/2007/anatomy_front_page is not working anymore
It would be interesting to read this article - please provide a working link if it is published somewhere else

rszrama’s picture

rszrama commented

It's super outdated, which is why I haven't carried it forward. There are much better resources on Panels / Views now, particularly the module author's own book (Drupal's Building Blocks).