Download: Category Lister v1.02

Basic Usage:

Basic usage for the Cat_lister plugin is rather straightforward. The following example would create a simple list of categories with the number of entries and comments within each category:

{exp:cat_lister weblog=" {master_weblog_name}"}

<a href="http://www.home.com/index.php/weblog/C {cid}/" > {name}</a>

( {entries}/ {comments})<br />

{/exp:cat_lister}

Resulting in a list this may look something like this:

Entertainment (45/443)

News (12/203)

Personal (8/45)

Politics (19/392)

Simple and to the point, this example assumes that you do not have any subcategories, but one simple change could take that into account and show off the power of the “Pseudo-Nested” ability:

{exp:cat_lister weblog=" {master_weblog_name}"}

<a href="http://www.home.com/index.php/weblog/C {cid}/" > {ps_name}</a>

( {entries}/ {comments})<br />

{/exp:cat_lister}

Now if you have subcategories, you may have a list like this:

Entertainment (45/443)

Entertainment – Movies (20/443)

Entertainment – Television (6/443)

Entertainment – Television – Comedy (2/443)

Entertainment – Television – Drama (4/443)

Entertainment – Theater (3/443)

News (12/203)

Personal (8/45)

Personal – Dating (3/45)

Personal – Career (2/45)

Politics (19/392)

The advantage of the “Pseudo Nested” list is that you will not have to provide a huge amount of CSS definitions to have it display well. It is a fast and easy why to display your hierarchical list and not think about it.

To turn the above tag into an HTML ordered list you may want to use the following example:

{exp:cat_lister weblog=" {master_weblog_name}" display_style=”NListO”}

<a href="http://www.home.com/index.php/weblog/C {cid}/" > {name}</a>

( {entries}/ {comments})<br />

{/exp:cat_lister}

And the resulting list would look like this:

1. Entertainment (45/443)
   1. Movies (20/443)
   2. Television (6/443)

                                                              i.      Comedy (2/443)

                                                             ii.      Drama (4/443)

3. Theater (3/443)
1. News (12/203)
2. Personal (8/45)
   1. Dating (3/45)
   2. Career (2/45)
3. Politics (19/392)

At this point you will want to add some CSS definitions to allow you to format the list the way you want it. This is just the simplest of samples.

Advanced Usage:

The following is an example of the “Nesting Level” type of output. First, a little bit of discussion.

The “Nesting Level” scheme came about when I was having problems putting a nested list next to an image and it was rendering differently in different browsers. Therefore, I had to figure out a way of creating the list without using an HTML nested list. This led me to styles dependant on padding and thus the “Nested Levels” idea. The advantages are that you can place them next to just about anything and they should render correctly. The disadvantage is that you have to define a level for each “Depth” your list goes deep. If you have control of the category list and the depth it goes, then you can use this method without any problem. On the other hand if you are not in control of the category list and the depth of the nested levels exceeds the defined CSS it will look awful, in which case I recommend you use HTML lists to accomplish the same thing.

In the next version of this plugin I will have the plugin write the appropriate CSS to have this work at any level, but for now, you are going to have to self-limit as appropriate. As I said, for me this is not problem, but you will have to make the determination on your own.

The CSS for Nested Level output:

(Change to suit your application of course)

<style>

.cat1 { font: bold 10px 'Lucida Grande', Verdana, Arial, Sans-Serif;

width: 230px;

padding-left: 0px;

background: #dddddd; }

.cat2 { font: 10px 'Lucida Grande', Verdana, Arial, Sans-Serif;

text-decoration: none;

width: 215px;

       padding-left: 15px;

background: #cccccc; }

.cat3 { font: 10px 'Lucida Grande', Verdana, Arial, Sans-Serif;

text-decoration: none;

width: 200px;

       padding-left: 30px;

background: #bbbbbb; }

</style>

This will allow for a nested list up to three levels deep. Beyond that, you will have to add to the style definitions. Here are three samples that I think you will find useful:

Example One:

This example is a simple version of “Nesting Levels” and creates the sample below it. In theory it should look very similar to the above examples but without the “List” tags in the underlying code. From a modern coding standpoint this is fairly advance in that it uses all CSS to create the effect. There are no tables and of course no lists to get in the way of the display.

{exp:cat_lister weblog=" {master_weblog_name}"}

<div class="cat {nest_lvl}">

<a href="http://www.miasmaofmusings.com/index.php/weblog/C {cid}/">

{name}</a> ( {total_e}/ {total_c})</div>

{/exp:cat_lister}

Want to add a bullet in front of each, change the “ {name}” to “&bull; {name}” and there you go. Easy, instant bulleted, hierarchical list.

Example Two:

OK, so you do not like the crowded nature of the list. The numbers are too close to the categories and you want to see them maybe all the way to the left. Why not try this:

{exp:cat_lister weblog=" {master_weblog_name}"}

<div class="cat {nest_lvl}"><div style="float: left;">

<a href="http://www.miasmaofmusings.com/index.php/weblog/C {cid}/">

&bull; {name}</a></div>

<div align="right">( {total_e}/ {total_c})</div></div>

{/exp:cat_lister}

When the above is displayed in a page this will look nice and professional and so simple to do.

Example Three:

How about using the nesting level with the “Pseudo Name” convention? You can get an interesting effect with that. In this case you will not be using the “Nesting Level” as a way of indenting, but a way of shading to denote the depth of the selection adding a visual clue as to the location of the category.

The CSS for this example:

<style>

.cat1 { font: bold 10px 'Lucida Grande', Verdana, Arial, Sans-Serif;

text-decoration: none;

background: #dddddd; }

.cat2 { font: 10px 'Lucida Grande', Verdana, Arial, Sans-Serif;

text-decoration: none;

background: #cccccc; }

.cat3 { font: 10px 'Lucida Grande', Verdana, Arial, Sans-Serif;

text-decoration: none;

background: #bbbbbb; }

</style>

{exp:cat_lister weblog=" {master_weblog_name}" p_separator=” · “}

<div class="cat {nest_lvl}"><div style="float: left;">

<a href="http://www.miasmaofmusings.com/index.php/weblog/C {cid}/">

{ps_name}</a></div>

<div align="right">( {entries}/ {comments})</div></div>

{/exp:cat_lister}

By combining the parameter, styles and available information (nesting level) you can create just about any output you can think of. Already I am thinking about rollover possibilities and background images and the like making this plugin very versatile indeed.