The gv-collection module comes in two parts, the collection list, and the collection item detail page.
List Tag
<div gv-collection></div>
The gv-collection tag activates the collection-list functionality and enables the use of collection expressions within the tagged element. Governor loops through all of the available items inside a collection and lists them in place.
Basic
Example: collection.html
<a href="@href" class="s12 m3 l4 col" gv-collection>
<div class="collection-list-box" style="background-image:url('@image.src');">
<div class="list-title">
<h3>@title</h3>
<h5>@subtitle</h5>
<p>@summary</p>
</div>
</div>
</a>
Available List Properties
@image.alt- Collection image alt text@image.src- Collection image src@title- Collection item title@subtitle- Collection item subtitle@summary- Collection item summary@content- Collection item content@detail- Collection item additional detail@href- Link to collection item@tags- Tags for collection@category- Collection category
Item Tag
<div gv-collection-item></div>
The gv-collection-item tag activates the item-detail view functionality and enables the use of collection expressions within the tag.
Example: detail.html
<div class="s12 m8 push-m2">
<div class="item-detail">
<div class="s4 m6 col">
<img src="@image.src" alt="@image.alt"/>
<a href="@image.src" class="lightbox">
Click to enlarge
</a>
</div>
<div class="s8 m6 col">
<h2>@title</h2>
<hr/>
<h5>@subtitle</h5>
<p>@content</p>
</div>
<div class="s12 m8 col">
<p>
@detail
</p>
@tags
</div>
</div>
</div>
Static Item Properties
All of expressions below can be used within the gv-collection-item tag. These expressions represent a static model's properties, all data attached to these properties can be used in the gv-collection list tag.
@image.alt- Collection image alt tag@image.src- Collection image src@title- Collection item title@subtitle- Collection item subtitle@summary- Collection item summary@content- Collection item content@detail- Collection item additional detail@tags- Tags for collection@category- Collection category
Helper Tags
-category-delimiter
Dynamic Governor Tags
GovTags can also be used inside the collection item template. Each tag will spawn a control within the application that can be edited by the user. The main difference is the data cannot be used within the gv-collection loop.
Installation instructions
On all new Governor sites the collection module will come pre-installed. When building out a custom Governor theme be sure to include the proper module folder structure.
Routing
The collection module automatically creates new routes for your collection. The route is by default yoursite.com/collection/collection-item . To create a custom page for the collection route include a template at modules/collections/pages. Next create a page with the name of your collection and use the template included.
Pro Tip
Use a gv-collection tag in your collection page template in order to show all items within your collection.