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.

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>

Layouts <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.

Van elke layout maakt Laposta een screenshot, zodat de gebruiker een indruk krijgt van de vormgeving van de blokken.

lp-onrender

Als een sjabloon voor het eerst wordt geladen, dan zijn de repeaters leeg. De gebruiker kan dan blokken plaatsen. Soms wil je alvast een blok klaarzetten bij het laden van het sjabloon, bijvoorbeeld een headerblok. Als je dit attribuut aan een layout toevoegt dan wordt die layout direct aan de nieuwsbrief toegevoegd.

lp-sublayout-content="shared|individual"

Zie hieronder bij sublayouts.

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" 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>

Sublayouts <lp-sublayout>

Layouts kunnen op elkaar lijken. Bijvoorbeeld een Afbeelding met tekst, en een Afbeelding met tekst en een knop. Of een opvallend blok met een groene achtergrond en hetzelfde blok met een gele en rode achtergrond. Je kunt hier verschillende layouts van maken, maar dat kunnen er dan snel erg veel worden. Je kunt ook kiezen voor sublayouts. Dit zijn varianten van een layout, die gebundeld in de editor getoond worden. De gebruiker kan de layout plaatsen en dan wisselen tussen de sublayouts.

Opties

lp-onrender

Gewoonlijk wordt de eerste sublayout getoond bij het toevoegen van een layout aan de nieuwsbrief. Dit kun je aanpassen door dit attribuut toe te voegen.

lp-sublayout-content="shared|individual"

Let op: dit attribuut voeg je toe aan de <lp-layout> tag, maar het gaat over de sublayouts. Hiermee geef je aan of inhoud gedeeld mag worden tussen de sublayouts, of dat ze allemaal hun eigen inhoud bewaren.

Stel dat je een sublayout hebt met een Afbeelding, tekst en een met Afbeelding, tekst en knop. Als je wisselt tussen de sublayouts verwacht je dat de tekst en de afbeelding bewaard blijven. Dat gebeurt standaard, en is de 'shared' waarde.

Kies je voor 'individual', dan heeft elke sublayout z'n eigen inhoud. Voor sommige sublayouts is dat logischer, bijvoorbeeld als de opzet sterk verschilt, of als de inhoud juist gescheiden moet blijven, bijvoorbeeld bij twee varianten van een footer.