3.7. Instructions
3.7.10. opt:grid
3.7.9. opt:foreach
« Previous
3.7.11. opt:if
Next »

3.7.10. opt:grid

This chapter describes one of section instructions. We recommend to read Sections first to get to know more about them.

opt:grid is one of section instructions used to display the lists in tables of the specified column number. If the list size is not a multiplication of the column number, the last row is automatically filled with empty items. The instruction breaks the lists, when this is necessary. Despite standard attributes, it requires one extra attribute:

Name Type Required? Description
cols Expression Yes Column number

A sample use:

<table>
<opt:grid name="gallery" cols="3">
    <tr>
        <opt:item>
            <td><img parse:src="$gallery.picture"/></td>
        </opt:item>
        <opt:emptyItem>
            <td>&nbsp;</td>
        </opt:emptyItem> 
    </tr>
</opt:grid>
</table>

Directly in opt:grid we define a layout of a single row. In the place for cells, we place two tags:

  1. opt:item - defines a cell layout of the list element.
  2. opt:emptyItem - defines a layout of empty cells that are used to fill the last row, if the list does not contain enough elements.

Empty list support

We may define the optional content to be displayed if the list is empty with the opt:gridelse tag:

<table>
<opt:grid name="gallery" cols="3">
    <tr>
        <opt:item>
            <td><img parse:src="$gallery.picture"/></td>
        </opt:item>
        <opt:emptyItem>
            <td>&nbsp;</td>
        </opt:emptyItem> 
    </tr>
    <opt:gridelse>
        <tr><td>We are sorry, but the gallery is empty.</td></tr>
    </opt:gridelse>
</opt:grid>
</table>

Note that you must not use opt:gridelse, if our selector works together with opt:show. In this case, opt:showelse is available:

<opt:show name="gallery" cols="3">
<p>My pictures:</p> 
<table>
<opt:grid>
    <tr>
        <opt:item>
            <td><img parse:src="$gallery.picture"/></td>
        </opt:item>
        <opt:emptyItem>
            <td>&nbsp;</td>
        </opt:emptyItem> 
    </tr>
</opt:grid>
</table>
<opt:showelse>
    <p>We are sorry, but the gallery is empty.</p>
</opt:showelse>
</opt:show>

See also:

3.7.10. opt:grid
3.7. Instructions
« Previous
3.7.9. opt:foreach
Next »
3.7.11. opt:if