Image instead of category name

Discuss PivotX 2.0.x themes here, and view themes that are available for download.

Image instead of category name

Postby Kaj » Sun Dec 05, 2010 9:47 am

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
Kaj
 
Posts: 9
Joined: Thu Nov 25, 2010 10:24 am

Re: Image instead of category name

Postby Harm10 » Mon Dec 06, 2010 7:04 am

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.
Quality is in the detail of things............

Want to change or update your PivotX site? Mail or PM me!
I can also convert your site to a Wordpress site!
Harm10
Developer
 
Posts: 2011
Joined: Wed Jun 17, 2009 9:37 am
Location: Somewhere in The Netherlands (aka Holland)

Re: Image instead of category name

Postby Kaj » Mon Dec 06, 2010 12:01 pm

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>
Kaj
 
Posts: 9
Joined: Thu Nov 25, 2010 10:24 am

Re: Image instead of category name

Postby Harm10 » Mon Dec 06, 2010 1:55 pm

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.
Quality is in the detail of things............

Want to change or update your PivotX site? Mail or PM me!
I can also convert your site to a Wordpress site!
Harm10
Developer
 
Posts: 2011
Joined: Wed Jun 17, 2009 9:37 am
Location: Somewhere in The Netherlands (aka Holland)

Re: Image instead of category name

Postby Kaj » Mon Dec 06, 2010 2:17 pm

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.
Kaj
 
Posts: 9
Joined: Thu Nov 25, 2010 10:24 am

Re: Image instead of category name

Postby Harm10 » Mon Dec 06, 2010 2:55 pm

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.......... ;)
Quality is in the detail of things............

Want to change or update your PivotX site? Mail or PM me!
I can also convert your site to a Wordpress site!
Harm10
Developer
 
Posts: 2011
Joined: Wed Jun 17, 2009 9:37 am
Location: Somewhere in The Netherlands (aka Holland)

Image add to category name

Postby Kaj » Mon Dec 06, 2010 4:38 pm

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 -->
Kaj
 
Posts: 9
Joined: Thu Nov 25, 2010 10:24 am

Re: Image instead of category name

Postby Harm10 » Mon Dec 06, 2010 5:13 pm

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. ;)
Quality is in the detail of things............

Want to change or update your PivotX site? Mail or PM me!
I can also convert your site to a Wordpress site!
Harm10
Developer
 
Posts: 2011
Joined: Wed Jun 17, 2009 9:37 am
Location: Somewhere in The Netherlands (aka Holland)

Re: Image instead of category name

Postby Kaj » Mon Dec 06, 2010 8:35 pm

Alas, my dear friend...

No image nor word appears in the list. :oops:

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 -->
Kaj
 
Posts: 9
Joined: Thu Nov 25, 2010 10:24 am

Re: Image instead of category name

Postby Harm10 » Mon Dec 06, 2010 9:23 pm

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 -->
Quality is in the detail of things............

Want to change or update your PivotX site? Mail or PM me!
I can also convert your site to a Wordpress site!
Harm10
Developer
 
Posts: 2011
Joined: Wed Jun 17, 2009 9:37 am
Location: Somewhere in The Netherlands (aka Holland)

Next

Return to 2.x Themes

Who is online

Users browsing this forum: No registered users and 1 guest

cron