Creating re-usable snippets with the var-plugin for Statamic.

page-fieldset.yaml

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/

page-template.html

{{ 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>

page.md

_fieldset	page-fielset
_template	page-template
title	My Page with flexible Layout
layout	image_left
image	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.