Page tree
Skip to end of metadata
Go to start of metadata

Free types

A free type is composed of a `name` and a `template`
A template consists of normal html which supports variable injections and variable manipulation.
Variables are defined with the prefix of a dollar sign:
`$party_name` 

Objects may also be defined with variables separated by a dot: `$party.name`

We support for now three types of variables

  • text: name="$party.name" the attribute `name` must be present
  • image: image="$party.flag" the attribute `image` must be present
  • embed html markup: embed="$party.embedcode" the attribute `embed` must be present


so a basic template example with this code could look like this

Freetype Example
<style>.red { color: red; }</style>
<div>Party name: <input name="$party.name" class="red"/></div> 
<div>Party image: <input image="$party.flag" /></div>

When rendering the template the inputs for:

  • text type are replaced with span tags class `freetype--element` and containing the value inputed.
  • image type are replaced with img tags with src to the image uploaded.
  • embedded html markup replaced with the actual html input.

All the attributes from the input variables are copied to the end rendered element.

after the edit part and user inputs the rendered template in timeline and embed will look like this

Freetype Rendered
<div>Party name: <span class="freetype--element red">Democrats</span>
<div>Party image: <img src="https://liveblog-test-eu-west-1.s3-eu-west-1.amazonaws.com/liveblogfeaturefreetypes/20170105080136/bf5b700b409ac85d806f6894430910add86a96f34eeedcb55d2f11cc04bd9f7b.jpg" /></div>


Templates supports inline css for a better rendering.

f this is still not an option, on the embed part it can be further manipulated via extending the item template.
all the variables values are comasated in a json object on the item meta property

ex:
"data": {
"party": {
"name": "Democrats",
"flag": "https://liveblog-test-eu-west-1.s3-eu-west-1.amazonaws.com/liveblogfeaturefreetypes/20170105080136/bf5b700b409ac85d806f6894430910add86a96f34eeedcb55d2f11cc04bd9f7b.jpg"
}
}


so an extension could look like this example:
<div><figure><img ng-src="{{ item.data.party.flag }}" /></figure>{{ item.data.party.name }}</div>


  • No labels