grid_item

The grid_item object cannot be invoked on its own. It must be invoked inside a grid row.

It contains following attributes:

Object Fields

Field	Data Type	Description
`grid_item.id`	Number	Returns id of the grid item.
`grid_item.type`	String	Returns the type of the grid item.
`grid_item.title`	String	Returns title of the gird item
`grid_item.content`	String	Returns content of the grid item
`grid_item.hide_title`	Boolean	Returns `true` if title is set as hidden.
`grid_item.hide_description`	Boolean	Returns `true` if description is set as hidden.
`grid_item.column`	Number	Returns index of the grid item on grid row.
`grid_item.opens_in_new_tab`	Boolean	Returns `true` if the grid item will open links in new tab. Used to set `target` of `<a>` HTML tag. Remarks: only available when item enabled "Open link in new window"

`grid_item.type`

Returns the type of the grid item.
See the following table for possible types and their descriptions:

Type	Usage
text	Contains possibly a title and/or description.
image	Contains image(s). Shown with carousel if grid item has more than one images.
video	Contains video link from Youtube or Vimeo. Rendered with corresponding embedded video player.
product	Contains one product.
products	Contains a list of products from selected category.
facebook	Rendered with embedded iframe page plugin.
google_map	Rendered with Google Maps Embed API iframe.
instagram	Renders a list of posts from Instagram.
qrcode	Renders an QR code image.

範例

{% for item in row.items %}
    <div id="page-item-{{item.id}}" class="grid-{{item.type}}-item">
    {% grid_item_block %}{% end_grid_item_block %}

    {% unless item.hide_title or row.full_width %}
        <div>
            {{ item.title }}
        </div>
    {% endunless %}

    {% unless item.hide_description or row.full_width %}
        <div>
        {{ item.content }}
        </div>
    {% endunless %}
    </div>
{% endfor %}