Tags om blokken te herhalen

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.
De repeater tag is hiervoor 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 als 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>

Nog steeds hulp nodig? Neem contact met ons op Neem contact met ons op