tabbed browsing of categories

[sweety]

hi all,
Can we have tabbed browsing for categories?i.e instead of appearing in the sidebar, the categories shold appear on the top of the index page and when we click on a category, all its sub categories must be shown......It must be something like expanding and collapsing of menus......where all the parent categories are nothing but menu items..........
Is this possible..... If yes, how?
Thanks in advance for ur help

[garvinhicking]

This is possible via templating, yes.

You can achieve this with 3 methods:

1. The easiest way requires Serendipity 0.9.

Edit your index.tpl template. Take a look around where you want to tab-menu to be. Code it something like this:

Code: Select all

<div class="tabmenu">
<a href="/serendipity/categories/1-X">Cat 1</a>
<a href="/serendipity/categories/2-X">Cat 2</a>
<a href="/serendipity/categories/3-X">Cat 3</a>
</div>

You will also need CSS to display those as a tablist. This will not be covered here, there are a lot of CSS tutorials available.

The next step is to make the current tab active. For that you can add some Smarty things:

Code: Select all

<div class="tabmenu">
<a href="/serendipity/categories/1-X" {if $category == 1}class="active"{/if}>Cat 1</a>
<a href="/serendipity/categories/2-X" {if $category == 2}class="active"{/if}>Cat 2</a>
<a href="/serendipity/categories/3-X" {if $category == 3}class="active"{/if}>Cat 3</a>
</div>

This will make the selected tab active. Now this method has the disadvantage that you need to enter the list of categories manually to your template, but the advantages that its easy to do and no plugin is necessary.

2. (This method also works with Serendipity 0. You could make the same with a plugin that emits the same HTML code. Then instead of printing the HTML in your stylesheet you would only place this code:

Code: Select all

<div class="tabmenu">
{serendipity_hookPlugin hook="frontend_categorytabs" hookAll=true}
</div>

And then make up a simple plugin like this, save it in your plugins directory and install it via the plugin config:

Code: Select all

<?php # $Id: serendipity_event_spartacus.php 346 2005-08-01 17:35:25Z garvinhicking $
class serendipity_event_categorytabs extends serendipity_event
{
    var $title = 'Category Tabs';

    function introspect(&$propbag) {
        global $serendipity;

        $propbag->add('name',          'Category Tabs');
        $propbag->add('description',   '');
        $propbag->add('stackable',     false);
        $propbag->add('author',        'Garvin Hicking');
        $propbag->add('version',       '1.0');
        $propbag->add('requirements',  array('serendipity' => '0.8'));
        $propbag->add('event_hooks',   array('frontend_categorytabs' => true));
        $propbag->add('groups', array('TEMPLATES'));
    }

    function generate_content(&$title) {
        $title = $this->title;
    }

    function event_hook($event, &$bag, &$eventData) {
        global $serendipity;

        if ($event == 'frontend_categorytabs') {
            $cats = serendipity_walkRecursive(serendipity_fetchCategories(), 'categoryid', 'parentid', VIEWMODE_THREADED);
            foreach ($cats as $cat) {
                if ($cat['depth'] > 0) continue;
                if (function_exists('serendipity_categoryURL')) {
                    $link = serendipity_categoryURL($cat, 'serendipityHTTPPath');
                } else {
                    $link = serendipity_rewriteURL(PATH_CATEGORIES . '/' . serendipity_makePermalink(PERM_CATEGORIES, array('id' => $cat['categoryid'], 'title' => $cat['category_name'])), 'serendipityHTTPPath');
                }
                echo '<a href="' . $link . '" ' . ($serendipity['GET']['category'] == $cat['categoryid'] ? 'class="tab_active"' : '') . '>' . htmlspecialchars($cat['category_name']) . '</a>' . "\n";
            }
            return true;
        }
        
        return false;
    }
}

/* vim: set sts=4 ts=4 expandtab : */
?>

You can modify method 1 to work with 0.8 if you put a config.inc.php file into your template directory with this content:

Code: Select all

<?php
$serendipity['smarty']->assign('category', $serendipity['GET']['category']);
?>

3. If you don't want to depend on a plugin, you can put the whole way of fetching the categories into the template's config.inc.php:

Code: Select all

<?php
function smarty_getCategories($params, &$smarty) {
    $cats = serendipity_walkRecursive(serendipity_fetchCategories(), 'categoryid', 'parentid', VIEWMODE_THREADED);
    $returncats = array();
    foreach($cats AS $cat) {
        if ($cat['depth'] > 0) continue;
        $cat['url']           = serendipity_categoryURL($cat, 'serendipityHTTPPath');
        $cat['category_name'] = htmlspecialchars($cat['category_name']);
        $returncats[] = $cat;
    }

    return $returncats;
}

$serendipity['smarty']->register_function('smarty_getCategories', 'smarty_getCategories');
$serendipity['smarty']->assign('category', $serendipity['GET']['category']);
$serendipity['smarty']->assign('categories', smarty_getCategories(null, $serendipity['smarty']));
?>

and then use this in your index.tpl:

Code: Select all

<div class="tabmenu">
{foreach from=$categories item="ccategory"}
    <a href="{$ccategory.url}" {if $ccategory.categoryid == $category}class="tab_active"{/if}>{$ccategory.category_name}</a>
{/foreach}
</div>

I hope you see the grace in the flexibility of Serendipity. I think MySchizoBuddy from the forums has created a tab-based layout already, maybe he's willing to share?

Regards,
Garvin

[sweety]

hi Garvin,
Thankyou for ur help as u always do..........
I will definitely try one of these methods and update u........

[sweety]

hi Garvin,
I tried the 2nd method that is inserting a plugin. My serendipity version is 0.8..............I got an error saying unexpected ) in line 30 of the plugin...........so I modified it to
echo '<a href="' . serendipity_categoryURL($cat, 'serendipityHTTPPath') . '" ' . ($serendipity['GET']['category'] == $cat['categoryid'] ? 'class="tab_active" : ' '') . '>' . htmlspecialchars($cat['category_name']) . '</a>' . "\n";

But while I am trying to install it from the application.......I am getting
the following error
Error: serendipity_event_categorytab
Should I register the plugin anywhere in the code??
plz help!!!

[garvinhicking]

Sorry, you were right, there was a parse error in the plugin. I modified the code on that line in my example; it seems you did not properly fix it because you have uneven quotes. Try this line:

Code: Select all

echo '<a href="' . serendipity_categoryURL($cat, 'serendipityHTTPPath') . '" ' . ($serendipity['GET']['category'] == $cat['categoryid'] ? 'class="tab_active"' : '') . '>' . htmlspecialchars($cat['category_name']) . '</a>' . "\n";

That should hopefully work?

Regards,
Garvin

[sweety]

hi garvin,
we tried as you said.........but still it isn't working. Our serendipity version is 0.8
we placed the first part of 2nd method in index.tpl file of default template
and created a folder called serendipity_event_categorytab and placed the code u sent as serendipity_event_categorytab.php ,in that folder.
And when I am trying to install the plugin through configure plugins......the following error is coming.....
Error: serendipity_event_categorytab
is there anything more i need to do?

[garvinhicking]

I'm sorry, it seems you saved the file as "serendipity_event_categorytab.php", but the classname was "serendipity_event_categorytabs.php".

So you need to call the .php file+directory exactly how the classname is called!

Regards,
Garvin

[Guest]

hi,
could install the plugin but getting an error saying:
undefined function serendipity_categoryURL();

[garvinhicking]

Oh, alright. That function only exists since 0.9.

For 0.8 one needs to use a different syntax, I've patched the plugin above again to replace the call with:

Code: Select all

serendipity_rewriteURL(PATH_CATEGORIES . '/' . serendipity_makePermalink(PERM_CATEGORIES, array('id' => $cat['categoryid'], 'title' => $cat['category_name'])), 'serendipityHTTPPath')

Regards,
Garvin

[Guest]

Method 3 does not work properly, I just get a white page.

[sweety]

Hi Garvin,
Finally with ur help, I am able to install the categorytabs plugin and clear all the errors. But its not showing what I actually wanted......all the parent categories are being displayed at the top ...but when I click on a tab just its blogs are being dispayed but the sub-categories are not being displayed ..but what I wanted is only parent categories being displayed as is done and also its sub categories are to be shown when onmouseover/onclick...
(just like menus that we do using java scripts and all)
Can u plz help me get them.

[garvinhicking]

You can do that by adapting the method and editing the template and using CSS/JavaScript.

Sorry, this is just too much to be done, you must tweak it yourself.

Regards,
Garvin

(Or you can ask for people doing the adaption for money/gifts...

[MySchizoBuddy]

Ah this is what i was looking for, this definetly is much more involved.

[Trograin]

Template Leaf is having tabbed menues in its Header. But it dosent let you to show any subdirectories as was poitned out earlier, javascripts are nice

What I wanted to come to was this: If you dont want to create a plugin for this operation, take a look at Leaf Templates index.tpl and look at the codes that looks something like this:

Code: Select all

<li class="nav1"><a href="{$serendipityBaseURL}index.php?/categories/6-Nyheter" title="Weblog" accesskey="1">Weblog</a></li>

I extended the url simply to show the url to the specific category, title is easy to udnerstand and the accesskey too. Then. Class shows nav1

You can create ore and in Leaf style.css you will find nav1 - nav4. You will be able to create more as long as you notice that you chouls extend the px on the placement of the tab with adding 82 to the number

The css code part looks something like this:

Code: Select all

/*THIS PART IS FOR THE NAVIGATION LINKS*/
.nav1 a:link, .nav1 a:visited, .nav2 a:link, .nav2 a:visited, .nav3 a:link, .nav3 a:visited, .nav4 a:link, .nav4 a:visited, .nav5 a:link, .nav5 a:visited, .nav6 a:link, .nav6 a:visited{
	color: #4E4E4E;
	width: 80px;
	height: 20px;
	line-height: 20px;
	background: url({TEMPLATE_PATH}img/linkbg2.gif) top repeat-y;
	padding: 0;
}
.nav1 a:link, .nav1 a:visited{
	position: absolute;
	top: 0;
	left: 14px;
}
.nav2 a:link, .nav2 a:visited{
	position: absolute;
	top: 0;
	left: 96px;
}
.nav3 a:link, .nav3 a:visited{
	position: absolute;
	top: 0;
	left: 178px;
}
.nav4 a:link, .nav4 a:visited{
	position: absolute;
	top: 0;
	left: 260px;
}
.nav5 a:link, .nav5 a:visited{
        position: absolute;
        top: 0;
        left: 342px;
}
.nav6 a:link, .nav6 a:visited{
        position: absolute;
        top: 0;
        left: 424px;
}

/*HOVER EFFECTS*/
.nav1 a:hover,
.nav1 a:active,
.nav2 a:hover,
.nav2 a:active,
.nav3 a:hover,
.nav3 a:active,
.nav4 a:hover,
.nav4 a:active
.nav5 a:hover,
.nav5 a:active 
.nav6 a:hover,
.nav6 a:active 
{
	background: url({TEMPLATE_PATH}img/linkbg1.gif) top repeat-y;
	margin: 1px 0 0 0;
}
/*USE A DIFFERENT COLOR WHEN USER IS ON THAT PAGE*/
#Weblog .nav1 a:link,
#Weblog .nav1 a:visited,
#Hålbar .nav2 a:link,
#Hålbar .nav2 a:visited,
#Urban .nav3 a:link,
#Urban .nav3 a:visited,
#Rural .nav4 a:link,
#Rural .nav4 a:visited,
#Lagar .nav5 a:link,
#Lagar .nav5 a:visited,
#Forum .nav6 a:link,
#Forum .nav6 a:visited, {
	background: url({TEMPLATE_PATH}img/linkbg1.gif) top repeat-y;
}

[MySchizoBuddy]

OK i added to the plugin and the drop down menu and all is working. the sub categories are all fake right now casue i dunno how to detect subcategories.
garvin can u tell me how to detect subcategories so i can finish this plugin.
Thanks in advance