{"_id":"546287c18ba5620800710e4c","githubsync":"","parentDoc":null,"project":"542979c51215fe08007e0ee5","version":{"_id":"542979c51215fe08007e0ee8","project":"542979c51215fe08007e0ee5","__v":4,"createdAt":"2014-09-29T15:24:53.437Z","releaseDate":"2014-09-29T15:24:53.437Z","categories":["542979c51215fe08007e0ee9","542985897a6b690800767fab","5429898d1215fe08007e0fe6","542ac5aa54d88d140075fcaf"],"is_deprecated":false,"is_hidden":false,"is_beta":true,"is_stable":true,"codename":"","version_clean":"1.0.0","version":"1.0"},"__v":9,"category":{"_id":"542979c51215fe08007e0ee9","project":"542979c51215fe08007e0ee5","version":"542979c51215fe08007e0ee8","__v":12,"pages":["542979c51215fe08007e0eeb","542ae00fcedcfc140004b81e","542abdb354d88d140075fbf2","542986467a6b690800767fb1","54298c241215fe08007e0ff4","54380adef1c23914006724b9","546287c18ba5620800710e4c","55e99381358d923700be988e","56328926df556c0d00cd0929","56421475b0dc090d00f8842c"],"sync":{"url":"","isSync":false},"reference":false,"createdAt":"2014-09-29T15:24:53.471Z","from_sync":false,"order":0,"slug":"documentation","title":"Documentation"},"is_link":false,"user":"542979b61215fe08007e0ee4","updates":[],"next":{"pages":[],"description":""},"createdAt":"2014-11-11T22:03:45.447Z","link_external":false,"link_url":"","sync_unique":"","hidden":false,"api":{"basic_auth":false,"results":{"codes":[]},"settings":"","try":true,"auth":"never","params":[],"url":""},"isReference":false,"order":2,"body":"Inkcite's Helpers dramatically simplify your emails by reducing duplicate code.  This prevents errors and makes your email code easier to read and maintain.  Inkcite offers a variety of built-in Helpers for working with tables, images, links, fonts and lots more.  \n\nHelpers look like HTML tags except that they're wrapped in brackets rather than greater-than and less-than symbols.  Here's an example of a [bulletproof button](doc:button).\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"{button id=\\\"order-now\\\" href=\\\"http://mystore.com\\\"}ORDER NOW{/button}\",\n      \"language\": \"html\",\n      \"name\": \"source.html\"\n    }\n  ]\n}\n[/block]\nRefer to the documentation under Helpers for details on all of Inkcite's built-in functionality to make email development easier.\n\nInkcite also makes it extremely easy for you to define your own custom variables and reusable code blocks. Custom Helpers are defined in the appropriately-named `helpers.tsv`  file.\n\n# Variables\n\nThe simplest Helper is a value you declare and give a readable name.  For example, you might define a frequently-used column width or your primary call-to-action color.  If you need to change the value, you can update it in one spot and it updates everywhere it is referenced.  For example:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"green\\t#009900\\nblue\\t#3366cc\",\n      \"language\": \"ruby\",\n      \"name\": \"helpers.tsv\"\n    }\n  ]\n}\n[/block]\n\n[block:callout]\n{\n  \"type\": \"info\",\n  \"title\": \"Note!\",\n  \"body\": \"There are tabs between the color names and their corresponding hex values.\"\n}\n[/block]\nOnce defined, you can use `{green}` and `{blue}` repeatedly in your email's code like this:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<h2 color={blue}>Now in stock!</h2>\\n<div style=\\\"color: {green}\\\">from $134.99</div>\",\n      \"language\": \"html\",\n      \"name\": \"source.html\"\n    }\n  ]\n}\n[/block]\nWhen you view your email using Inkcite's server, send a preview or build the final assets, Inkcite will automatically insert the values that correspond to those tags.  If your client changes their mind and wants a different color combination in your email, simply update your `helpers.tsv` file and all usages automatically update.\n\n# Code Blocks\n\nHelpers aren't limited to individual values.  They can also be used to simplify your email by replacing repeated chunks of code.  For example, it's common to repeat your call-to-action multiple times in an email.  Here's an example where with a styled \"Buy Now!\" link appears multiple times in the email:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<a href=\\\"http://ourstie.org/buy-now/\\\" style=\\\"bgcolor: #3366cc; color: #ffffff; display: block; padding: 5px; border-radius: 4px;\\\">BUY NOW</a>\\n\\nLorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in urna\\nsodales tortor sollicitudin ullamcorper...\\n\\n<a href=\\\"http://oursite.org/buy-now/\\\" style=\\\"bgcolor: #3355cc; color: #ffffff; display: block; border-radius: 4px; padding: 6px;\\\">BUY NOW!</a>\",\n      \"language\": \"html\",\n      \"name\": \"source.html\"\n    }\n  ]\n}\n[/block]\nOops!  When you repeat code, you run the risk of making inadvertent mistakes.  In this (admittedly contrived) example, the links have subtly different background colors and padding.  One button's label includes an exclamation point, the other contains a typo in the URL.  The order of the style is different making it difficult to globally search-and-replace.\n\nReducing or removing duplicate code leads to less errors and makes your emails easier to maintain.  Let's define a `{call-to-action}` Helper like this:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"call-to-action\\t<a href=\\\"http://oursite.org/buy-now/\\\" style=\\\"bgcolor: #3366cc; color: #ffffff; display: block; border-radius: 4px; padding: 6px;\\\">BUY NOW!</a>\",\n      \"language\": \"ruby\",\n      \"name\": \"helpers.tsv\"\n    }\n  ]\n}\n[/block]\n\n[block:callout]\n{\n  \"type\": \"info\",\n  \"title\": \"Note!\",\n  \"body\": \"There is a tab between call-to-action and its corresponding HTML code.\"\n}\n[/block]\nOops!  This code still repeats itself.  That `#3366cc` background color looks familiar.  Helpers can reference other Helpers so we can include `{blue}` here:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"call-to-action\\t<a href=\\\"http://oursite.org/buy-now/\\\" style=\\\"bgcolor: {blue}; color: #ffffff; display: block; border-radius: 4px; padding: 6px;\\\">BUY NOW!</a>\",\n      \"language\": \"ruby\",\n      \"name\": \"helpers.tsv\"\n    }\n  ]\n}\n[/block]\nBy replacing the duplicate HTML in `email.html` with the `{call-to-action}` helper, our email's becomes a lot cleaner, simpler.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"{call-to-action}\\n\\nLorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in urna\\nsodales tortor sollicitudin ullamcorper...\\n\\n{call-to-action}\",\n      \"language\": \"html\",\n      \"name\": \"source.html\"\n    }\n  ]\n}\n[/block]\n# Custom Tags\n\nAnother variation on the code block is a custom tag Helper.  Custom tag Helpers have both a start and an end declaration, separated by tabs.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<h2>30% Off Today's Bestsellers</h2>\",\n      \"language\": \"html\",\n      \"name\": \"source.html\"\n    }\n  ]\n}\n[/block]\nUsing header tags in your email is generally considered a bad idea. You have to CSS reset and overly style your way to a consistent appearance across clients.  Instead, let's declare our own custom heading using a styled `<div>` with a second `<div>` used for consistent spacing afterwards. \n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"h2\\t<div style=\\\"font-size: 15px; font-weight: bold; color: {green}; border-bottom: 1px solid {green}; text-align: center;\\\">\\t</div><div style=\\\"height: 8px; line-height: 8px; font-size: 8px;\\\">&nbsp;</div>\",\n      \"language\": \"ruby\",\n      \"name\": \"helpers.tsv\"\n    }\n  ]\n}\n[/block]\n\n[block:callout]\n{\n  \"type\": \"info\",\n  \"title\": \"Note!\",\n  \"body\": \"There are three values here - the `h1` declaration followed by the opening HTML and the closing HTML.  They are separated by tabs.\"\n}\n[/block]\nInside of `email.html` you can now use `{h2}` and `{/h2}` tags to style your headings:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"{h2}30% Off Today's Bestsellers{/h2}\",\n      \"language\": \"html\",\n      \"name\": \"source.html\"\n    }\n  ]\n}\n[/block]\n# Named Attributes\n\nRemoving duplicate code simplifies your email and makes it easier to maintain.  Inevitably, however, you're going to encounter a situation where an existing Helper meets almost all of your needs, but maybe requires a different color, more padding or some other attribute.  That's where *named attributes* come in.\n\nInkcite Helpers can be declared to accept attributes just like a regular HTML tag - e.g. the `href` attribute of an `<a>` tag.  In this example, we'll extract the vertical spacer we previously declared in our `{h2}` Helper and make it a standalone tag we can use throughout our email.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"vertical-space\\t<div style=\\\"height: 8px; line-height: 8px; font-size: 8px;\\\">&nbsp;</div>\",\n      \"language\": \"ruby\",\n      \"name\": \"helpers.tsv\"\n    }\n  ]\n}\n[/block]\nThere are lots of uses for consistent cross-client vertical spacing - but you don't necessarily want it hard-coded to `8px`.  It would be really useful if you could, instead, specify a `height` attribute whenever you use the `{vertical-space}` Helper.  Here's an example of how that might look:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in urna\\nsodales tortor sollicitudin ullamcorper...\\n\\n{vertical-space height=15}\\n\\nLorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in urna\\nsodales tortor sollicitudin ullamcorper...\",\n      \"language\": \"html\",\n      \"name\": \"source.html\"\n    }\n  ]\n}\n[/block]\nNamed attributes can be added to a Helper's declaration by adding the variable name with `$` around it.  Here's how we would make `height` an attribute for the `{vertical-space}` helper:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"vertical-space\\t<div style=\\\"height: $height$px; line-height: $height$px; font-size: $height$px;\\\">&nbsp;</div>\",\n      \"language\": \"ruby\",\n      \"name\": \"helpers.tsv\"\n    }\n  ]\n}\n[/block]\nWe've replaced the hard-coded `8` with `$height$` and made this Helper significantly more flexible.  As you can see, a named variable can be used anywhere inside of a helper's declaration and can appear multiple times.  When Inkcite renders this Helper in your email, it replaces every instance of `$height$` with the value passed-in.\n\n## Default Values\n\nNamed attributes make Helpers extremely flexible.  In the spirit of keeping your email code DRY, however, sometimes you don't want to specify a value repeatedly.  Named variables can be configured with a default value using this syntax: `$name=default$`.  When the Helper is used in `source.html` if you don't specify a value for that attribute, the default value will be used instead.  Let's update our spacer example:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"vertical-space\\t<div style=\\\"height: $height=15$px; line-height: $height=15$px; font-size: $height=15$px;\\\">&nbsp;</div>\",\n      \"language\": \"text\",\n      \"name\": \"helpers.tsv\"\n    }\n  ]\n}\n[/block]\n\n[block:callout]\n{\n  \"type\": \"danger\",\n  \"title\": \"Oops!\",\n  \"body\": \"At this time, defaults need to be specified each time the variable is referenced in your Helper declaration.  We're aware that this violates the DRY principle.  We're working on an elegant solution. Stay tuned!\"\n}\n[/block]\nThis declaration tells Inkcite that unless otherwise specified `{vertical-space}` will add an `15px` space to your email.  Circling back to our `{h2}` declaration, we can update it to use a custom vertical spacer like this:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"h2\\t<div style=\\\"font-size: 15px; font-weight: bold; color: {green}; border-bottom: 1px solid {green}; text-align: center;\\\">\\t</div>{vertical-space height=8}\",\n      \"language\": \"text\"\n    }\n  ]\n}\n[/block]\n# Multi-Line Helpers\n\nHelpers can become very complex involving lots of HTML, CSS and named attributes.  Up to this point, all of our examples have been declared on a single line.  When things start to get compicated, Inkcite allows you to define Helpers using multiple lines and any formatting you desire.  This is accomplished by wrapping an open or close declaration with `<<-START` and `END->>`.  Here's an example:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"multi-line-helper\\t<<-START\\n  <table cellspacing=0 cellpadding=0 border=0>\\n    <tr>\\n      <td>\\n        Using the START and END tags, you can do whatever formatting you want inside of your declaration.  You can add line breaks, tabs and spaces to make your Helper more readable.\\n      </td>\\n    </tr>\\n  </table>\\nEND->>\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\n# Putting it all Together\n\nHere's a complete example that puts all of this we've talked about into action.  One of the newsletters we designed included a Featured Story section.  Each story in this section included an image, a link to the story and a brief blurb about the article to entire the reader to click.  It uses a combination of custom and built-in Helpers.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"featured-width\\t200\\n\\nfeatured-story\\t<<-START\\n\\t{a id=\\\"$id$\\\" href=\\\"$href$\\\"}\\n    {img src=$id$.jpg height=215 width={story-width} alt=\\\"$title$\\\" bgcolor=$bgcolor=#004f7c$ mobile=\\\"fill\\\"}\\n  {/a}{table bgcolor=$bgcolor=#004f7c$ padding={padding} width={featured-width} mobile=\\\"fill\\\"}\\n    {td font=default}\\n      {a id=\\\"$id$\\\" color={#text}}\\n        {h2}$title${/h2}\\nEND->>\\t<<-START\\n      {/a}{vertical-space height=10}\\n    {/td}\\n  {/table}\\nEND->>\",\n      \"language\": \"text\",\n      \"name\": \"helpers.tsv\"\n    }\n  ]\n}\n[/block]\nThis dramatically simplified the content inside of `source.html`.  Each featured story required very little markup.  Drop an image (in this case `holiday.jpg`) named to match the provided `id` value into the `images` folder, include the blurb between the tags.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"{featured-story id=\\\"holiday\\\" href=\\\"http://xxx.xxxxx.xxx/xxxxx-xx-xxxxxxx.xxx\\\" title=\\\"Proin pellentesque faucibus arcu id ultricies\\\"}\\n   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in urna\\nsodales tortor sollicitudin ullamcorper.\\n{/featured-story}\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]","excerpt":"Don't repeat yourself.  Keep your email code DRY.","slug":"helpers","type":"basic","title":"Helpers"}

Helpers

Don't repeat yourself. Keep your email code DRY.

Inkcite's Helpers dramatically simplify your emails by reducing duplicate code. This prevents errors and makes your email code easier to read and maintain. Inkcite offers a variety of built-in Helpers for working with tables, images, links, fonts and lots more. Helpers look like HTML tags except that they're wrapped in brackets rather than greater-than and less-than symbols. Here's an example of a [bulletproof button](doc:button). [block:code] { "codes": [ { "code": "{button id=\"order-now\" href=\"http://mystore.com\"}ORDER NOW{/button}", "language": "html", "name": "source.html" } ] } [/block] Refer to the documentation under Helpers for details on all of Inkcite's built-in functionality to make email development easier. Inkcite also makes it extremely easy for you to define your own custom variables and reusable code blocks. Custom Helpers are defined in the appropriately-named `helpers.tsv` file. # Variables The simplest Helper is a value you declare and give a readable name. For example, you might define a frequently-used column width or your primary call-to-action color. If you need to change the value, you can update it in one spot and it updates everywhere it is referenced. For example: [block:code] { "codes": [ { "code": "green\t#009900\nblue\t#3366cc", "language": "ruby", "name": "helpers.tsv" } ] } [/block] [block:callout] { "type": "info", "title": "Note!", "body": "There are tabs between the color names and their corresponding hex values." } [/block] Once defined, you can use `{green}` and `{blue}` repeatedly in your email's code like this: [block:code] { "codes": [ { "code": "<h2 color={blue}>Now in stock!</h2>\n<div style=\"color: {green}\">from $134.99</div>", "language": "html", "name": "source.html" } ] } [/block] When you view your email using Inkcite's server, send a preview or build the final assets, Inkcite will automatically insert the values that correspond to those tags. If your client changes their mind and wants a different color combination in your email, simply update your `helpers.tsv` file and all usages automatically update. # Code Blocks Helpers aren't limited to individual values. They can also be used to simplify your email by replacing repeated chunks of code. For example, it's common to repeat your call-to-action multiple times in an email. Here's an example where with a styled "Buy Now!" link appears multiple times in the email: [block:code] { "codes": [ { "code": "<a href=\"http://ourstie.org/buy-now/\" style=\"bgcolor: #3366cc; color: #ffffff; display: block; padding: 5px; border-radius: 4px;\">BUY NOW</a>\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in urna\nsodales tortor sollicitudin ullamcorper...\n\n<a href=\"http://oursite.org/buy-now/\" style=\"bgcolor: #3355cc; color: #ffffff; display: block; border-radius: 4px; padding: 6px;\">BUY NOW!</a>", "language": "html", "name": "source.html" } ] } [/block] Oops! When you repeat code, you run the risk of making inadvertent mistakes. In this (admittedly contrived) example, the links have subtly different background colors and padding. One button's label includes an exclamation point, the other contains a typo in the URL. The order of the style is different making it difficult to globally search-and-replace. Reducing or removing duplicate code leads to less errors and makes your emails easier to maintain. Let's define a `{call-to-action}` Helper like this: [block:code] { "codes": [ { "code": "call-to-action\t<a href=\"http://oursite.org/buy-now/\" style=\"bgcolor: #3366cc; color: #ffffff; display: block; border-radius: 4px; padding: 6px;\">BUY NOW!</a>", "language": "ruby", "name": "helpers.tsv" } ] } [/block] [block:callout] { "type": "info", "title": "Note!", "body": "There is a tab between call-to-action and its corresponding HTML code." } [/block] Oops! This code still repeats itself. That `#3366cc` background color looks familiar. Helpers can reference other Helpers so we can include `{blue}` here: [block:code] { "codes": [ { "code": "call-to-action\t<a href=\"http://oursite.org/buy-now/\" style=\"bgcolor: {blue}; color: #ffffff; display: block; border-radius: 4px; padding: 6px;\">BUY NOW!</a>", "language": "ruby", "name": "helpers.tsv" } ] } [/block] By replacing the duplicate HTML in `email.html` with the `{call-to-action}` helper, our email's becomes a lot cleaner, simpler. [block:code] { "codes": [ { "code": "{call-to-action}\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in urna\nsodales tortor sollicitudin ullamcorper...\n\n{call-to-action}", "language": "html", "name": "source.html" } ] } [/block] # Custom Tags Another variation on the code block is a custom tag Helper. Custom tag Helpers have both a start and an end declaration, separated by tabs. [block:code] { "codes": [ { "code": "<h2>30% Off Today's Bestsellers</h2>", "language": "html", "name": "source.html" } ] } [/block] Using header tags in your email is generally considered a bad idea. You have to CSS reset and overly style your way to a consistent appearance across clients. Instead, let's declare our own custom heading using a styled `<div>` with a second `<div>` used for consistent spacing afterwards. [block:code] { "codes": [ { "code": "h2\t<div style=\"font-size: 15px; font-weight: bold; color: {green}; border-bottom: 1px solid {green}; text-align: center;\">\t</div><div style=\"height: 8px; line-height: 8px; font-size: 8px;\">&nbsp;</div>", "language": "ruby", "name": "helpers.tsv" } ] } [/block] [block:callout] { "type": "info", "title": "Note!", "body": "There are three values here - the `h1` declaration followed by the opening HTML and the closing HTML. They are separated by tabs." } [/block] Inside of `email.html` you can now use `{h2}` and `{/h2}` tags to style your headings: [block:code] { "codes": [ { "code": "{h2}30% Off Today's Bestsellers{/h2}", "language": "html", "name": "source.html" } ] } [/block] # Named Attributes Removing duplicate code simplifies your email and makes it easier to maintain. Inevitably, however, you're going to encounter a situation where an existing Helper meets almost all of your needs, but maybe requires a different color, more padding or some other attribute. That's where *named attributes* come in. Inkcite Helpers can be declared to accept attributes just like a regular HTML tag - e.g. the `href` attribute of an `<a>` tag. In this example, we'll extract the vertical spacer we previously declared in our `{h2}` Helper and make it a standalone tag we can use throughout our email. [block:code] { "codes": [ { "code": "vertical-space\t<div style=\"height: 8px; line-height: 8px; font-size: 8px;\">&nbsp;</div>", "language": "ruby", "name": "helpers.tsv" } ] } [/block] There are lots of uses for consistent cross-client vertical spacing - but you don't necessarily want it hard-coded to `8px`. It would be really useful if you could, instead, specify a `height` attribute whenever you use the `{vertical-space}` Helper. Here's an example of how that might look: [block:code] { "codes": [ { "code": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in urna\nsodales tortor sollicitudin ullamcorper...\n\n{vertical-space height=15}\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in urna\nsodales tortor sollicitudin ullamcorper...", "language": "html", "name": "source.html" } ] } [/block] Named attributes can be added to a Helper's declaration by adding the variable name with `$` around it. Here's how we would make `height` an attribute for the `{vertical-space}` helper: [block:code] { "codes": [ { "code": "vertical-space\t<div style=\"height: $height$px; line-height: $height$px; font-size: $height$px;\">&nbsp;</div>", "language": "ruby", "name": "helpers.tsv" } ] } [/block] We've replaced the hard-coded `8` with `$height$` and made this Helper significantly more flexible. As you can see, a named variable can be used anywhere inside of a helper's declaration and can appear multiple times. When Inkcite renders this Helper in your email, it replaces every instance of `$height$` with the value passed-in. ## Default Values Named attributes make Helpers extremely flexible. In the spirit of keeping your email code DRY, however, sometimes you don't want to specify a value repeatedly. Named variables can be configured with a default value using this syntax: `$name=default$`. When the Helper is used in `source.html` if you don't specify a value for that attribute, the default value will be used instead. Let's update our spacer example: [block:code] { "codes": [ { "code": "vertical-space\t<div style=\"height: $height=15$px; line-height: $height=15$px; font-size: $height=15$px;\">&nbsp;</div>", "language": "text", "name": "helpers.tsv" } ] } [/block] [block:callout] { "type": "danger", "title": "Oops!", "body": "At this time, defaults need to be specified each time the variable is referenced in your Helper declaration. We're aware that this violates the DRY principle. We're working on an elegant solution. Stay tuned!" } [/block] This declaration tells Inkcite that unless otherwise specified `{vertical-space}` will add an `15px` space to your email. Circling back to our `{h2}` declaration, we can update it to use a custom vertical spacer like this: [block:code] { "codes": [ { "code": "h2\t<div style=\"font-size: 15px; font-weight: bold; color: {green}; border-bottom: 1px solid {green}; text-align: center;\">\t</div>{vertical-space height=8}", "language": "text" } ] } [/block] # Multi-Line Helpers Helpers can become very complex involving lots of HTML, CSS and named attributes. Up to this point, all of our examples have been declared on a single line. When things start to get compicated, Inkcite allows you to define Helpers using multiple lines and any formatting you desire. This is accomplished by wrapping an open or close declaration with `<<-START` and `END->>`. Here's an example: [block:code] { "codes": [ { "code": "multi-line-helper\t<<-START\n <table cellspacing=0 cellpadding=0 border=0>\n <tr>\n <td>\n Using the START and END tags, you can do whatever formatting you want inside of your declaration. You can add line breaks, tabs and spaces to make your Helper more readable.\n </td>\n </tr>\n </table>\nEND->>", "language": "html" } ] } [/block] # Putting it all Together Here's a complete example that puts all of this we've talked about into action. One of the newsletters we designed included a Featured Story section. Each story in this section included an image, a link to the story and a brief blurb about the article to entire the reader to click. It uses a combination of custom and built-in Helpers. [block:code] { "codes": [ { "code": "featured-width\t200\n\nfeatured-story\t<<-START\n\t{a id=\"$id$\" href=\"$href$\"}\n {img src=$id$.jpg height=215 width={story-width} alt=\"$title$\" bgcolor=$bgcolor=#004f7c$ mobile=\"fill\"}\n {/a}{table bgcolor=$bgcolor=#004f7c$ padding={padding} width={featured-width} mobile=\"fill\"}\n {td font=default}\n {a id=\"$id$\" color={#text}}\n {h2}$title${/h2}\nEND->>\t<<-START\n {/a}{vertical-space height=10}\n {/td}\n {/table}\nEND->>", "language": "text", "name": "helpers.tsv" } ] } [/block] This dramatically simplified the content inside of `source.html`. Each featured story required very little markup. Drop an image (in this case `holiday.jpg`) named to match the provided `id` value into the `images` folder, include the blurb between the tags. [block:code] { "codes": [ { "code": "{featured-story id=\"holiday\" href=\"http://xxx.xxxxx.xxx/xxxxx-xx-xxxxxxx.xxx\" title=\"Proin pellentesque faucibus arcu id ultricies\"}\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in urna\nsodales tortor sollicitudin ullamcorper.\n{/featured-story}", "language": "html" } ] } [/block]