Latest Register Log In

+ Advanced Search

Vertical Ordering

Vertical Ordering
By
02/15/07 (Edited 03/10/14)

Some people want to order their articles vertically instead of horizontally. If you do it in one column it's easy of course, but multiple vertical column ordering gets a bit complex:

1) At Admin -> Settings -> General use 0 articles per row.
2) Remove the table html from around the articles in the "show articles in category" and "article bit" templates, including the <td> and </td> inside the article bit. You may or may not wish to alter the "search articles" and "search all" templates as well.
3) In "show articles in category", surround the article list with a 50% width div float, such as <div style="width: 50%; float: left;"> ... </div>.
4) In order to detect at which article the second column should begin, put this in the template:
<?php if ({LINKNUMBER} == (int)({CATLINKSHERE} / 2) { ?> </div><div style="width: 50%; float: left;"> <?php } ?>

That will switch columns at the halfway mark. Example for the "show articles in category" template:
<div style="float: left; width: 50%;">
<!-- BEGIN REGULAR LINKS -->
[INSERTFILE=linkbit]
<?php if ({LINKNUMBER} == (int)({CATLINKSHERE} / 2) { ?> </div><div style="width: 50%; float: left;"> <?php } ?>
<!-- END REGULAR LINKS -->
</div>


The same idea can be modified for categories:
1) At Admin -> Settings -> General use 0 categories per row.
2) Remove the table html around categories from the main index and show articles in category templates, including the <td> and </td> inside the each-category area. You may wish to alter the search categories and search all templates as well.
3) Place the category list in a 50% width div float, <div style="width: 50%; float: left;"> ... </div>.
4) In order to detect at which category the second column should begin, put this in the template (within the <!-- BEGIN REGULAR --> area) for the main index template and the show articles in category template:
<?php if ({CATNUMBER} == (int)({CATNUMSIBLINGS} / 2)) { ?> </div><div style="width: 50%; float: left;"> <?php } ?>


That will switch columns at the halfway mark. Complete example for "show articles in category":
<div style="width: 50%; float: left;">
<!-- BEGIN SUBCATEGORIES -->
<!-- BEGIN REGULAR -->
<p>
<img src="{IMAGESURL}/folder.gif" > <a href="{CATURL}" class="categoryname">{CATNAME}</a> ({CATNUMLINKS}) {CATHASNEW} {CATADMIN}<br >
<!-- BEGIN SUBSUB -->
<a href="{CATURL}">{CATNAME}</a>,
<!-- END SUBSUB -->
<IF {CATDESCRIPTIONBOOL}><br >{CATDESCRIPTION}</IF>
<IF {SWITCH_FORUMVIEWS} or {SWITCH_ONLINEFORUM}><br ></IF>
<IF {SWITCH_FORUMVIEWS}>{CATVIEWS} {LANG_GENERAL_VIEWS}</IF><IF {SWITCH_FORUMVIEWS} and {SWITCH_ONLINEFORUM}>, </IF>
<IF {SWITCH_ONLINEFORUM}>{CATNUMONLINE} {LANG_GENERAL_VIEWING}</IF>
</p>
<?php if ({CATNUMBER} == (int)({CATNUMSIBLINGS} / 2)) { ?> </div><div style="width: 50%; float: left;"> <?php } ?>
<!-- END REGULAR -->
<!-- END SUBCATEGORIES -->
</div>


Instead of using div floats, you can also use a table with one row. Just change the halfway insertion HTML to </td><td> for that to trigger the new column.




Description Showing items in multiple vertical columns instead of horizonal.
Rating
Views 1049 views. Averaging 0 views per day.