Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Creating re-usable snippets with the var-plugin for Statamic.
fields:
layout:
type: select
instructions: "Select the layout of the page."
options:
image_left: Image left
image_right: Image right
default: image_left
image:
type: file
allowed: [jpg, jpeg, png, gif]
destination: assets/img/
{{ var:content_snippet }}
<div class="page-content">
{{ content|markdown }}
</div>
{{ /var:content_snippet }}
{{ var:image_snippet }}
<div class="page-image">
{{ if image }}
<img src="{{ transform src="{ image }" width="800" }}">
{{ else }}
<img src="/assets/img/placeholder.jpg">
{{ /if }}
</div>
{{ /var:image_snippet }}
<div class="container">
<h1>{{ title }}</h1>
{{ if layout == 'image_left' }}
<div class="col-group">
<div class="col-4">{{ var:image_snippet }}</div>
<div class="col-8">{{ var:content_snippet }}</div>
</div>
{{ elseif layout == 'image_right' }}
<div class="col-group">
<div class="col-8">{{ var:content_snippet }}</div>
<div class="col-4">{{ var:image_snippet }}</div>
</div>
{{ /if }}
</div>
_fieldset _template title layout image
page-fielset
page-template
My Page with flexible Layout
image_left
assets/img/kitten.jpg

This page demonstrates how to use the var-plugin for creating snippets of code which can be inserted anywhere on the page. Pretty handy for building flexible and configurable layouts without repeating much code.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.