Category tree displaying current branch

Random stuff about serendipity. Discussion, Questions, Paraphernalia.
Post Reply
baden32
Regular
Posts: 18
Joined: Mon Feb 12, 2007 3:48 pm

Category tree displaying current branch

Post by baden32 » Sat Jan 03, 2009 10:20 pm

In order to get a better view of the location when a page is displayed, I would like the category plugin (inseted in the leftsidebar) to displayed the current category in a different color (using css of course):

Cat1
-Cat 1.1
Cat 2
-Cat2.1

-Cat2.2.1
-Cat2.2.2
-Cat2.2
Cat 3

In my sample, all the "path" to Cat2.2.2 should be displayed in "orange" and all the resting links should be displayed in black.

What/where should I change something in order to get this result?
Thank you in advance for your help.
Joel

User avatar
garvinhicking
Core Developer
Posts: 30020
Joined: Tue Sep 16, 2003 9:45 pm
Location: Cologne, Germany
Contact:

Re: Category tree displaying current branch

Post by garvinhicking » Sat Jan 03, 2009 10:55 pm

Hi!

You can enable the smarty templating of the sidebar plugin, then you're able to change the output by editing the plugin_categories.tpl template file. In there, you can use Smarty checks to see if {$category} is equal to the current categoryid of the {foreach} loop, and then emit appropriate CSS classes to indicate active categories.

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/

baden32
Regular
Posts: 18
Joined: Mon Feb 12, 2007 3:48 pm

Post by baden32 » Sat Jan 03, 2009 11:24 pm

Hi Garvin,
Thanks a lot for your reply. I already found some issues involving the plugin_categories.tpl template file but I cannot figure out how it works and what I'm supposed to do:

1. enable the smarty templating
2. add a plugin_categories.tpl file in my template directory
3. ???

Do you have a sample/tutorial available?
Regards,
Joel

User avatar
Don Chambers
Regular
Posts: 3638
Joined: Mon Feb 13, 2006 2:40 am
Location: Chicago, IL, USA
Contact:

Post by Don Chambers » Sun Jan 04, 2009 12:45 am

Joel,

Try this as your plugin_categories.tpl as I think it is what Garvin meant:

Code: Select all

{if $is_form}
<form id="serendipity_category_form" action="{$form_url}" method="post">
    <div id="serendipity_category_form_content">
{/if}

    <ul id="serendipity_categories_list" style="list-style: none; margin: 0px; padding: 0px">
{foreach from=$categories item="plugin_category"}
        <li class="category_depth{$plugin_category.catdepth} category_{$plugin_category.categoryid}" style="display: block;">
        {if $is_form}   
            <input style="width: 15px" type="checkbox" name="serendipity[multiCat][]" value="{$plugin_category.categoryid}" />
        {/if}
   
        {if !empty($category_image)}
            <a class="serendipity_xml_icon" href="{$plugin_category.feedCategoryURL}"><img src="{$category_image}" alt="XML" style="border: 0px" /></a>
        {/if}

            <a {if $category == $plugin_category.categoryid}class="current_category" {/if}href="{$plugin_category.categoryURL}" title="{$plugin_category.category_description|escape}" style="{if $category == $plugin_category.categoryid}color: orange; {/if}padding-left: {$plugin_category.paddingPx}px">{$plugin_category.category_name|escape}</a>
        </li>
{/foreach}
    </ul>

{if $is_form}
    <div class="category_submit"><input type="submit" name="serendipity[isMultiCat]" value="{$CONST.GO}" /></div>
{/if}

    <div class="category_link_all"><a href="{$form_url}?frontpage" title="{$CONST.ALL_CATEGORIES}">{$CONST.ALL_CATEGORIES}</a></div>

{if $is_form}
    </div>
</form>
{/if}


Just decide how you want to handle the color. I did 2 things here.... First, I assigned a class to the <a>nchor if it matches a category view. You can do all your styling in a stylesheet simply by creating a new class as follows: .current_category {blah, blah} The class name can be whatever you want it to be.

I also demonstrated how you could simply do it inline since the default tpl already has an inline style for padding. In this case, I set the font color to orange.

Use whichever works for you. I did test it, and it does seem to work in my sandbox.

The categories plugin is stackable, so more than a single instance of this plugin COULD exist. It should not use unique IDs, it should use classes. I did not change those in this example.

baden32
Regular
Posts: 18
Joined: Mon Feb 12, 2007 3:48 pm

Post by baden32 » Sun Jan 04, 2009 11:50 pm

Hi Garvin and Don,
Thanks for your replies. I put the suggested content in the plugin_categories.tpl file and can see the changes, it's a first step.
Now, has mentionned in my initial post, I would like to get the whole "path" (I have 3 level of navigation) in a special color and not only the current page/category.

What info is available in order to get the expected result?
Regards,
Joel

User avatar
Don Chambers
Regular
Posts: 3638
Joined: Mon Feb 13, 2006 2:40 am
Location: Chicago, IL, USA
Contact:

Post by Don Chambers » Sun Jan 04, 2009 11:58 pm

Joel - can you post a URL to your site? I might have a better understanding of your intent if I can actually see what you are doing.

baden32
Regular
Posts: 18
Joined: Mon Feb 12, 2007 3:48 pm

Post by baden32 » Mon Jan 05, 2009 12:13 am

Of course. If you load the page http://www.cantonales2009.ch/index.php? ... 2-Le-Locle I would like to get the words/menus "GRAND CONSEIL", "Les candidats" and finally "Le Locle" in orange (and not only the last one).
Cheers,
Joel

User avatar
Don Chambers
Regular
Posts: 3638
Joined: Mon Feb 13, 2006 2:40 am
Location: Chicago, IL, USA
Contact:

Post by Don Chambers » Mon Jan 05, 2009 12:50 am

Changing your {if} expression to this:

Code: Select all

{if $category == $plugin_category.categoryid or $category_info.parentid==$plugin_category.categoryid}

... will get you this:

Parent
+Child

I cannot figure out a way to do this:

Grandparent
+Parent
++Child


The reason is that the categories know their parent, but that's it... they do not really know their grandparent, meaning the "grandparent" information is not stored with the child category.

Maybe someone more experienced has a better idea, but I really do not.

User avatar
garvinhicking
Core Developer
Posts: 30020
Joined: Tue Sep 16, 2003 9:45 pm
Location: Cologne, Germany
Contact:

Post by garvinhicking » Mon Jan 05, 2009 11:30 am

Hi!

That cannot be done then with the default plugin. you would need to create your own plugin and use the serendipity_fetchCategories() API function, iterate through the array, remember/mark parents and their childs, much like the serendipity_walkRecursive() function does.

This is some advanced stuff, though...

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/

Post Reply