Image instead of category name

[Kaj]

Hi there,

I already spoke with Harm about this (thanks Harm), and decided to post the issue here too:

I am looking for a way to add a standard-image to each one of my post categories, like a symbol, so they are visually distinguished. I am using the Desktop Chaos theme (for now) in Pivotx2.1

Since I am not that good with programming, I wonder if you can help me with: the place I have to put the images, the files i will have to change and what code I should use.

Is there phps a theme using category-images already?

Best regards,

Kaj

[Harm10]

As I said earlier you have to state where you want this image to appear.
Entries from categories are shown on frontpage/archivepage and entrypage.
Either you use hard coding or create images with exactly the same name as the category.
I think the latter is quite doable so if you specify where you want it to appear a sample template coding can be provided.
You have to put it in the right place yourself in the theme you are using.

[Kaj]

Hi Harm,

Thanks for your patience.
I wonder if it is possible to use a standardimage per category, and put it [[here]].

Is this piece of code enough?:
From the Frontpage template of Desktop Chaos-theme.

<!-- begin of weblog 'default' -->
[[ subweblog name="default" ]][[ literal ]]
<div class="post">
<h2> <a href="[[ link hrefonly=1 ]]">[[ category ]] | [[ title ]]</a></h2>
<div class="post-content">
<div class="tab-date">
<span class="month">[[ date format="%monname%" ]]</span>
<span class="day">[[ date format="%day%" ]]</span>
</div>

[Harm10]

You probably would want a thumbnail made of it.
In stead of the [[ category ]] you could code then:

Code: Select all

<img src="[[pivotx_url]]includes/timthumb.php?src=[[category]].jpg&amp;w=150&amp;zc=1" title="[[category]]" alt="[[category]]" />

where w=150 specifies the width of your thumbnail (you can change that to your liking)
Furthermore is assumed that jpg's exist in directory images with exactly the same name as the categoryname.
I have not tested this so please test it yourself.

[Kaj]

Thanks for the code, it does something but not the thing we intend to.

In the Images file on the public server I put an image named default.jpg (and also one without the .jpg) to try.

On the frontpage something changed: there now is a "box" around the category-name (I suppose this is the markup for an image that is a hyperlink) but without the image displayed. The width differs: the longer the category-name, the more stretched the box is.

[Harm10]

I've looked at your site but couldn't see the coding you are talking about. So please specify a link so we can take a look at it..........

[Kaj]

Thank you Harm,

I changed the code back to original when it did not seem to work. But on second try it worked.

The thing I did wrong was in the naming of the .jpg-files.
I named them after the category-name as shown in dashboard... but I had to name them after the name displayed.
In my case it was a matter of "preken" (the name shown) instead of "default".

I am still not quite sure of the looks of my web-log http://www.nieuweverhalen.nl ... so perhaps I will switch to another template in the future. All comments and tricks taken into account, of course!

From this question follows another, which is: could the images also be add to the sub_sidebar?
In my case:

Code: Select all

 <!-- begin category list -->
           <div class="categories"></div>
            <div class="categories-inner">
            <ul>
[[category_list format="<li><a href='%url%'>%display%</a></li>" ignore="notused"]]
<a href="Here I added my follow-on-twitter-button"</a>
            </ul>
            </div>
            <div class="categories-bottom"></div>
        <!-- end category list -->

[Harm10]

I think this will work:

Code: Select all

[[capture name=captureurl assign=catchurl]][[pivotx_url]]includes[[/capture]]
[[category_list format="<li><a href='%url%'>
<img src="$catchurl/timthumb.php?src=%name%.jpg&amp;w=150&amp;zc=1" title="%display%" alt="%display%" /></a></li>" ignore="notused"]]

Again....... not tested.

[Kaj]

Alas, my dear friend...

No image nor word appears in the list.

What did happen, also, as you can see, is that the background-image is a bit messed-up now Or is it me, messed-up?

The code looks, after copy-pasting, like this:

Code: Select all

 <!-- begin category list -->
           <div class="categories"></div>
            <div class="categories-inner">
            <ul>
[[capture name=captureurl assign=catchurl]] [[pivotx_url]]includes[[/capture]]
[[category_list format="<li><a href='%url%'>
<img src="$catchurl/timthumb.php?src=%name%.jpg&amp;w=50&amp;zc=1" title="%display%" alt="%display%" /></a></li>" ignore="notused"]]
<a href="follow me on twitter button"</a>
            </ul>
            </div>
            <div class="categories-bottom"></div>
        <!-- end category list -->

[Harm10]

If you had also pasted the resulting html in the page itself you probably could have seen the error yourself....
I've tested it now and the essence lies in the use of ' and " in the right places.......

Code: Select all

<!-- begin category list -->
<div class="categories"></div>
<div class="categories-inner">
[[capture name=captureurl assign=catchurl]] [[pivotx_url]]includes[[/capture]]
<ul>
[[category_list format='<li><a href="%url%"><img src="$catchurl/timthumb.php?src=%name%.jpg&amp;w=50&amp;zc=1" title="%display%" alt="%display%" /></a></li>' ignore='notused']]
</ul>
<a href="follow me on twitter button"</a>
</div>
<div class="categories-bottom"></div>
<!-- end category list -->