Latest Register Log In

+ Advanced Search

Multi-Column Field Layout for Listing Details Page

Multi-Column Field Layout for Listing Details Page
By
10/11/14 (Edited 10/11/14)

Normally, the listing details page shows all the fields and their values in a table with the labels on the left and the values on the right. Suppose you want some or all fields to show next to each other instead of stacked on top of each other, for a 2 or even 3 column layout. You'll also want it to wrap back to a single column for small screen layouts. If this is what you want, follow the instructions below:

At Admin Panel -> Themes -> Manage Templates -> "Listing Details" (or Listing Details + Comments), find

<table class="detailedinfo stripeme">
<!-- BEGIN DISPLAY FIELD -->
<IF {LINKSHOWFIELD[{FIELDCATEGORIES} <,> {FIELDLISTINGTYPES}]}>
<IF {FIELDNAME} is not title and {FIELDHASVALUE}>
<tr class="field{FIELDNAME}">
<td class="nowrap detailedlabels"><IF {FIELDNAME} is tags>{LANG_GENERAL_TAGS}<ELSE IF {FIELDNAME} is feedurl>{LANG_GENERAL_FEEDDATA}<ELSE IF {FIELDNAME} is url>{LANG_GENERAL_WEBSITE}<ELSE IF {FIELDNAME} is filefield>{LANG_SHOWLINKS_ATTACHED}<ELSE>{FIELDLABEL}</IF></td>
<td>{FIELDDISPLAYHTML}</td>
</tr>
</IF>
</IF>
<!-- END DISPLAY FIELD -->
</table>

Replace that with

<!-- BEGIN DISPLAY FIELD -->
<IF {LINKSHOWFIELD[{FIELDCATEGORIES} <,> {FIELDLISTINGTYPES}]}>
<IF {FIELDNAME} is not title and {FIELDHASVALUE}>
<div class="field{FIELDNAME} <?php if (strstr(" list-one-column-fields-here ", " {FIELDNAME} ")) { ?>onecolumn<?php } else { ?>twocolumn<?php } ?>">
<IF {FIELDNAME} is tags>{LANG_GENERAL_TAGS}<ELSE IF {FIELDNAME} is feedurl>{LANG_GENERAL_FEEDDATA}<ELSE IF {FIELDNAME} is url>{LANG_GENERAL_WEBSITE}<ELSE IF {FIELDNAME} is filefield>{LANG_SHOWLINKS_ATTACHED}<ELSE>{FIELDLABEL}</IF>
<br>
{FIELDDISPLAYHTML}
</div>
</IF>
</IF>
<!-- END DISPLAY FIELD -->
<div class="clear"></div>


Then go to the "Stylesheet" template and add this at the top or bottom:
.twocolumn { float: left; width: 49%; }
.onecolumn { float: left; width: 99%; }
@media screen and (min-width: 1px) and (max-width: 600px) { .twocolumn { float: left; width: 99%; } }


This will create a layout with two fields per row. If there are particular fields you'd like to take the full width instead of half-width, go back to the Listing Details template and replace list-one-column-fields-here with the names of fields you want to have use the full width, with each field name surrounded by spaces. For example, " address tags " to make the address and tags fields use the full width. You'll need to use the official database field names. To find those, go to Admin Panel -> Listings -> Listing Fields and click to edit the desired field. You'll see something like this at the top (since version 9.0.28 Beta 3): "To display this field in any template location that a link is applicable to, use {LINKCATID}. The official database name of the field is catid, if you're editing a field display area of a template you can use <IF {FIELDNAME} is catid>something to show only for catid</IF>" -- in this example the field name you want is catid.

You'll also have to careful about the display order you set for fields at Admin -> Listings -> Listing Fields to make sure that you pair off the two column ones. For example, if your first field is two columns but your second field is one column you'd end up with an empty half-column after the first field so you'd need to move another field to fill that spot.

To do three columns of fields instead of two, edit the stylesheet and change .twocolumn { float: left; width: 49%; } to .twocolumn { float: left; width: 33%; }





Rating
Views 409 views. Averaging 0 views per day.