Vertical Ordering
By Paul
0/5 based on 0 votes. The median rating is 0.
By Paul
Some people want to order their images 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 images per row.
2) Remove the table html from around the images in the "show images in category" and "image bit" templates, including the <td> and </td> inside the image bit. You may or may not wish to alter the "search images" and "search all" templates as well.
3) In "show images in category", surround the image list with a 50% width div float, such as <div style="width: 50%; float: left;"> ... </div>.
4) In order to detect at which image the second column should begin, put this in the template:
That will switch columns at the halfway mark. Example for the "show images in category" template:
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 images 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 images in category template:
That will switch columns at the halfway mark. Complete example for "show images in category":
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.
1) At Admin -> Settings -> General use 0 images per row.
2) Remove the table html from around the images in the "show images in category" and "image bit" templates, including the <td> and </td> inside the image bit. You may or may not wish to alter the "search images" and "search all" templates as well.
3) In "show images in category", surround the image list with a 50% width div float, such as <div style="width: 50%; float: left;"> ... </div>.
4) In order to detect at which image the second column should begin, put this in the template:
<?php if ({IMAGENUMBER} == (int)({CATLINKSHERE} / 2) { ?> </div><div style="width: 50%; float: left;"> <?php } ?>
That will switch columns at the halfway mark. Example for the "show images in category" template:
<div style="float: left; width: 50%;">
<!-- BEGIN REGULAR IMAGES -->
[INSERTFILE=linkbit]
<?php if ({IMAGENUMBER} == (int)({CATLINKSHERE} / 2) { ?> </div><div style="width: 50%; float: left;"> <?php } ?>
<!-- END REGULAR IMAGES -->
</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 images 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 images 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 images in category":
<div style="width: 50%; float: left;">
<!-- BEGIN SUBCATEGORIES -->
<!-- BEGIN REGULAR -->
<p>
<img src="http://scripts.webmastersite.net/wsngallery/manual/{IMAGESURL}/folder.gif" alt="" /> <a href="http://scripts.webmastersite.net/wsngallery/manual/{CATURL}" class="categoryname">{CATNAME}</a> ({CATNUMLINKS}) {CATHASNEW} {CATADMIN}<br />
<!-- BEGIN SUBSUB -->
<a href="http://scripts.webmastersite.net/wsngallery/manual/{CATURL}">{CATNAME}</a>,
<!-- END SUBSUB -->
<IF {CATDESCRIPTIONBOOL}><br />{CATDESCRIPTION}</IF>
<IF 0 or 0><br /></IF>
<IF 0>{CATVIEWS} {LANG_GENERAL_VIEWS}</IF><IF 0 and 0>, </IF>
<IF 0>{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.
Rating:
0/5 based on 0 votes. The median rating is 0.
Submitted: 02/15/07 (Edited 04/10/08)
Description: Showing items in multiple vertical columns instead of horizonal.
Views:
462 views. Averaging 1 per day.
In the most recent 30 day period, there've been 3 views.

Print
E-Mail