Category Items Display | ExpressionEngine Community Forums

Category Items Display

vacquah

Posted: 08 July 2009 06:54 PM

[ Ignore ]

Lab Assistant

Total Posts: 289

Joined 08-26-2005

I am trying to display my blog categories in a tabular format in 2 or 3 columns - similar to how the visitor stats are displayed at the bottom of this page. I found a solution but couldn’t get it to work and posted it here -

http://expressionengine.com/forums/viewthread/121755/

But I got no response. Can anyone point me in the right direction in terms of css code or maybe how i should structure the content in htlml to get the categories lined up in columns? thx ..

Profile

DRUMZ

Posted: 20 July 2009 01:35 PM

[ Ignore ] [ # 1 ]

Grad Student

Total Posts: 78

Joined 05-18-2009

Hi! What wasn’t working for you when you tried it? Was the layout different than what you intended? Was it completely blank? Did you receive php errors?

Profile

vacquah

Posted: 20 July 2009 01:41 PM

[ Ignore ] [ # 2 ]

Lab Assistant

Total Posts: 289

Joined 08-26-2005

I was following a methodology as described here : http://expressionengine.com/forums/viewthread/121755/

I got php errors - mainly based on the {embed:count} and {embed:offset} part of the code. I am wondering if there is a simpler way to do this via CSS?

Profile

DRUMZ

Posted: 20 July 2009 01:52 PM

[ Ignore ] [ # 3 ]

Grad Student

Total Posts: 78

Joined 05-18-2009

Well, if you are only wanting to display the titles of your categories, you could probably do it much simpler. Checking subtraction.com, there are 28 categories listed. If there were an uneven number, then the layout would appear sort of odd. If you know exactly how many categories there are, and how many columns you want, then it becomes a lot simpler. However, if you want it to be dynamic in case you want to add or remove categories later, then it becomes only slightly less simple.

So, let’s start with the columns. Do you have a set number of columns in mind? You said in the other post that it was for a sidebar, so I’d imagine anything more than 2 columns would make for a rather wide sidebar.

Profile

vacquah

Posted: 20 July 2009 02:07 PM

[ Ignore ] [ # 4 ]

Lab Assistant

Total Posts: 289

Joined 08-26-2005

Yes - I’d like to have 3 columns ( wanted 2 initially - but seems I have space to have 3!). I also would like to make it dynamic so that I dont have to worry about the layout as I add more categories later - that was the main appeal of Adam’s methodology on Subtraction.

Profile

DRUMZ

Posted: 20 July 2009 03:24 PM

[ Ignore ] [ # 5 ]

Grad Student

Total Posts: 78

Joined 05-18-2009

Ok then. Here you go. This should work. You can then style the table any way you’d like. This will display the categories in a 3 column format. As you add more, more rows will be added.

<table style="border-bottom:1px solid black; border-collapse:collapse;" cellpadding="0" cellspacing="0">
<tr>
<td colspan="3" style="border-bottom:1px solid #ccc">
<b>Categories</b>
</td>
</tr>
<tr>
<?php
$i = 0;
?>
{exp:weblog:categories weblog="your_weblog_name" style="linear"}
<?php
$i = $i + 1;
if ($i <= 3){
?>
<td style="padding:5px;">
{category_name}
</td>
<?php
}
else{
$i = 1;
?>
</tr>
<tr>
<td style="padding:5px;">
{category_name}
</td>
<?php
}
?>
{/exp:weblog:categories}
</tr>
</table> 

Make sure php is enabled and set to pares on output.

Lemme know how it goes

Profile

vacquah

Posted: 20 July 2009 03:45 PM

[ Ignore ] [ # 6 ]

Lab Assistant

Total Posts: 289

Joined 08-26-2005

Thanks - just tested it out.

It is however spreading all the categories on one long row running across the length of the entire page.

Also, how do i incorporate the nuber of items in each category as seen in this original code:

{exp:weblog:categories weblog="blog" style="linear"}
<ul class="catlist">
      <a href="{path='blog/index'}">{category_name}</a>
    {exp:query sql="SELECT count(exp_category_posts.entry_id) 
        AS post_count
        FROM exp_category_posts WHERE exp_category_posts.cat_id = {category_id} "}
        ({post_count}) 
    {/exp:query}
</ul>
{/exp:weblog:categories} 

Profile

DRUMZ

Posted: 20 July 2009 04:12 PM

[ Ignore ] [ # 7 ]

Grad Student

Total Posts: 78

Joined 05-18-2009

It runs one long row if you have the php parsing set to “input”. If you go to the preferences for the template, and make sure php is enabled and change the parsing stage to output, you will see the three columns. As for the total number of entries, the code from the example should work for you. I’m assuming you’re using the personal license version? The free core version doesn’t have the query module and thusly, wouldn’t work.

If you have it, then change the code to this:

<table style="border-bottom:1px solid black; border-collapse:collapse;" cellpadding="0" cellspacing="0">
<tr>
<td colspan="3" style="border-bottom:1px solid #ccc">
<b>Categories</b>
</td>
</tr>
<tr>
<?php
$i = 0;
?>
{exp:weblog:categories weblog="your_weblog_name" style="linear"}
<?php
$i = $i + 1;
if ($i <= 3){
?>
<td style="padding:5px;">
{category_name}
{exp:query sql="SELECT count(exp_category_posts.entry_id) AS post_count FROM exp_category_posts WHERE exp_category_posts.cat_id = {category_id} "}
({post_count})
{/exp:query}
</td>
<?php
}
else{
$i = 1;
?>
</tr>
<tr>
<td style="padding:5px;">
{category_name}
{exp:query sql="SELECT count(exp_category_posts.entry_id) AS post_count FROM exp_category_posts WHERE exp_category_posts.cat_id = {category_id} "}
({post_count})
{/exp:query}
</td>
<?php
}
?>
{/exp:weblog:categories}
</tr>
</table> 

Lemme know how it goes

Profile

vacquah

Posted: 20 July 2009 04:42 PM

[ Ignore ] [ # 8 ]

Lab Assistant

Total Posts: 289

Joined 08-26-2005

very cool! almost there now! I now have them lined up in columns ( reverted back to 2 columns because of long category names). however, the post count numbers are not right aligned like you have on the examples we have discussed. is that a pure css function? in the code ., where can I insert a css class or id to enable me style it?.

Also, after reverting back to the 2 column format, I now have a bit of space left. Is there a way to spread the 2 columns across the available width of the sidebar?

Profile

DRUMZ

Posted: 20 July 2009 05:07 PM

[ Ignore ] [ # 9 ]

Grad Student

Total Posts: 78

Joined 05-18-2009

So by being two columns, I’m assuming you just changed the $i variable to 2? Neat.

As for the styling and taking up the full width, make your code look like this then:

<table style="border-bottom:1px solid black; border-collapse:collapse; width:100%;" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2" style="border-bottom:1px solid #ccc">
<b>Categories</b>
</td>
</tr>
<tr>
<?php
$i = 0;
?>
{exp:weblog:categories weblog="your_weblog_name" style="linear"}
<?php
$i = $i + 1;
if ($i <= 2){
?>
<td style="padding:5px; width:50%">
<span style="float:left;">
{category_name}
</span>
<span style="float:right;">
{exp:query sql="SELECT count(exp_category_posts.entry_id) AS post_count FROM exp_category_posts WHERE exp_category_posts.cat_id = {category_id} "}
({post_count})
{/exp:query}
</span>
</td>
<?php
}
else{
$i = 1;
?>
</tr>
<tr>
<td style="padding:5px; width:50%">
<span style="float:left;">
{category_name}
</span>
<span style="float:right;">
{exp:query sql="SELECT count(exp_category_posts.entry_id) AS post_count FROM exp_category_posts WHERE exp_category_posts.cat_id = {category_id} "}
({post_count})
{/exp:query}
</span>
</td>
<?php
}
?>
{/exp:weblog:categories}
</tr>
</table> 

That will have it be two columns, the table will fill the whole sidebar and each column will be 50% of the table, and the numbers will be on the right of the columns with the category names on the left.

Lemme know how it goes…

Profile

vacquah

Posted: 20 July 2009 05:22 PM

[ Ignore ] [ # 10 ]

Lab Assistant

Total Posts: 289

Joined 08-26-2005

worked great - but there is no space between the 2 columns at all. I tried reducing the width to 45% each but it hasn’t changed. is there a way to do something like 45% each and padding of 10% on the first column?

Profile

DRUMZ

Posted: 20 July 2009 06:43 PM

[ Ignore ] [ # 11 ]

Grad Student

Total Posts: 78

Joined 05-18-2009

How wide is the sidebar it’s going into?

There should only be about 5px of space between the columnds because that’s what the padding is set to. With the number of entries on the right side of each column, it would only be 5px away from the title of the category next to it. You could try increasing the padding in the css from 5px to 20px maybe. Or change it from just padding:5px to padding-left:10px; padding-right:10px;

Also, is this live online somewhere? It’d be interesting to view the source to see of something higher up is messing with the CSS.

Profile

vacquah

Posted: 20 July 2009 09:03 PM

[ Ignore ] [ # 12 ]

Lab Assistant

Total Posts: 289

Joined 08-26-2005

the padding-right fix did it. however, it still is not perfectly lined up like you can see below where both ends are lined up with the margins and the padding is only in the middle. you can see it here - http://test.blueanalytics.com/index.php/blog/

But I can live with the way it is now. thx.

Profile

‹‹ Entry Not Updating Class Name Weblog Not Displaying ››

Username		Remember Me?
Password		forgot password?

Post Marker Legend
	New posts	Hot Topic with new posts	New Poll	Moved Topic	Sticky topic
	No new posts	Hot Topic with no new posts	Old Poll	Closed Topic	Announcements

Visitor Statistics
The most visitors ever was 1743, on December 02, 2009 03:47 PM
Total Registered Members:	120427	Total Logged-in Users:	59
Total Topics:	126522	Total Anonymous Users:	35
Total Replies:	665284	Total Guests:	329
Total Posts:	791806