How do I display the parent category of the current category?

Bloke · 2008-01-16 07:24:45

Kjeld wrote:

Steff, it works like a charm! Thanks so much. I really appreciate this.

Cool.

Let me know if you’d like to see how I implemented this, and I’ll send you a link to the site I am building by e-mail.

Yes please. I’d like to see it in action.

I haven’t played around yet with catnum (I use it in a page and not an article) and level. I will do that soon and let you know if I am able to break anything. ;-)

Excellent, thanks for being a beta tester. I’ll wait and see if anyone else chimes in with bug reports (mrdale? thebombsite?) before I officially release it — maybe later tonight.

I think smd_if and smd_parent are perhaps the only two tags that allow you to play with the parent category?

Quite likely. I know that the category hierarchy is fairly underused in TXP at present. The thing is, smd_parent would have been easier to code as a hack to the txp:category tag. I had to duplicate some of the checking functionality it does.

There is one thing you may find: compare the output when using catnum to the output of using the built-in category1/category2 tags. They seem to do something different with messy URLs whereas smd_parent always calls txp:category with the name of the parent you require — since txp:category1 always outputs category1, it is not usable.

I’m not sure why the txp:category and txp:category1/2 tags differ in output — mostly they do the same thing — so I don’t know if this impacts smd_parent’s usability at all or if the extra stuff is just legacy code in the core. My guess is it’s in there for a reason but I can’t figure it out. If anyone has any insight, please share.

Kjeld · 2008-01-16 07:43:04

Couldn’t find an e-mail address for you right away, so used the comment thing on your site.

SebastianS · 2008-01-16 10:39:23

Kjeld, first off I was fascinated to look through your sites on Japan, both from a historical and contempory perspective.

You made the offer:-
“If anybody wants the actual tags, html and css, just let me know on this thread and I will post it”.

I would like to take you up, as it would help me understand how the tags work.

Thank you Stef for the work you put into the plugin.

Last edited by SebastianS (2008-01-16 10:39:49)

Kjeld · 2008-01-16 12:46:39

Hi SebastianS,

I am not a very rational programmer. I just try, make a small change and try again until something works. So if this doesn’t work for you, I won’t be much of a help, I am afraid…

This is set up for a site with two sections (japan and non-japan) and a dozen categories with sub-categories up to two levels deep. The sample below shows css for three top categories (arts, business, computers).

Plugins used:

smd_if
smd_parent
stw_category_tree version 1.0.1 (start of thread) | version 1a.2 (gives me lots of error messages…)

Body tag of default page:

<body <txp:if_category><txp:smd_if field="parent:LVL1" operator="gt" value="0">id="<txp:smd_parent />"<txp:else />id="<txp:category />"</txp:smd_if><txp:else />id="home"</txp:if_category>>

Body tag of archive page (which displays the individual article):

<body <txp:if_individual_article><txp:smd_if field="parent:CAT1" operator="gt" value="0">id="<txp:smd_parent catnum="1" />"<txp:else />id="<txp:category1 />"</txp:smd_if><txp:else /><txp:if_category><txp:smd_if field="parent:LVL1" operator="gt" value="0">id="<txp:smd_parent />"<txp:else />id="<txp:category />"</txp:smd_if><txp:else />id="home"</txp:if_category></txp:if_individual_article>>

The tags above output the current category as an id. For example:

<body id="arts">

The category menu (in my case, in the left menu). It doesn’t show empty categories (so make sure you have articles with categories, or remove killempties=“y”). And it only shows the categories that belong to the current active section (so make sure you are in a section, or remove localized=“y”):

<txp:stw_category_tree maxlevel="1" section="*" break"li" cssid="catmenu" killempties="y" localized="y" />

The css. The following sets up your list style:

ul#catmenu {
 list-style: none;
 margin: 0;
 padding: 0;
}
ul#catmenu li a {
 display: block;
 width: 100%;
 font-size: 12px;
 font-weight: bold;
 line-height: 180%;
 color: #787878;
 text-indent: 8px;
}

css continued. This determines the look when a visitor hovers over the links. Each category has a different color. For each top category, add a new ul#catmenu li#cat-[category name] a:hover statement with a different color:

ul#catmenu li a:hover  {
 color: #E56701;
 border-left: 4px solid #E56701;
 text-indent: 4px;
 text-decoration: none;
}
ul#catmenu li#cat-business a:hover  {
	border-left: 4px solid #006EC6;
}
ul#catmenu li#cat-computers a:hover  {
	border-left: 4px solid #9C9;
}

css continued. This makes the category link active (even when you are on an individual page!). For each top category, add a new #[category name] li#cat-[category name] a statement to the top cluster.:

body#arts li#cat-arts a, #business li#cat-business a, #computers li#cat-computers a {
 color: #E56701;
 border-left: 4px solid #E56701;
 text-indent: 4px;
 text-decoration: none;
 /*width: 156px;*/
 background: #F2F2F2;  /* #D6D6D6 #DCDDD3 */
}

css continued. This gives each category a unique color. For each top category, add a new body#[category name] li#cat-[category name] a statement with a different color:

body#business li#cat-business a  {
	border-left: 4px solid #006EC6;
}
body#computers li#cat-computers a {
	border-left: 4px solid #9C9;
}

The fun part is that this works for an individual article (an active class does not).

What makes it even more fun is that you can use the body id to make any part of your site change color according to the category. Say that you have a heading for each category to which you want to add a color coded square. Use this css:

#head-left {
 display: inline;
 font-size: 14px;
 color: #737272;
 font-weight: bold;
 float: left;
 text-transform: uppercase;
}
body#arts #head-left {
	border-left: 16px solid #E56701;
	text-indent: 4px;
}
body#business #head-left {
	border-left: 16px solid #006EC6;
	text-indent: 4px;
}
body#computers #head-left {
	border-left: 16px solid #9C9;
	text-indent: 4px;
}

And this html:

<div id="head-left">[your category header]</div>

The options are truly endless. You can have the whole page change color for each category if you want to. You can add different background images per category. You can even have different lay-outs per category. It is all up to your imagination and available free time. ;-)

In my case it gives me something like this (notice how deep down the category tree this page is):

Click on a different category, and wow, a different color:

Cool, hey!

Last edited by Kjeld (2008-01-17 00:36:32)

Bloke · 2008-01-16 22:49:17

Hey that’s pretty sweet Kjeld. Cunning! Thanks for the site link, btw; lookin good :-)

I didn’t hear any outcry about the plugin all day so smd_parent is now official. That version is a bit more optimized and has better help, so anyone who downloaded the “beta” version above should probably revisit the link to get the proper version.

SebastianS · 2008-01-16 23:04:58

Thank you for posting that Kjeld, I will take time to look at it, it has already given me some ideas.

May I point out in case you are not aware of it that there is a stw_category_tree 1a.2 version linked from stw_category_tree page 25 Paul_U
reply number 249.
And thank you Stef for the smd parent official version.

Last edited by SebastianS (2008-01-16 23:20:44)

Kjeld · 2008-01-17 00:25:09

SebastianS wrote:

Thank you for posting that Kjeld, I will take time to look at it, it has already given me some ideas.

You’re welcome. It is nice to be able to give back to the community.

May I point out in case you are not aware of it that there is a stw_category_tree 1a.2 version linked from stw_category_tree page 25 Paul_U
reply number 249.

I had read over that somehow. ~~Upgrades should be listed on the first entry of the thread, don’t you think?~~ (Edit: the upgrade didn’t come from the author, I found out.) Have adjusted it above.

EDIT: I installed 1a.2, but it gives me lots of errors. Went back to the previous (author made) version.

Last edited by Kjeld (2008-01-17 00:44:38)

Kjeld · 2008-01-17 00:33:42

Bloke wrote:

Hey that’s pretty sweet Kjeld. Cunning! Thanks for the site link, btw; lookin good :-)

Thanks

I didn’t hear any outcry about the plugin all day so smd_parent is now official. That version is a bit more optimized and has better help, so anyone who downloaded the “beta” version above should probably revisit the link to get the proper version.

Thanks, Steff. I have just upgraded.

Last edited by Kjeld (2008-01-17 00:33:56)

Textpattern CMS

Textpattern CMS support forum

#13 2008-01-16 07:24:45

Re: How do I display the parent category of the current category?

#14 2008-01-16 07:43:04

Re: How do I display the parent category of the current category?

#15 2008-01-16 10:39:23

Re: How do I display the parent category of the current category?

#16 2008-01-16 12:46:39

Re: How do I display the parent category of the current category?

#17 2008-01-16 22:49:17

Re: How do I display the parent category of the current category?

#18 2008-01-16 23:04:58

Re: How do I display the parent category of the current category?

#19 2008-01-17 00:25:09

Re: How do I display the parent category of the current category?

#20 2008-01-17 00:33:42

Re: How do I display the parent category of the current category?

Board footer