For a web site I'm developing using Drupal 6, I want to produce a nice area of tabbed content. I spotted a nice plug-in called Quick Tabs (http://drupal.org/project/quicktabs) and wanted to get it to look nice on my page. I got quite complex to lay it up like I wanted, with the plethorer of views, blocks, css, mini panels, pages, etc, available to me, all adding to my confusion; eventually I worked it out. So here's what I did:
What we're aiming for
Here's the finished result:
That lovely looking set of tabs is made up of two views set in two regions in a mini-panel embedded into the Quick Tab, which is a block in turn embedded in a region on a custom panel page. Some additional CSS styling makes it look nice(ish).
To construct it, let's pull it apart bit by bit.
Views
On to the views. As I said there's two of them:
The left hand view is probably best explained by looking at the view for it:
The things of note here are:
-
CSS class: is set to news-article in order to style it in CSS.
-
Arguments: set to take the taxonomy term ID - this is so that we can re-use the view for each of the tabs simply by passing an argument to it. The argument is in the form of /2 - the internal ID of the taxonomy item. My news is categorises into various types, such as Web Updates, Coming Soon, etc.
-
Fields: well I've used the Lightbox2 plugin to make the image display nice, and also added extra CSS classes to each of them to help with rendering the CSS. For example for the image filed:
So, somewhere deep in the CSS for the site, there's stuff like this to make it look nice:
span.news-article-image {
float:left;
padding-right:5px;
}
span.news-article-title {
font-size:120%;
font-weight: bold;
}
Mini Panel(s)
Now I've got my views set up, I create a new Mini Panel, using the Mini Panels module, part of Panels (
http://drupal.org/project/panels). This is the bit of the site that's the mini panel:
Right, so in the Mini Panels configuration (Site building -> Mini Panels) I add a new one:
For layout I choose a flexible one, using the builder, as I want to set up my two columns to hold my two views how I like. Here's the layout designer screen for it:
Then I insert the two content views into the two regions by using Add Content and choosing my view.
Once inserted, I edit the parameters and set to override the title with nothing, hence removing it, and I also set the arguments (for example, to the number 2), which if you remember is used by the view to filter the taxonomy.
I repeat the same process for the right hand column view, which is just a list of the latest news items, using the same arguments as passed to the whole news article pane.
That's one mini panel done, but my tabs have five of them, so I use the Clone feature and produce the five, chasing the Administrative Title, Name and the Argument passed to it. For example, for the In The Press tab, I need to pass it the argument of 13, corresponding to the Taxonomy term for In the Press. I end up with five mini panels:
Incidentally, for the 'home' tab, Latest News, whice displays all of the news items, regardless of their taxonomy terms, I simply do not pass any argument to the view and it defaults to display all of them. Way back in the View (perhaps I should have said this earlier), you can choose what happens (what the default action is) when no arguments are passed in the settings:
Quick Tabs
Now over to Quick Tabs, making sure I first installed and enabled the module. On the Site building -> Quick Tabs menu I add a new Quick tab. Here's the first half of the edit screen for one I already set up:
Now on the lower part of the screen, I start adding the mini panels I've set up. These are actually considered to be Blocks. Here's the first three:
I set up all five of them and save my new Quick Tab.
Quick Tabs are blocks, and I put my block in on my page
Finally, I can insert the tabs into my page. The Quick Tab is a block and oddly enough, blocks appear under the category of Miscallaneous (it took me a while to find them there, eventually finding it by making sure I gave it an obvious name!):
Phew!
Hey presto! That's it for now. Quick Tabs are really nice, and Views are very powerful, but the whole thing is less than obvious to a novice, and is it elegant, or just really complicated, I'm yet to decide. I could probably document that even better, giving more detail. One thing I've found so far with Drupal, is that it seems rather difficult (and time-consuming) to document stuff, and that presumably is why the documentation is quite sketchy and inconsistent??
