NAML Tutorial - Changing the Layout of a Gallery



This tutorial explains how to change the layout of a gallery application using the Nabble Application Markup Language (NAML).

More Explanations


When you add more columns to the gallery layout (i.e., by editing the "gallery_table_row" macro) you should make sure you include the <n.if.next_node> block like this (see lines 3-5):

...
<td style="width:20%">
    <n.if.next_node>
        <then.current_node.gallery_cell/>
    </n.if.next_node>
</td>
...

In other words, all columns – except the first one – must have that if-statement that checks if there is another node to be printed (that call also moves the iterator to the next node). So this is how it should look:

<override_macro name="gallery_table_row" requires="app_namespace">
    <tr>
        <!-- FIRST COLUMN: NO NEED TO CHECK IF THERE IS A NEXT NODE -->
        <td style="width:20%">
            <n.current_node.gallery_cell/>
        </td>
        <!-- SECOND COLUMN: FROM THIS POINT ON WE MUST CHECK IF THERE IS A NEXT NODE -->
        <td style="width:20%">
            <n.if.next_node>
                <then.current_node.gallery_cell/>
            </n.if.next_node>
        </td>
        <td style="width:20%">
            <n.if.next_node>
                <then.current_node.gallery_cell/>
            </n.if.next_node>
        </td>
        <td style="width:20%">
            <n.if.next_node>
                <then.current_node.gallery_cell/>
            </n.if.next_node>
        </td>
        <td style="width:20%">
            <n.if.next_node>
                <then.current_node.gallery_cell/>
            </n.if.next_node>
        </td>        
    </tr>
</override_macro>