Categories display 2 cols

I don't think that this has anything to do with smarty. This seems more like standard HTML. The issue is that the code being used generates td (data cells), therefore if you have two horizontal data cells in one table row they will be the same height. If one data cell has many lines of data, the adjacent horizontal data cell will then have blank space under it, because it is in a data cell that is already a larger height.

I believe that you would either need to change the code so that it output <UL><LI> (unordered list items) OR you would need to have it output individual tables per category.

That's the approach that I would use.

Good luck and I hope that this helps you in your quest!

-Mike

The closest thing you can do is know the number of total categories, split it into two arrays and then create two columns and loop them next to each other. The spaces can be removed but you'll have to play with what is the right number to split the categories so that the columns are roughly the same length.

Otherwise you are dealing with the row height or list item height and you'll have gaps where the 2 list item contents are not the same height.

Its hard to do generically, but you can open category.php and play around with this code until you get it looking right for your category structure.

category.php around like 76 where $data is assigned to the template.

PHP:

//count and cut in half
$cat_count = count($cat); // don't need to count if manually set number
$half = (int) $cat_count / 2; 
//pick a half
//$half = 50; // set a specific number to slice the category
//split into 2 arrays and assign
$col1 = array_slice($cat, 0, $half);
$col2 = array_slice($cat, $half);
$class_tpl->assign('col1', $col1);
$class_tpl->assign('col2', $col2);

Then some place in browse.tpl you can loop them side-by-side.

HTML:

{literal}
    <style type="text/css">
        .cat_col { width:40%; float:left; }
        .cat_col ul { list-style:none; }
    </style>
    {/literal}
    <div class="cat_col">
    <ul>
        {foreach from=$col1 item=cat}
        <li>
            {$cat.start_link}<img src="{$cat.image}" border="0" alt="{$cat.name}" /></a> 
            {$cat.start_link}<strong>{$cat.name}</strong></a>
            {if $cat.total <> ''}
                ({$cat.total})
            {/if}
            {$cat.subcats}
        </li>
        {/foreach}
    </ul>
    </div>
    <div class="cat_col">
    <ul>
        {foreach from=$col2 item=cat}
        <li>
            {$cat.start_link}<img src="{$cat.image}" border="0" alt="{$cat.name}" /></a> 
            {$cat.start_link}<strong>{$cat.name}</strong></a>
            {if $cat.total <> ''}
                ({$cat.total})
            {/if}
            {$cat.subcats}
        </li>
        {/foreach}
    </ul>
    </div>

You can also mess with the subcat alignment and spaces and ellipses like this:

HTML:

{literal}
    <style type="text/css">
        .cat_col { width:40%; float:left; }
        .cat_col ul { list-style:none; }
        .cat_col ul li div.small a { display:block; margin-left:30px;}
    </style>
    {/literal}
    <div class="cat_col">
    <ul>
        {foreach from=$col1 item=cat}
        <li>
            {$cat.start_link}<img src="{$cat.image}" border="0" alt="{$cat.name}" /></a> 
            {$cat.start_link}<strong>{$cat.name}</strong></a>
            {if $cat.total <> ''}
                ({$cat.total})
            {/if}
            {$cat.subcats|replace:" ":""|replace:"...":""}
        </li>
        {/foreach}
    </ul>
    </div>
    <div class="cat_col">
    <ul>
        {foreach from=$col2 item=cat}
        <li>
            {$cat.start_link}<img src="{$cat.image}" border="0" alt="{$cat.name}" /></a> 
            {$cat.start_link}<strong>{$cat.name}</strong></a>
            {if $cat.total <> ''}
                ({$cat.total})
            {/if}
            {$cat.subcats|replace:" ":""|replace:"...":""}
        </li>
        {/foreach}
    </ul>
    </div>

This is one of the things that I posted about in my thread: Gauging Interest Level. The Categories List plugin which allows you to place a category with all of it's subcategories in a list. You would still need to style your template to contain the category lists as you would like them. I did this for a client to mimic gumtree. In that case had four column <div>'s and included an in-content rotating display ad from his ad server in one of the div's.

This was done REPLACING the default category table on the home page.