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.

Did this answer your question?