up

Copyable and Repeatable Blocks

It's been a bit quiet on the SendCastle blog lately, but that's just because of a lack of blogging. Plenty of things have gotten added, tweaked and fixed but just never got blogged about. This time I felt something needed to be highlighted, however!
 
We have added a feature that enables you to have "copyable" blocks in your templates (or "repeatable" blocks as they're sometimes called). You can add copyables to any template, and it's easy too; as you can see below the fold!



 
A few small things that are important to keep in mind, though:
  • Once added to a template, copyables are available in the WYSIWYG message editor of SendCastle.
     
  • A "copyable" will have a few options appear on the top-right side of the area that can be copied. There will be four options: Add (+), Remove (-), and Moving Up or Down.
     
  • Sometimes there might not be a "Remove" because the template says that it should not be possible to delete the original (probably recommended for all copyables). Any copies will always have have the Remove function available.
     
  • A "copyable" can have editables and any other template features you have come to expect, but it does not have to be an editable -- it can be just about any part of your template.
     
  • A "copyable" can be moved around within its siblings and other copyables. The siblings does not even have to be copyables themselves.
     
  • A "copyable" can be grouped and consist of more than one element. You may want to include more than just an editable, such as the headline, a divider and an image too.
     
  • You cannot add "copyable" to table-cells (td), not because it's technically impossible, but because it has the chance to add a lot of confusion and mess in an email where almost everything is based around tables. We felt it was safer to make sure that a template designer simply add new table-cells in the template's HTML. Now, if you feel that you really, really want to add copyables to table-cells, get in touch with an example of where it could be handy and we'll certainly consider it.
     
  • All editables' names and ID's in new copies will automatically be renamed in the template (good thing). There is a caveat however: remember that having CSS styles defined for ID's may break styling of your copy. There really is no work-around for this as an ID must be unique in a document. The best is to simply avoid ID's in your CSS and use classes instead.
     
  • You cannot have a copyable in an editable
     
  • To see these options, hover over the first element, not its grouped siblings
 

So, how do you add a copyable (which are repeatable)?

You add a few attributes to any existing HTML tag, for example on the table-row (TR):

The highlighted row shows a full example of a table-row being set as a copyable.

Creating a copyable
The only thing mandatory to make a section copyable in a template is the following:

data-editable-copyable="true"
 
It should be added exactly like that, as an attribute to any element (except table-cells). It will probably be mostly used on table-rows, though (TR elements).
 
Grouping elements
If you want to include more than one element in the copyable, you can group in one or more siblings (for instance, more table-rows (TR)):

data-extra-siblings="1"

Set this value to 0 if you do not want to include any extra siblings, if you want to include two more table rows below the copyable, you'd simply set it to:

data-extra-siblings="2"

Etc. :)
 
Protecting from deletion
In most cases it's probably good to protect the "original" copyable from deletion. It is however not mandatory, but in order to do that, you simply add the attribute:

data-no-delete="true"
 

A simple but complete example

In the example below we add a copyable to the first table-row, which happens to be the headline in this case. We also say that, when copied, it should include the two table-rows below it (the editable and then the divider), finally we say that the original cannot be deleted.
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta property="og:title" content="{$mailsubject}">
    <title>{$mailsubject}</title>
</head>
<body>
    <table>
        <tr data-editable-copyable="true" data-extra-siblings="2" data-no-delete="true">
            <td><strong>For copyable options, hover here</strong></td>
        </tr>
        <tr>
            <td>{editable name="main"}This is an editable.{/editable}</td>
        </tr>
        <tr height="50">
            <td>
                <hr>
            </td>
        </tr>
        <tr height="50">
            <td>
                This is not an editable
            </td>
        </tr>
        <tr height="50">
            <td>
                <hr>
            </td>
        </tr>
    </table>
</body>
</html>



You can try adding this template to your own SendCastle account and play around with it!

On an ending note: All premade templates in SendCastle will have copyables added within the next few days. But nothing stops you from doing it yourself until then!
Joakim Romland
Tags: copyable, repeatable, blocks, sendcastle, feature, editor, template