Tags om blokken te herhalen

Let op: Deze tags hebben geen betrekking op de drag & drop-editor.

Repeaters <lp-repeater>

Een nieuwsbrief bevat meestal blokken die herhaald moeten kunnen worden. Bijvoorbeeld een item met een afbeelding. Van tevoren is niet bekend hoeveel items er zullen komen en het is dan prettig dat degene die de nieuwsbrief vult zelf kan bepalen of er een blok bij moet komen.

Hiervoor is de repeater tag is bedoeld. Door deze tag om het stuk html te plaatsen dat herhaald mag worden, wordt het in de editor mogelijk het blok zo vaak toe te voegen als nodig is.

De blokken zijn te verplaatsen, tenzij het blok bestaat uit meerdere <tr> elementen.

Voorbeeld

<lp-repeater>
<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="Een alinea">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>

Lay-out <lp-layout>

Met een repeater kan hetzelfde blok worden herhaald. Maar vaak is het wenselijk dat er meerdere blokken zijn waartussen kan worden gewisseld. Dat is flexibeler. Bijvoorbeeld: eerst een blok met de foto links en de tekst rechts, dan met de foto rechts en dan drie foto’s naast elkaar. Met de lay-out tag is dit mogelijk.

Deze tag wordt gebruikt binnen een repeater en omsluit de verschillende blokken die herhaald moeten kunnen worden. Elk lay-out element heeft een eigen label en deze labels zijn zichtbaar in de editor. Zo kan de vuller kiezen welk blok op dat moment moet worden ingevoegd.

Opties

lp-label

Elke lay-out kan een eigen label krijgen, dat in de editor getoond wordt bij het toevoegen van een blok. Zo kan de vuller het juiste blok kiezen om toe te voegen.

Als er maar één lay-out binnen de repeater aanwezig is wordt het label niet getoond.

Voorbeeld

<lp-repeater>
<lp-layout lp-label="Foto met tekst">
<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="Een alinea">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="Drie afbeeldingen op rij">
<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>