News Browsecat Template: Arrange Categories as Columns

For discussion and questions related to CMS Specific templates and stylesheets (CSS), and themes. or layout issues. This is not a place for generic "I don't know CSS issues"
Post Reply
ohemstock
Forum Members
Forum Members
Posts: 10
Joined: Wed Oct 12, 2016 4:05 pm

News Browsecat Template: Arrange Categories as Columns

Post by ohemstock »

Hi All,

I am needing a little assistance... I would like to write a browsecat template that allows all sub-categories to be arranged into columns according to the first parent categories. The structure looks like this:

Newsfeed (parent)
- UK
- Europe
- Asia
Projects (parent)
- Golf
- Sports
- Design
Services (parent)
- Golf
- Sports
- Design

I would like to sort the parent categories into columns using div tags for each column, so that I can set the class of each column div to match my responsive grid layout framework.

The simplistic intention is for the template to render as this:

<div>
<h3>Parent category 1</h3>
<ul>
<li><a>Sub-category 1</a></li>
<li><a>Sub-category 2</a></li>
<li><a>Sub-category 3</a></li>
</ul>
</div>
<div>
<h3>Parent category 2</h3>
<ul>
<li><a>Sub-category 1</a></li>
<li><a>Sub-category 2</a></li>
<li><a>Sub-category 3</a></li>
</ul>
</div>
<div>
<h3>Parent category 3</h3>
<ul>
<li><a>Sub-category 1</a></li>
<li><a>Sub-category 2</a></li>
<li><a>Sub-category 3</a></li>
</ul>
</div>

Help would be very much appreciated!

I am using version 2.1.5 “High Rock”
User avatar
velden
Dev Team Member
Dev Team Member
Posts: 3483
Joined: Mon Nov 28, 2011 9:29 am
Location: The Netherlands

Re: News Browsecat Template: Arrange Categories as Columns

Post by velden »

When you have a look at the $cats array you can see what information you can use to build the html you like.

Code: Select all

<pre>{$cats|print_r}</pre>

Code: Select all

[3] => Array
        (
            [news_category_id] => 4
            [news_category_name] => Parent
            [parent_id] => -1
            [hierarchy] => 00001
            [item_order] => 1
            [long_name] => Parent
            [create_date] => 15:58:54
            [modified_date] => 15:58:54
            [index] => 3
            [count] => 0
            [prevdepth] => 2
            [depth] => 1
            [url] => http://[removed]/index.php?mact=News,cntnt01,default,0&cntnt01category_id=4&cntnt01returnid=24
        )

    [4] => Array
        (
            [news_category_id] => 5
            [news_category_name] => child21
            [parent_id] => 4
            [hierarchy] => 00001.00001
            [item_order] => 1
            [long_name] => Parent | child21
            [create_date] => 15:59:12
            [modified_date] => 15:59:12
            [index] => 4
            [count] => 0
            [prevdepth] => 1
            [depth] => 2
            [url] => http://[removed]/index.php?mact=News,cntnt01,default,0&cntnt01category_id=5&cntnt01returnid=24
        )
Especially parent_id (-1 is parent level), prevdepth and/or depth can be relevant for your code. Check the code of the sample browsecat template that comes with the CMSMS install on how to use those properties in your smarty code.
Post Reply

Return to “Layout and Design (CSS & HTML)”