![Preview how it looks in the MODX Revolution 2.3.x Manager](http://www.agency1.org/images/clearbuttonquickfixpreview.png)

<style>
    .clearImageTV + .x-panel.modx-panel.x-panel-noborder{
     margin-left: 30px;
     margin-top: -34px;
    }
</style>

<div id="tvbrowser{$tv->id}"></div>
<div id="tv-image-{$tv->id}"><a class="clearImageTV" href="#" onclick="javascript:Ext.getCmp('tvbrowser{$tv->id}').setValue('');document.getElementById('tv{$tv->id}').value='';document.getElementById('tv-image-preview-{$tv->id}').getElementsByTagName('img')[0].remove();"><i class="icon icon-2x icon-trash-o"></i></i></a></div>

<div id="tv-image-preview-{$tv->id}" class="modx-tv-image-preview">
    {if $tv->value}<img src="{$_config.connectors_url}system/phpthumb.php?w=400&src={$tv->value}&source={$source}" alt="" />{/if}
</div>
{if $disabled}
<script type="text/javascript">
// <![CDATA[
{literal}
Ext.onReady(function() {
    var fld{/literal}{$tv->id}{literal} = MODx.load({
    {/literal}
        xtype: 'displayfield'
        ,tv: '{$tv->id}'
        ,renderTo: 'tv-image-{$tv->id}'
        ,value: '{$tv->value|escape}'
        ,width: 400
        ,padding: 300
        ,msgTarget: 'under'
    {literal}
    });
});
{/literal}
// ]]>
</script>
{else}
<script type="text/javascript">
// <![CDATA[
{literal}
Ext.onReady(function() {
    var fld{/literal}{$tv->id}{literal} = MODx.load({
    {/literal}
        xtype: 'modx-panel-tv-image'
        ,renderTo: 'tv-image-{$tv->id}'
        ,tv: '{$tv->id}'
        ,value: '{$tv->value|escape}'
        ,relativeValue: '{$tv->value|escape}'
        ,width: 400
        ,allowBlank: {if $params.allowBlank == 1 || $params.allowBlank == 'true'}true{else}false{/if}
        ,wctx: '{if $params.wctx}{$params.wctx}{else}web{/if}'
        {if $params.openTo},openTo: '{$params.openTo|replace:"'":"\\'"}'{/if}
        ,source: '{$source}'
    {literal}
        ,msgTarget: 'under'
        ,listeners: {
            'select': {fn:function(data) {
                MODx.fireResourceFormChange();
                var d = Ext.get('tv-image-preview-{/literal}{$tv->id}{literal}');
                if (Ext.isEmpty(data.url)) {
                    d.update('');
                } else {
                    {/literal}
                    d.update('<img src="{$_config.connectors_url}system/phpthumb.php?h=400&src='+data.url+'&wctx={$ctx}&source={$source}" alt="" />');
                    {literal}
                }
            }}
        }
    });
    MODx.makeDroppable(Ext.get('tv-image-{/literal}{$tv->id}{literal}'),function(v) {
        var cb = Ext.getCmp('tvbrowser{/literal}{$tv->id}{literal}');
        if (cb) {
            cb.setValue(v);
            cb.fireEvent('select',{relativeUrl:v});
        }
        return '';
    });
});
{/literal}
// ]]>
</script>
{/if}

![Preview how it looks in the MODX Revolution 2.3.x Manager](http://www.agency1.org/images/clearbuttonquickfixpreview.png)

<style>
    .clearImageTV + .x-panel.modx-panel.x-panel-noborder{
     margin-left: 30px;
     margin-top: -34px;
    }
</style>

<div id="tvbrowser{$tv->id}"></div>
<div id="tv-image-{$tv->id}"><a class="clearImageTV" href="#" onclick="javascript:Ext.getCmp('tvbrowser{$tv->id}').setValue('');document.getElementById('tv{$tv->id}').value='';document.getElementById('tv-image-preview-{$tv->id}').getElementsByTagName('img')[0].remove();"><i class="icon icon-2x icon-trash-o"></i></i></a></div>

<div id="tv-image-preview-{$tv->id}" class="modx-tv-image-preview">
    {if $tv->value}<img src="{$_config.connectors_url}system/phpthumb.php?w=400&src={$tv->value}&source={$source}" alt="" />{/if}
</div>
{if $disabled}
<script type="text/javascript">
// <![CDATA[
{literal}
Ext.onReady(function() {
    var fld{/literal}{$tv->id}{literal} = MODx.load({
    {/literal}
        xtype: 'displayfield'
        ,tv: '{$tv->id}'
        ,renderTo: 'tv-image-{$tv->id}'
        ,value: '{$tv->value|escape}'
        ,width: 400
        ,padding: 300
        ,msgTarget: 'under'
    {literal}
    });
});
{/literal}
// ]]>
</script>
{else}
<script type="text/javascript">
// <![CDATA[
{literal}
Ext.onReady(function() {
    var fld{/literal}{$tv->id}{literal} = MODx.load({
    {/literal}
        xtype: 'modx-panel-tv-image'
        ,renderTo: 'tv-image-{$tv->id}'
        ,tv: '{$tv->id}'
        ,value: '{$tv->value|escape}'
        ,relativeValue: '{$tv->value|escape}'
        ,width: 400
        ,allowBlank: {if $params.allowBlank == 1 || $params.allowBlank == 'true'}true{else}false{/if}
        ,wctx: '{if $params.wctx}{$params.wctx}{else}web{/if}'
        {if $params.openTo},openTo: '{$params.openTo|replace:"'":"\\'"}'{/if}
        ,source: '{$source}'
    {literal}
        ,msgTarget: 'under'
        ,listeners: {
            'select': {fn:function(data) {
                MODx.fireResourceFormChange();
                var d = Ext.get('tv-image-preview-{/literal}{$tv->id}{literal}');
                if (Ext.isEmpty(data.url)) {
                    d.update('');
                } else {
                    {/literal}
                    d.update('<img src="{$_config.connectors_url}system/phpthumb.php?h=400&src='+data.url+'&wctx={$ctx}&source={$source}" alt="" />');
                    {literal}
                }
            }}
        }
    });
    MODx.makeDroppable(Ext.get('tv-image-{/literal}{$tv->id}{literal}'),function(v) {
        var cb = Ext.getCmp('tvbrowser{/literal}{$tv->id}{literal}');
        if (cb) {
            cb.setValue(v);
            cb.fireEvent('select',{relativeUrl:v});
        }
        return '';
    });
});
{/literal}
// ]]>
</script>
{/if}

// 1. Define a helper.
// http://handlebarsjs.com/expressions.html#helpers


// also note: Helpers receive the current context as the this context of the function.
Handlebars.registerHelper('link', function(object) {
  return new Handlebars.SafeString(
    "<a href='" + object.url + "'>" + object.text + "</a>"
  );
});

Handlebars.registerHelper('link', function(text, options) {
  var attrs = [];
  for(var prop in options.hash) {
    attrs.push(prop + '="' + options.hash[prop] + '"');
  }
  return new Handlebars.SafeString(
    "<a " + attrs.join(" ") + ">" + text + "</a>"
  );
});


// 2. Compilation and Execution.
// You can deliver a template to the browser by including it in a <script> tag.
// <script id="entry-template" type="text/x-handlebars-template">
//   template content
// </script>


// check also precompilation: http://handlebarsjs.com/precompilation.html
var source   = $("#entry-template").html();
var template = Handlebars.compile(source);

// execution: http://handlebarsjs.com/execution.html
var context = {title: "My New Post", body: "This is my first post!"}
var html    = template(context);


// 3. Block Expressions.
// http://handlebarsjs.com/#block-expressions


// {{#list people}}{{firstName}} {{lastName}}{{/list}}

templateContext = {
  people: [
    {firstName: "Yehuda", lastName: "Katz"},
    {firstName: "Carl", lastName: "Lerche"},
    {firstName: "Alan", lastName: "Johnson"}
  ]
}

Handlebars.registerHelper('list', function(items, options) {
  var out = "<ul>";
  for(var i=0, l=items.length; i<l; i++) {
    out = out + "<li>" + options.fn(items[i]) + "</li>";
  }
  return out + "</ul>";
});

Handlebars.registerHelper('if', function(conditional, options) {
  if(conditional) {
    return options.fn(this);
  } else {
    return options.inverse(this);
  }
});

Handlebars is a semantic web template system, started by Yehuda Katz in 2010.
Handlebars.js is a superset of Mustache, and can render Mustache templates in addition to Handlebars templates.
More: http://handlebarsjs.com/


1. Expressions.

1.1 Basic usage.


{{mustache}}                                   : Handlebars expression (variable in the current context)
{{article.title}}                              : Handlebars expressions can also be dot-separated paths
{{{foo}}}                                      : If you don't want Handlebars to escape a value

articles.[10].[#comments]                      : The template will treat it roughly eqivalent to this javascript: articles[10]['#comments']

{{! This comment will not be in the output }}  : Any comments that must contain }} or other handlebars tokens should use the {{!-- --}} syntax.
<!-- This comment will be in the output -->    : This comment will be in the output


1.2 Helpers.


{{{link story}}}                               : `link` is the name of a Handlebars helper, and story is a parameter to the helper
{{{link '...' story.url}}}                     : You can also pass a simple String as a parameter to Handlebars helpers.
{{{link "..." href=story.url class="story"}}}  : Handlebars helpers can also receive an optional sequence of key-value pairs as their final parameter


1.3. Subexpressions.


{{outer-helper (inner-helper 'abc') 'def'}}    : Handlebars offers support for subexpressions, which allows you to invoke multiple helpers


2. Block Expressions.


{{#noop}}{{body}}{{/noop}}                     : Basic block, The noop helper will receive an options hash. This options hash contains a function (options.fn) that behaves like a normal compiled Handlebars template. 

{{#with story}}
  <div class="intro">{{{intro}}}</div>
  <div class="body">{{{body}}}</div>
{{/with}}


Note 1: When looping through items in each, you can optionally reference the current loop index via {{@index}}.
Note 2: Additionally for object iteration, {{@key}} references the current key name.
Note 3: The first and last steps of iteration are noted via the @first and @last variables then iterating over an array.
Note 4: When iterating over an object only the @first is available.

{{#each comments}}
  <h2><a href="/posts/{{../permalink}}#{{id}}">{{title}}</a></h2>
  <div>{{body}}</div>
{{/each}}


{{#if isActive}}
  <img src="star.gif" alt="Active">
{{else}}
  <img src="cry.gif" alt="Inactive">
{{/if}}

{{#unless license}}
  <h3 class="warning">WARNING: This entry does not have a license!</h3>
{{/unless}}


Note 1: The log helper allows for logging of context state while executing a template.
Note 2: Delegates to Handlebars.logger.log which may be overriden to perform custom logging.

{{log "Look at me!"}}


3. Built-In Utilities.


Handlebars.Utils.escapeExpression(string) : HTML escapes the passed string, making it safe for rendering as text within HTML content.
Handlebars.Utils.isEmpty(value)           : Determines if a given value is empty.
Handlebars.Utils.extend(obj, value)       : Simple utility method to augment obj with all keys defined on value.
Handlebars.Utils.toString(obj)            : Generic toString method.
Handlebars.Utils.isArray(obj)             : Determines if an obj is an array.
Handlebars.Utils.isFunction(obj)          : Determines if an obj is a function.

<section class="section{%if include.spaced %} section--spaced{% endif %}{%if include.padded %} section--padded{% endif %}{%if include.classes %} {{ include.classes }}{% endif %}{%if include.centred %} section--centred{% endif %}" style="{%if include.color %}color: {{ include.color }};{% endif %}{%if include.bgcolor %}background-color: {{ include.bgcolor }};{% endif %}">
  <div class="l-container{%if include.size %}  l-container--{{ include.size }}{% endif %}">
    {% if include.title %}
      <h3 class="h3">{{ include.title }}</h3>
    {% endif%}
    {{ include.body | markdownify }}
    {% if include.link %}
      <a href="{{ include.href }}" rel="external">{{ include.link }}</a>
    {% endif %}
  </div>
</section>

{% for item in page.partials %}
  {% include {{item.name}}.html
    spaced=item.spaced
    padded=item.padded
    src=item.src
    title=item.title
    body=item.body
    link=item.link
    href=item.href
    gutter=item.gutter
    stack=item.stack
    poster=item.poster
    content=item.content
    bgcolor=item.bgcolor
    bgimg=item.bgimg
    color=item.color
    columnwidth=item.columnwidth
    centred=item.centred
    cite=item.cite
    attribute=item.attribute
    id=item.id
    size=item.size
    contained=item.contained %}
{% endfor %}

<section class="section{%if include.spaced %} section--spaced{% endif %}{%if include.padded %} section--padded{% endif %}{%if include.classes %} {{ include.classes }}{% endif %}{%if include.centred %} section--centred{% endif %}" style="{%if include.color %}color: {{ include.color }};{% endif %}{%if include.bgcolor %}background-color: {{ include.bgcolor }};{% endif %}">
	<div class="l-container{%if include.size %}  l-container--{{ include.size }}{% endif %}">
		{% if include.title %}
			<h3 class="h3">{{ include.title }}</h3>
		{% endif%}
		{{ include.body | markdownify }}
		{% if include.link %}
			<a href="{{ include.href }}" rel="external">{{ include.link }}</a>
		{% endif %}
	</div>
</section>

<section class="section section--img{%if include.spaced %} section--spaced{% endif %}{%if include.padded %} section--padded{% endif %}{%if include.classes %} {{ include.classes }}{% endif %}"{%if include.attrs %} {{ include.attrs }}{% endif %}>
	{% if include.contained %}
		<div class="l-container{% if include.contained == "wide" %} l-container--wide{% endif %}">
	{% endif %}
	<img class="lazyload"
		src="{{ site.assets.imgPath }}{{include.src}}?w=500&{{ site.assets.params }}{%if include.params %}&{{ include.params }}{% endif %}"
		data-sizes="auto"
		data-srcset="{{ site.assets.imgPath }}{{include.src}}?w=500&{{ site.assets.params }}{%if include.params %}&{{ include.params }}{% endif %} 500w,
		{{ site.assets.imgPath }}{{include.src}}?w=750&{{ site.assets.params }}{%if include.params %}&{{ include.params }}{% endif %} 750w,
		{{ site.assets.imgPath }}{{include.src}}?w=1000&{{ site.assets.params }}{%if include.params %}&{{ include.params }}{% endif %} 1000w,
		{{ site.assets.imgPath }}{{include.src}}?{{ site.assets.params }}{%if include.params %}&{{ include.params }}{% endif %} 1800w"
		alt="{{ include.title }}">
	{% if include.contained %}
		</div>
	{% endif %}
</section>

# ----------------------- #
# Styling & Colour scheme #
# ----------------------- #
style:
  color:
    primary: "#db030f"
    secondary: "#000"
    text: "#fff"

# Hero area information
hero:
  type: "1"
  bg: "work/canon-unleashprint/hero.jpg"
  overlay: "work/canon-unleashprint/hero-overlay.png"
  color: "#fff"

relatedProject: unilever-lynx-bigger-issues

# ------------- #
# Intro content #
# ------------- #
intro:
  title: "Showing print professionals how to unleash the power of print with Canon."
  body: >
    Canon's commercial print audience is incredibly diverse, ranging from small high street shops to big commercial outfits. With drupa, the largest print event in Europe, just around the corner, we needed a single, striking creative idea that would resonate with them all - encouraging print professionals around the world to choose Canon and discover new print opportunities.

# ------------ #
# Main content #
# ------------ #
partials:
 - name: section-video
   id: 183025668
   spaced: true
 - name: section
   title: A wide-ranging audience. One unifying idea.
   body: |
     Capturing the attention of all who saw it, #UNLEASHPRINT struck a positive chord with our audience. Its compelling message provided a great platform for us to produce inspiring social content, quirky product demos, thought-provoking headlines, surprising DM and more.
   spaced: "true"
 - name: section-carousel
   src:
    - "work/canon-unleashprint/carousel01.jpg"
    - "work/canon-unleashprint/carousel02.jpg"
    - "work/canon-unleashprint/carousel03.jpg"
    - "work/canon-unleashprint/carousel04.jpg"
    - "work/canon-unleashprint/carousel05.jpg"
   padded: "true"
 - name: section
   title: Less product. More possibilities.
   body: |
     Instead of pushing a particular product, we focused on user-benefits, demonstrating how everyone could #UNLEASHPRINT. From laptops to table tops, we showed our audience endless print possibilities - and encouraged them to get involved too.
   spaced: "true"
 - name: section-video
   id: 168222866
   poster: "work/canon-unleashprint/video_cover.jpg"
 - name: section
   title: Consideration and profitability. Up and up.
   body: |
     On-stand sales at drupa went up 30% compared to previous years. The hero product launch hit its sales target by day three of the 10-day event. And during the event, #UNLEASHPRINT was used three times more than the hashtag of any other competitor.
   gutter: true
   spaced: "true"
 - name: section-img
   src: "work/canon-unleashprint/logo-blurry.jpg"
 - name: quote--lrg
   body: |
     We set out to give visitors fresh ideas about how they could expand their capabilities and to inspire them to unleash print in their own individual ways. We've surpassed that objective on every level.
   cite: "Jeppe Frandsen"
   attribute: "Executive Vice President of Industrial & Production Solutions Canon Europe"
   padded: true
 - name: section-scroll
   src: "work/canon-unleashprint/scroll.jpg"
   padded: true

{% for item in page.partials %}
  {% include {{item.name}}.html spaced=item.spaced padded=item.padded src=item.src slashcolor=item.slashcolor direction=item.direction title=item.title body=item.body title2=item.title2 body2=item.body2 link=item.link href=item.href link2=item.link2 href2=item.href2 gutter=item.gutter stack=item.stack poster=item.poster content=item.content bgcolor=item.bgcolor bgimg=item.bgimg color=item.color columnwidth=item.columnwidth centred=item.centred cite=item.cite attribute=item.attribute id=item.id size=item.size contained=item.contained %}
{% endfor %}

<style>
	.hero {
		background-color: {{ page.style.color.primary }};
		color:{{ page.hero.color }};
		background-image: url({{ site.assets.imgPath }}{{ page.hero.bg }}?w=500&{{ site.assets.params }});
	}

	.hero-title {
		color: {{ page.hero.color }};
	}

	.hero-link {
		color: {{ page.hero.color }};
	}

	.section--quote {
		background-color: {{ page.style.color.primary }};
		color: {{ page.style.color.text }};
	}
</style>

// 1. Define a helper.
// http://handlebarsjs.com/expressions.html#helpers


// also note: Helpers receive the current context as the this context of the function.
Handlebars.registerHelper('link', function(object) {
  return new Handlebars.SafeString(
    "<a href='" + object.url + "'>" + object.text + "</a>"
  );
});

Handlebars.registerHelper('link', function(text, options) {
  var attrs = [];
  for(var prop in options.hash) {
    attrs.push(prop + '="' + options.hash[prop] + '"');
  }
  return new Handlebars.SafeString(
    "<a " + attrs.join(" ") + ">" + text + "</a>"
  );
});


// 2. Compilation and Execution.
// You can deliver a template to the browser by including it in a <script> tag.
// <script id="entry-template" type="text/x-handlebars-template">
//   template content
// </script>


// check also precompilation: http://handlebarsjs.com/precompilation.html
var source   = $("#entry-template").html();
var template = Handlebars.compile(source);

// execution: http://handlebarsjs.com/execution.html
var context = {title: "My New Post", body: "This is my first post!"}
var html    = template(context);


// 3. Block Expressions.
// http://handlebarsjs.com/#block-expressions


// {{#list people}}{{firstName}} {{lastName}}{{/list}}

templateContext = {
  people: [
    {firstName: "Yehuda", lastName: "Katz"},
    {firstName: "Carl", lastName: "Lerche"},
    {firstName: "Alan", lastName: "Johnson"}
  ]
}

Handlebars.registerHelper('list', function(items, options) {
  var out = "<ul>";
  for(var i=0, l=items.length; i<l; i++) {
    out = out + "<li>" + options.fn(items[i]) + "</li>";
  }
  return out + "</ul>";
});

Handlebars.registerHelper('if', function(conditional, options) {
  if(conditional) {
    return options.fn(this);
  } else {
    return options.inverse(this);
  }
});

Handlebars is a semantic web template system, started by Yehuda Katz in 2010.
Handlebars.js is a superset of Mustache, and can render Mustache templates in addition to Handlebars templates.
More: http://handlebarsjs.com/


1. Expressions.

1.1 Basic usage.


{{mustache}}                                   : Handlebars expression (variable in the current context)
{{article.title}}                              : Handlebars expressions can also be dot-separated paths
{{{foo}}}                                      : If you don't want Handlebars to escape a value

articles.[10].[#comments]                      : The template will treat it roughly eqivalent to this javascript: articles[10]['#comments']

{{! This comment will not be in the output }}  : Any comments that must contain }} or other handlebars tokens should use the {{!-- --}} syntax.
<!-- This comment will be in the output -->    : This comment will be in the output


1.2 Helpers.


{{{link story}}}                               : `link` is the name of a Handlebars helper, and story is a parameter to the helper
{{{link '...' story.url}}}                     : You can also pass a simple String as a parameter to Handlebars helpers.
{{{link "..." href=story.url class="story"}}}  : Handlebars helpers can also receive an optional sequence of key-value pairs as their final parameter


1.3. Subexpressions.


{{outer-helper (inner-helper 'abc') 'def'}}    : Handlebars offers support for subexpressions, which allows you to invoke multiple helpers


2. Block Expressions.


{{#noop}}{{body}}{{/noop}}                     : Basic block, The noop helper will receive an options hash. This options hash contains a function (options.fn) that behaves like a normal compiled Handlebars template. 

{{#with story}}
  <div class="intro">{{{intro}}}</div>
  <div class="body">{{{body}}}</div>
{{/with}}


Note 1: When looping through items in each, you can optionally reference the current loop index via {{@index}}.
Note 2: Additionally for object iteration, {{@key}} references the current key name.
Note 3: The first and last steps of iteration are noted via the @first and @last variables then iterating over an array.
Note 4: When iterating over an object only the @first is available.

{{#each comments}}
  <h2><a href="/posts/{{../permalink}}#{{id}}">{{title}}</a></h2>
  <div>{{body}}</div>
{{/each}}


{{#if isActive}}
  <img src="star.gif" alt="Active">
{{else}}
  <img src="cry.gif" alt="Inactive">
{{/if}}

{{#unless license}}
  <h3 class="warning">WARNING: This entry does not have a license!</h3>
{{/unless}}


Note 1: The log helper allows for logging of context state while executing a template.
Note 2: Delegates to Handlebars.logger.log which may be overriden to perform custom logging.

{{log "Look at me!"}}


3. Built-In Utilities.


Handlebars.Utils.escapeExpression(string) : HTML escapes the passed string, making it safe for rendering as text within HTML content.
Handlebars.Utils.isEmpty(value)           : Determines if a given value is empty.
Handlebars.Utils.extend(obj, value)       : Simple utility method to augment obj with all keys defined on value.
Handlebars.Utils.toString(obj)            : Generic toString method.
Handlebars.Utils.isArray(obj)             : Determines if an obj is an array.
Handlebars.Utils.isFunction(obj)          : Determines if an obj is a function.

{if strpos($smarty.server.HTTP_USER_AGENT, "Speed Insights" ) == false}
  // hidden for Speed Insights
{/if}

  
  def render
    nameRenderingObject = GRMustacheRendering.renderingObjectWithBlock( lambda do | tag, context, htmlsafe, error |
        return "Arthur & Cie"
      end)

      data = { "name" => nameRenderingObject }

      rendering = GRMustacheTemplate.renderObject(data, fromResource:"Document", bundle:nil, error:nil)
      p rendering
  end

{{ name }}
{{{ name }}}

<?php
require('config.php');
$PAGE->set_context(context_system::instance());
$data = array(
    'message' => 'test',
    'icon' => 't/edit',
    'component' => 'moodle'
);
echo $OUTPUT->render_from_template('core/pix_test', $data);

{{!
    @template core/pix_test

    Example context (json):
    {
      "icon": "t/edit",
      "component": "core"
    }
}}
<ul>
    <li>{{#pix}}t/edit{{/pix}}</li>
    <li>{{#pix}}t/edit, core{{/pix}}</li>
    <li>{{#pix}}t/edit, core, SomeAlt{{/pix}}</li>
    <li>{{#pix}}t/edit, core, {{#str}}invaliddata, error{{/str}}{{/pix}}</li>
    <li>{{#pix}}{{icon}}{{/pix}}</li>
    <li>{{#pix}}{{icon}}, {{component}}{{/pix}}</li>
    <li>{{#pix}}{{icon}}, {{component}}, SomeAlt{{/pix}}</li>
    <li>{{#pix}}{{icon}}, {{component}}, {{#str}}invaliddata, error{{/str}}{{/pix}}</li>
</ul>