Textpattern CMS

#1 2006-10-20 15:30:44

tdn

Member

Registered: 2006-02-16

Posts: 58

How do I show an image with an article depending on the category

Hi

I have several categories for my articles. For some of the categories I have an image that symbolises this category. I would like to show this image, if an article is in this category. Just liks Slashdot does¹. Slashdot shows an image of a foot if the article is about humor, an image of a lock if the article is about security and so on. I would like to do the same in Textpattern. How do I do it?

[1]: http://slashdot.org/

#2 2006-10-20 15:57:39

els

Moderator

From: The Netherlands

Registered: 2004-06-06

Posts: 7,458

Re: How do I show an image with an article depending on the category

If you name your images just like your categories, and all have the same extension, like this:

• category: cats, image: cats.gif
• category: dogs, image: dogs.gif

you could use <img src="/images/<txp:category1 />.gif" /> in your article form.

Or else you can do something like this in the article form:

<txp:if_article_category name="dogs">
<img src="/images/dogs.gif" />
</txp:if_article_category>

<txp:if_article_category name="cats">
<img src="/images/kittens.jpg" />
</txp:if_article_category>

#3 2006-10-20 16:31:08

tdn

Member

Registered: 2006-02-16

Posts: 58

Re: How do I show an image with an article depending on the category

Yes. The problem is, that I do not know if there is a picture for a given category. I do not have a picture for all my categories. Just some of them. Maybe 75%. The first solution will result in some broken images on the categories that do not have an image assigned.

The other solution is very ugly. If I have say 100 article categories, then the article form must contain an additional 300 lines!

#4 2006-10-20 16:43:27

mstwntd

Member

From: Melbourne, Australia

Registered: 2004-12-25

Posts: 52

Re: How do I show an image with an article depending on the category

tdn,

Here’s another idea:

<div class="cat-<txp:category1 />">

...

</div>

Then, drop your category graphics in as background images:

.cat-dogs {
background: url(/images/dogs.gif) no-repeat;
}

.cat-cats {
background: url(/images/cats.gif) no-repeat;
}

Last edited by mstwntd (2006-10-20 16:44:31)

#5 2006-10-20 16:57:35

tdn

Member

Registered: 2006-02-16

Posts: 58

Re: How do I show an image with an article depending on the category

Egor:
Great idea! Thanks.