Category Icons

[seer]

My last question of the day I promise

Is there an easy hack to enable some small icons for categories to help distinguish them?

Looking at my front page FanRumours.com / Today's Top Stories all the stories could be from the same category for all the user knew (until they look at the tiny text).

A small logo (like the small avatar logo) for each categorie (the club's logo in my example) would make it really easy to distinguish at a glance which stories the user was most interested in.

Cheers

EDIT: Or even better .... get rid of the user avatar from the front page and replace it with the category's logo

[Andtony]

Here's a starting point for you. I haven't tested this but something like this should work.

Find this block from your link_summary.tpl (this can vary depending on what template you're using.)

			{if $link_category neq ""}
				<span id="ls_category-{$link_shakebox_index}"><b><a href="{$category_url}" style='text-decoration:none;'>{#PLIGG_MiscWords_Category#}</a></b>: <a href="{$category_url}">{$link_category}</a></span>
			{/if}

That block shows the category of the story and I think you can show the proper icons by modifying that code a bit.

I mean something like this

		{if $link_category eq "arsenal"}
<img src="path-to-image/arsenal.png" />
		{elseif $link_category eq "liverpool"}
<img src="path-to-image/liverpool.png" />
{/if}

Ok. As I said haven't tested it and I'm not sure if you need to use category id's instead category names. And maybe you need to add something more to the clause but there's a starting point. If this doesn't work let me know and I'll try to figure it out.

[timofsuburbia]

Here's a starting point for you. I haven't tested this but something like this should work.

Find this block from your link_summary.tpl (this can vary depending on what template you're using.)

			{if $link_category neq ""}
				<span id="ls_category-{$link_shakebox_index}"><b><a href="{$category_url}" style='text-decoration:none;'>{#PLIGG_MiscWords_Category#}</a></b>: <a href="{$category_url}">{$link_category}</a></span>
			{/if}

That block shows the category of the story and I think you can show the proper icons by modifying that code a bit.

I mean something like this

		{if $link_category eq "arsenal"}
<img src="path-to-image/arsenal.png" />
		{elseif $link_category eq "liverpool"}
<img src="path-to-image/liverpool.png" />
{/if}

Ok. As I said haven't tested it and I'm not sure if you need to use category id's instead category names. And maybe you need to add something more to the clause but there's a starting point. If this doesn't work let me know and I'll try to figure it out.

Expanded on this a bit for my site by setting the class based on those rules. You can see the results on my site (so far) I set a background image of "Jazz" or "Rock" dependent on the $link_category.

Replaced this lines to my link_summary.tpl:

<div class="top">

With:

<div  
{if $link_category eq "Jazz"}class="top jazz"
{elseif $link_category eq "Rock" || $link_category eq "Rock & Roll"}class="top rock"
{else}class="top"{/if}>

Then in my main.css, just below the .top class attibutes, I added:

.jazz {background: url("../images/jazz.png") no-repeat 0 0;}
.rock {background: url("../images/rock.png") no-repeat 0 0;}

[noyp]

i've been looking for such a hack

thanks

[seer]

Excellent Information guys.

I will have some time to spend on it all today so will give it a go and let you know how I get on.

I have so many categories it will take a while

[seer]

actually... whilst what you guys have provided is useful for the specific case I mentioned, I think I want to integrate a 'category_image' field as I am wanting to use it in more than one place.

For example, also in the category list in the sidebar, a large version on the page when viewing that category, etc etc.

So I am planning on adding an extra field in the categories table called 'cat_img' but guessing I need to declare it as a variable somewhere too? Then I should be able to call it wherever I want to.

[seer]

OK I have added a field under the category table called 'category_image' and manually edited the field for each category to include a path to the image e.g. '/images/badges/liv.png' for the the liverpool category (I am presuming the path should be from the root of the specific template directory?)

But I can't for the life of me find where to start declaring this as a variable and populate the variable from the db...

I'm getting into modding beyond my 1 week's experience