tabbed browsing of categories
tabbed browsing of categories
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
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
-
- Core Developer
- Posts: 30022
- Joined: Tue Sep 16, 2003 9:45 pm
- Location: Cologne, Germany
- Contact:
Re: tabbed browsing of categories
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:
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:
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:
And then make up a simple plugin like this, save it in your plugins directory and install it via the plugin config:
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:
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:
and then use this in your index.tpl:
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
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>
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>
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>
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 : */
?>
Code: Select all
<?php
$serendipity['smarty']->assign('category', $serendipity['GET']['category']);
?>
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']));
?>
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>
Regards,
Garvin
Last edited by garvinhicking on Tue Aug 09, 2005 2:30 pm, edited 2 times in total.
# Garvin Hicking (s9y Developer)
# Did I help you? Consider making me happy: http://wishes.garv.in/
# or use my PayPal account "paypal {at} supergarv (dot) de"
# My "other" hobby: http://flickr.garv.in/
# Did I help you? Consider making me happy: http://wishes.garv.in/
# or use my PayPal account "paypal {at} supergarv (dot) de"
# My "other" hobby: http://flickr.garv.in/
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!!!
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!!!
-
- Core Developer
- Posts: 30022
- Joined: Tue Sep 16, 2003 9:45 pm
- Location: Cologne, Germany
- Contact:
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:
That should hopefully work?
Regards,
Garvin
Code: Select all
echo '<a href="' . serendipity_categoryURL($cat, 'serendipityHTTPPath') . '" ' . ($serendipity['GET']['category'] == $cat['categoryid'] ? 'class="tab_active"' : '') . '>' . htmlspecialchars($cat['category_name']) . '</a>' . "\n";
Regards,
Garvin
# Garvin Hicking (s9y Developer)
# Did I help you? Consider making me happy: http://wishes.garv.in/
# or use my PayPal account "paypal {at} supergarv (dot) de"
# My "other" hobby: http://flickr.garv.in/
# Did I help you? Consider making me happy: http://wishes.garv.in/
# or use my PayPal account "paypal {at} supergarv (dot) de"
# My "other" hobby: http://flickr.garv.in/
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?
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?
-
- Core Developer
- Posts: 30022
- Joined: Tue Sep 16, 2003 9:45 pm
- Location: Cologne, Germany
- Contact:
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
So you need to call the .php file+directory exactly how the classname is called!
Regards,
Garvin
# Garvin Hicking (s9y Developer)
# Did I help you? Consider making me happy: http://wishes.garv.in/
# or use my PayPal account "paypal {at} supergarv (dot) de"
# My "other" hobby: http://flickr.garv.in/
# Did I help you? Consider making me happy: http://wishes.garv.in/
# or use my PayPal account "paypal {at} supergarv (dot) de"
# My "other" hobby: http://flickr.garv.in/
-
- Core Developer
- Posts: 30022
- Joined: Tue Sep 16, 2003 9:45 pm
- Location: Cologne, Germany
- Contact:
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:
Regards,
Garvin
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')
Garvin
# Garvin Hicking (s9y Developer)
# Did I help you? Consider making me happy: http://wishes.garv.in/
# or use my PayPal account "paypal {at} supergarv (dot) de"
# My "other" hobby: http://flickr.garv.in/
# Did I help you? Consider making me happy: http://wishes.garv.in/
# or use my PayPal account "paypal {at} supergarv (dot) de"
# My "other" hobby: http://flickr.garv.in/
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.
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.
-
- Core Developer
- Posts: 30022
- Joined: Tue Sep 16, 2003 9:45 pm
- Location: Cologne, Germany
- Contact:
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...
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...
# Garvin Hicking (s9y Developer)
# Did I help you? Consider making me happy: http://wishes.garv.in/
# or use my PayPal account "paypal {at} supergarv (dot) de"
# My "other" hobby: http://flickr.garv.in/
# Did I help you? Consider making me happy: http://wishes.garv.in/
# or use my PayPal account "paypal {at} supergarv (dot) de"
# My "other" hobby: http://flickr.garv.in/
-
- Regular
- Posts: 340
- Joined: Sun Jun 12, 2005 5:28 am
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:
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:
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>
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;
}
-
- Regular
- Posts: 340
- Joined: Sun Jun 12, 2005 5:28 am