Sidebar Categories Enhancement AddOn

AnAlienHolakres3 · #1 (**permalink**) 09-12-2007, 05:46 AM

Hello people. Today i would like to tell you something about sidebar categories addon. This tutorial is suitable especially for people who would like to have many categories and they want to have them in sidebar.

Basically there are 2 problems:
- too many categories = too much worthspace in sidebar, despite the fact user can scroll categories down it is still not good
- if you use background in categories sidebar (default=yes), then you have to resize this background when you use many categories

My solution is simple to understand and resolve both problems above. Every root category (which is category that has at least one subcategory) has a button (next to the rss button). With this button is possible to show and to hide subcategories. All right, stop talking, there is an example:

As you can see in the picture, there are some categories level1. When we click on the button on the right side (the button with arrow) on category level1_b, subcategories will show.

Subcategory can be also root category - if you like to have more-level subcategories.

Summary features:
- hiding subcategories as a default, possibility quickly show them just with mouse click on button
- multi subcategories supported
- possibility to change icon of hiding button (come on guys, be a little creative:))
- EASY implementation

Requirements:
- Notepad++ or any good app to edit smarty (tpl) file in it
- Pligg v97 or v98.
- yget template (but it may be possible to implement with a little customization into another).

Downloads:
There are the neccessary icons, you can copy them in your yget/images folder:
http://vselink.org/downloads/scroll_down.ico
http://vselink.org/downloads/scroll_down_hover.ico
http://vselink.org/downloads/scroll_up.ico
http://vselink.org/downloads/scroll_up_hover.ico
You are also welcome to change them if you like.

Steps to do:
1) Please backup and open file categories.tpl in your ../templates/yget/sidebar_modules/ folder. Replace ALL code with this:

[Version 0.97]
There is a difference between version 0.98 and 0.97. I use 0.97 (but i added some pictures descriptions as in v 0.98,this definitely will not appear in functionality changes) so there is code for version 0.97 of Pligg:

PHP Code:

     {php}  
//********************************************************************************************
// This file is for VERSION 0.97 ONLY!. (categories.tpl)
//Customized by AnAlienHolakres3 for Pligg Comunity. No warranty,Free of charge
//********************************************************************************************
       function set_root_smart() {
       global $main_smarty;
        $root_id=Array();
        $array = tree_to_array(0, table_categories);
            //get array of categories
            foreach ($array as $cat) {
                $cat_id[]=$cat['auto_id'];
                
            }     
           //get array of subcategories 
            foreach ($array as $subcat) {              
                $cat_parent[]=$subcat['parent'];
                
            }   
             //compare and set root ids  
             foreach ($cat_id as $category_id){
              foreach ($cat_parent as $category_parent){
                if ($category_id && $category_parent) {      
                 if ($category_id==$category_parent) {      
                   if(!in_array($category_id,$root_id)) {
                   $root_id[] = $category_id;
                
                 }
               }
             }        
           }              
       }
            
       $main_smarty->assign('root_id',$root_id);
       return $root_id;
     }
     
     set_root_smart(); 
     
   {/php}   
   
   
<div class="tlb">
    {php}
        echo "<span><a onclick=\"new Effect.toggle('cats','blind', {queue: 'end'}); \"> <img src=\"".my_pligg_base."/templates/".The_Template."/images/expand.png\"></a></span>";
    {/php}
    <a href="#">{#PLIGG_Visual_Category_Title#}</a>
</div>

<div id="cats" style="padding-bottom:1px">
    <ul class="nav-secondary">  
        {section name=thecat loop=$cat_array start=1}

            {if $cat_array[thecat].spacercount lt $lastspacer}{$cat_array[thecat].spacerdiff|repeat_count:'</ul>''</div>'}{/if}
            {if $cat_array[thecat].spacercount gt $lastspacer}<ul>{/if}

            <a href="{$URL_rsscategory, $cat_array[thecat].auto_id}" target="_blank" style="border:none;">      
            <img src="{$my_pligg_base}/templates/{$the_template}/images/rss.gif" border="0" style="float:right;padding-right:7px;"></a>
                    
                        
                        {section name=root2 loop=$root_id start=0}
                        {if $cat_array[thecat].auto_id eq $root_id[root2]}   
                          
                       <img id="picroot{$cat_array[thecat].auto_id}"style="float:right;padding-right:7px;margin-top:1px;width:18px;height:14px" src="../templates/yget/images/scroll_down.ico" width="18" height="14" 
                        onmouseover="this.src='../templates/yget/images/scroll_down_hover.ico';this.width='18';this.height='14'" onmouseout="this.src='../templates/yget/images/scroll_down.ico';this.width='18';this.height='14'" onmousedown="document.getElementById('subcat{$cat_array[thecat].auto_id}').style.display='';document.getElementById('picrootU{$cat_array[thecat].auto_id}').style.display='';this.style.display='none'"> 
                       
                       <img id="picrootU{$cat_array[thecat].auto_id}"style="float:right;padding-right:7px;margin-top:1px;display:none;width:18px;height:14px" src="../templates/yget/images/scroll_up.ico" width="18" height="14" 
                        onmouseover="this.src='../templates/yget/images/scroll_up_hover.ico';this.width='18';this.height='14'" onmouseout="this.src='../templates/yget/images/scroll_up.ico';this.width='18';this.height='14'" onmousedown="document.getElementById('subcat{$cat_array[thecat].auto_id}').style.display='none';document.getElementById('picroot{$cat_array[thecat].auto_id}').style.display='';this.style.display='none'"> 
                          {/if}                                     
                          {/section}   
                        
                            
            
                    {if $pagename eq "published"} 
                       
                       
                    
                        {section name=root loop=$root_id start=0}
                        {if $cat_array[thecat].auto_id eq $root_id[root]}                                                                                                
                        <a href="{$URL_maincategory, $cat_array[thecat].safename}" style="padding-bottom:5px;">{$cat_array[thecat].name}</a> 
                        <div id="subcat{$cat_array[thecat].auto_id}" style="display:none">   
                        {assign var=root_category value=$cat_array[thecat].auto_id}      
                        {/if}                       
                        {/section}  
                        
             
                        {if $cat_array[thecat].auto_id neq $root_category}  
                         <a href="{$URL_maincategory, $cat_array[thecat].safename}" style="padding-bottom:5px">{$cat_array[thecat].name}</a>  
                         {/if}
                      
                     
                        {else}  
                        
                        {section name=root loop=$root_id start=0}
                        {if $cat_array[thecat].auto_id eq $root_id[root]}                                                                                                
                        <a href="{$URL_queuedcategory, $cat_array[thecat].safename}" style="padding-bottom:5px;">{$cat_array[thecat].name}</a> 
                        <div id="subcat{$cat_array[thecat].auto_id}" style="display:none">   
                        {assign var=root_category value=$cat_array[thecat].auto_id}      
                        {/if}                       
                        {/section}  
                        
             
                        {if $cat_array[thecat].auto_id neq $root_category}  
                         <a href="{$URL_queuedcategory, $cat_array[thecat].safename}" style="padding-bottom:5px">{$cat_array[thecat].name}</a>  
                         {/if}
                        
                  
                        {/if}
               
                                                   
                    
                    
                    
                    </li>      
            
            {assign var=lastspacer value=$cat_array[thecat].spacercount}
        {/section}
    </ul>
</div>

[PART 2 OF THIS TUTORIAL IN NEXT POST]

AnAlienHolakres3 · #2 (**permalink**) 09-12-2007, 05:48 AM

[Version 0.98]
Many of you are able to easilly upgrade or make a fresh install of Pligg v0.98, following code is a little customized code for the latest version of Pligg (v 0.98). Ok, there is a code for this version:

PHP Code:

     {php}  

//********************************************************************************************

// This file is for VERSION 0.98 ONLY!. (categories.tpl)

//Customized by AnAlienHolakres3 for Pligg Comunity. No warranty,Free of charge

// If you like it you can always make your own tut for the rest of us

//********************************************************************************************

       function set_root_smart() {

       global $main_smarty;

        $root_id=Array();

        $array = tree_to_array(0, table_categories);

            //get array of categories

            foreach ($array as $cat) {

                $cat_id[]=$cat['auto_id'];

                

            }     

           //get array of subcategories 

            foreach ($array as $subcat) {              

                $cat_parent[]=$subcat['parent'];

                

            }   

             //compare and set root ids  

             foreach ($cat_id as $category_id){

              foreach ($cat_parent as $category_parent){

                if ($category_id && $category_parent) {      

                 if ($category_id==$category_parent) {      

                   if(!in_array($category_id,$root_id)) {

                   $root_id[] = $category_id;

                

                 }

               }

             }        

           }              

       }

            

       $main_smarty->assign('root_id',$root_id);

       return $root_id;

     }

     

     set_root_smart(); 

     

   {/php}  

<div class="tlb">

    {php}

        echo "<span><a onclick=\"new Effect.toggle('cats','blind', {queue: 'end'}); \"> <img src=\"".my_pligg_base."/templates/".The_Template."/images/expand.png\" alt=\"expand\" /></a></span>";

    {/php}

    <a href="#">{#PLIGG_Visual_Category_Title#}</a>

</div>

 
<div id="cats" style="padding-bottom:1px">

    <ul id="nav-secondary">

        <li>

            {section name=thecat loop=$cat_array start=1}

                {if $lastspacer eq ""}

               

                    {assign var=lastspacer value=$cat_array[thecat].spacercount}

                {/if}

 
                {if $cat_array[thecat].spacercount lt $lastspacer}{$cat_array[thecat].spacerdiff|repeat_count:'</li></ul></div>'}{/if}

                {if $cat_array[thecat].spacercount gt $lastspacer}<ul style="padding-left:12px"><li>{/if}

 
                <a href="{$URL_rsscategory, $cat_array[thecat].auto_id}" target="_blank" style="border:none;">      

                <img src="{$my_pligg_base}/templates/{$the_template}/images/rss.gif" border="0" style="float:right;padding-right:10px;" alt="RSS" /></a>

                

                        {section name=root2 loop=$root_id start=0}

                        {if $cat_array[thecat].auto_id eq $root_id[root2]}   

                          

                       <img id="picroot{$cat_array[thecat].auto_id}"style="float:right;padding-right:7px;margin-top:1px;width:18px;height:14px" src="../templates/yget/images/scroll_down.ico" width="18" height="14" 

                        onmouseover="this.src='../templates/yget/images/scroll_down_hover.ico';this.width='18';this.height='14'" onmouseout="this.src='../templates/yget/images/scroll_down.ico';this.width='18';this.height='14'" onmousedown="document.getElementById('subcat{$cat_array[thecat].auto_id}').style.display='';document.getElementById('picrootU{$cat_array[thecat].auto_id}').style.display='';this.style.display='none'"> 

                       

                       <img id="picrootU{$cat_array[thecat].auto_id}"style="float:right;padding-right:7px;margin-top:1px;display:none;width:18px;height:14px" src="../templates/yget/images/scroll_up.ico" width="18" height="14" 

                        onmouseover="this.src='../templates/yget/images/scroll_up_hover.ico';this.width='18';this.height='14'" onmouseout="this.src='../templates/yget/images/scroll_up.ico';this.width='18';this.height='14'" onmousedown="document.getElementById('subcat{$cat_array[thecat].auto_id}').style.display='none';document.getElementById('picroot{$cat_array[thecat].auto_id}').style.display='';this.style.display='none'"> 

                          {/if}                                     

                          {/section}  

                

                

        

                {if $pagename eq "published"}

                

                    {section name=root loop=$root_id start=0}

                        {if $cat_array[thecat].auto_id eq $root_id[root]}                                                                                                

                        <a href="{$URL_maincategory, $cat_array[thecat].safename}" style="padding-bottom:5px;">{$cat_array[thecat].name}</a> 

                        <div id="subcat{$cat_array[thecat].auto_id}" style="display:none">   

                        {assign var=root_category value=$cat_array[thecat].auto_id}      

                        {/if}                       

                        {/section}  

                        

             

                        {if $cat_array[thecat].auto_id neq $root_category}  

                         <a href="{$URL_maincategory, $cat_array[thecat].safename}" style="padding-bottom:5px">{$cat_array[thecat].name}</a>  

                         {/if}

                

                

                

    

                {else}

                    <a href="{$URL_queuedcategory, $cat_array[thecat].safename}" style="padding-bottom:5px;">{$cat_array[thecat].name}</a>

                {/if}

    

                {assign var=lastspacer value=$cat_array[thecat].spacercount}

            {/section}

        </li>

    </ul>

</div>

You can save and upload the file. Thats all you have to do. Very easy,yeah?:)

I know this is a little hardcoded javascript so if anybody has a better solution I am listening. If anybody is interested in manually upgrading from v0.97 into v.098 and would like to know how implement this code of version 0.98 into Pliggg v 0.97 there is no simple answer. I think it would be neccessary to edit main css file and maybye more, more details you should get from Pligg developers.

Any comments feel free to post:)

tbones · #3 (**permalink**) 09-12-2007, 07:59 AM

Hi AnAlienHolakres3,
I´m using v9.5 and I would be very interested in your code. My problem: I´m no coder. I´ve managed to get beatniak´s category colours running at sidebar_modules/categories.tpl and would not know how to combine both codings.

Are you interested to help me if I send you my file?

AnAlienHolakres3 · #4 (**permalink**) 09-12-2007, 08:56 AM

Yeah you can try it. It shouldnt be significant problem....

tbones · #5 (**permalink**) 09-12-2007, 10:45 AM

Quote:

Originally Posted by AnAlienHolakres3

The Following 5 Users Say Thank You to AnAlienHolakres3 For This Useful Post:
AshDigg, crakez, kbeeveer46, SoapTaco, Yankidank

The Following 2 Users Say Thank You to AnAlienHolakres3 For This Useful Post:
dollars5, jonathanb