Skip to navigation
Your own HTML template

Making blocks repeatable with template tags

When creating a template, you do not yet know how many items a newsletter will have. Using three nested tags, you can allow the person filling in the newsletter to add blocks themselves and switch between them:

  • <lp-repeater> determines which part of your HTML may be repeated.
  • <lp-layout> provides the variants the editor can choose from.
  • <lp-sublayout> bundles variants that are very similar to each other.

Within a repeater, you can also use the lp-pagebreak class to determine where a page break falls when the newsletter is downloaded as a PDF.

These tags only work in an imported HTML template, not in the drag & drop editor. Read more in Importing a custom template in Laposta.

Making blocks repeatable with <lp-repeater>

Place <lp-repeater> around the piece of HTML that may be repeated. In the editor, the block can then be added as many times as needed.

Options

lp-label

The heading displayed in the editor on the left side of the screen above the layouts (and any sublayouts) of this repeater. If you do not provide a label, the editor shows a generic heading (‘Part 1’, ‘Part 2’, and so on). If the template only contains one repeater, no heading will appear.

Example

<lp-repeater lp-label="Top blocks">
<table width="600">
<tr>
<td width="300">
<img lp-edit lp-resizable lp-min-width="100" lp-max-width="300" src="" width="300">
</td>
<td width="300">
<lp-multiline lp-label="A paragraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</lp-multiline>
</td>
</tr>
</table>
</lp-repeater><br />

Offering variants with <lp-layout>

Within a repeater, you can offer different blocks for the editor to choose from, such as a block with the photo on the left and the text on the right, one with the photo on the right, and three photos side by side.

Place <lp-layout> inside <lp-repeater> around each block you want to offer as an option.

Options

lp-label

The name under which you can select the block in the editor. Laposta takes a screenshot of each layout, so the user can see the design straight away.

lp-onrender

Places this layout directly as soon as the template is loaded for the first time. Without this attribute, repeaters are empty at the start and the user has to add blocks themselves. For a header block, for example, placing it directly is more convenient.

lp-sublayout-content

Determines whether sublayouts share their content. See: Bundling similar variants with <lp-sublayout>.

Example

<lp-repeater>
<lp-layout lp-label="Photo with text">
<table width="600">
<tr>
<td width="300">
<img lp-edit lp-resizable lp-min-width="100" lp-max-width="300" src="" width="300">
</td>
<td width="300">
<lp-multiline lp-label="A paragraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</lp-multiline>
</td>
</tr>
</table>
</lp-layout>
<lp-layout lp-label="Three images in a row" lp-onrender>
<table width="600">
<tr>
<td width="200">
<img lp-edit src="" width="200">
</td>
<td width="200">
<img lp-edit src="" width="200">
</td>
<td width="200">
<img lp-edit src="" width="200">
</td>
</tr>
</table>
</lp-layout>
</lp-repeater><br />

Bundling similar variants with <lp-sublayout>

If variants are very similar to each other, the list of individual layouts can quickly become long. Think of an image with text as well as that same setup with a button added, or a block in three background colours. With <lp-sublayout>, you bundle such variants under a single layout. The user then places the layout first and can switch between the sublayouts afterwards.

Options

lp-default

Determines which sublayout appears as soon as the layout is added to the newsletter. Without this attribute, this is the first sublayout.

lp-sublayout-content

Uses the value shared or individual to determine whether the sublayouts share their content. Please note: you place this attribute on the <lp-layout> tag, not on <lp-sublayout>.

For example, if the editor switches between a sublayout with an image and text and a sublayout with an image, text, and a button, lp-sublayout-content determines what happens to the entered content:

ValueWhat happens
shared (default)The sublayouts share their content. If you switch variants, the text and the image are retained.
individualEach sublayout has its own content. This is useful if the structure differs significantly, or if the content needs to remain separate, for instance with two variants of a footer.

Setting page breaks with lp-pagebreak

Every newsletter in Laposta can be downloaded as a PDF. By default, such a PDF consists of one long page, and if Laposta has enabled multi-page PDFs for you, the newsletter is divided arbitrarily across the pages without any additional settings. Especially when printing, this is not always convenient.

In an imported template, you can let the editor decide where a new page begins. To do this, place a piece of HTML with the lp-pagebreak class inside a repeater. This block is visible in the editor, but not in the sent newsletter. In the PDF, a new page starts at that point. There are no restrictions on the design of this block, because it is only visible in the editor.

Example

<lp-layout lp-label="New page when printing">
<table width="100%" cellspacing="0" cellpadding="0" border="0" class="lp-pagebreak"><tr><td align="center"><hr></td></tr></table>
</lp-layout>

If you want to use multi-page PDFs, please email the helpdesk at helpdesk@laposta.nl. The helpdesk will then make sure you can download those PDFs in Laposta.

Making text editable with template tags

Make single lines of text and longer text blocks editable in your own HTML template.

Creating an automatic table of contents with template tags

With the lp-toc tag, you can automatically create a table of contents in your own HTML…

Which blocks are available in the editor?

Overview of the eleven blocks you use to build a campaign or template, and what you can…

Copying formatting to other blocks

How to copy the design of a block all at once to all other blocks of the same type in…