Types of module layouts

Apr 26, 2014 5:32 pm

Most modules have default lister and detail module layouts for displaying a list of items and displaying each individual item, respectively. Additionally, there are other types of module layouts available for some modules.

Module layouts make use of variables to reference content. For example, in a News detail module layout, if you wanted to display the article's headline as an H1 header, you would enter <h1>[[headline]]</h1> into the layout. This will display whatever was entered into the "Headline:" field for each news article in the Blue Interface. Most module layouts have variables for all the information entered in Blue, giving you complete control over how to display this data on the live website. To see what variables are available for each layout, click on the "Insert a variable" icon in the toolbar just above the body of the layout.

Module layouts can also make use of conditional statements, which add an additional level of control and flexibility to the ways data can be displayed. To learn about using conditional statements, see Using conditional statements.

Lister layouts
Lister layouts display lists of items. For example, a news articles lister displays a list of items from the News Articles. Using the options at the top of the lister, you can filter the items by certain criteria, determine the order they appear and specify how many items should appear in the list.

The HTML layout for a lister has three different sections: Body, Repeat and Item.

The Body section should always contain a [[repeat]] include to plug the code from that section into the Body, and the Repeat section should contain an [[item]] include. The Body section appears only once on the live site, but the Repeat section determines what repeating information appears, and within that, the information for each individual item. The following is an example of a news lister:
Body

<h1>News Articles</h1>
[[repeat]]

Repeat
[[item]]

Item
<div>
<h2><a href="[[detail_url]]">[[headline]]</a></h2>
<span class="newsPublish"><span class="itemLabel">Published: </span>[[publish_date]]</span>
<span class="newsBlurb">[[blurb]]</span>
</div>


In this example, the header "News Articles" will display, followed by the contents of the Item section, repeating for each news article. Variables for headlines, publish dates and blurbs display that information for each individual article. Also note the portion of the Item section containing <a href="[[detail_url]]">[[headline]]</a>, which has a special "detail url" variable that links each news article's headline to a detail layout for that article.

This is an example of how this lister would look on a live website:

Detail Layouts
Detail layouts display information about single items. Unlike listers, they contain only one section, because there is no repeating section within a detail layout. If you clicked on any of the news article headlines in the above example, you'd be taken to the detail layout to view the full text of the article. Otherwise, detail layouts are similar to listers in how they use variables to display information from Blue.

Search Layouts
Search layouts are available only for directories and the Membership Module. Not to be confused with a full site search (which is a widget you can add to a page layout), a search layout provides many options for filtering data. For learning more, see Using search layouts.

Additional Layout Types
Some modules have additional layouts. For example, the Membership Module has layouts for the login screen and for the MyAccount section users see when they log in. The Photo Album Module has layouts for slideshow mode and for the way thumbnails from a single album display. However, the principles of these module layouts are the same as those above, in that they make use of HTML and special variables that display content from Blue.