Tags om een afbeelding te wijzigen

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

Afbeeldingen <img>

Je kunt in jouw sjabloon op de normale manier afbeeldingen gebruiken. Als je een afbeelding wijzigbaar wil maken, voeg je het attribuut 'lp-edit' toe. Het is ook mogelijk aan te geven dat de afbeelding van grootte gewijzigd mag worden.
Als in het src attribuut van de img tag een url naar een afbeelding staat, dan zal deze als startafbeelding getoond worden. Mocht je geen afbeelding voorhanden hebben, dan kun je de src leeg laten; dan wordt een standaardafbeelding getoond.
Bij het bewerken is het mogelijk een link achter de afbeelding te plaatsen. Als in het template een link om de img tag staat, dan zal deze als standaardwaarde worden gebruikt.
Belangrijk: de img tag dient altijd een width-attribuut te bevatten.

Opties

lp-edit
Hiermee kan aangegeven worden dat een afbeelding wijzigbaar is.
lp-label
De waarde van dit attribuut wordt in de editor getoond boven de plek waar deze afbeelding te wijzigen is.
lp-resizable
Neem dit attribuut op om aan te geven dat de grootte van de afbeelding van aangepast mag worden.
lp-max-width
Met dit attribuut kun je aangeven tot welke breedte de afbeelding maximaal vergroot mag worden.
lp-min-width
Met dit attribuut kun je aangeven tot welke breedte de afbeelding maximaal verkleind mag worden.
lp-no-import
Standaard worden alle afbeeldingen in een sjabloon geïmporteerd en vanuit Laposta weergegeven. Met dit attribuut geef je aan dat de betreffende afbeelding niet geïmporteerd mag worden en geladen moet worden vanaf de originele url.
Als dit attribuut actief is kan de afbeelding niet in grootte worden aangepast.
lp-no-scaling
Standaard worden alle afbeeldingen die bij het vullen van het sjabloon worden geupload door Laposta geschaald naar de benodigde grootte. Met dit attribuut geef je aan dit bij de betreffende afbeelding niet mag gebeuren. Hiermee wordt het schalen van de afbeelding overgelaten aan het programma dat de e-mail weergeeft (de browser of het e-mailprogramma).
Deze optie kan nodig zijn als de afbeelding die geupload wordt precies geschikt is gemaakt en zou lijden onder een bewerking.
Opmerking: animated gifs worden nooit geschaald.
lp-no-imageedit
Standaard kunnen alle afbeeldingen die wijzigbaar zijn ook aangepast worden met de bij het vullen van het sjabloon aanwezige afbeeldingen editor. Met deze tag kun je aangeven dat dat voor de betreffende afbeelding niet beschikbaar mag zijn.
lp-disable-href
Standaard kan er een link achter de afbeelding worden geplaatst. Wil je dat niet dan kun je dit attribuut opnemen.

Voorbeeld

Minimum voor wijzigbare afbeelding:
<img lp-edit src="" width="200">
Met binnen grenzen aanpasbare grootte, en standaardlink:
<a href="http://example.net"><img lp-edit lp-resizable lp-min-width="100" lp-max-width="300" src="http://example.net/image.jpg" width="200"></a>
	

Afbeeldingen binnen een tekstveld <lp-multiline> <img>

Zoals hierboven bij het tekstveld is het mogelijk een afbeelding binnen een multiline op te nemen. De tekst zal dan om de afbeelding heen lopen en bij het bewerken kan de afbeelding naar keuze links of rechts geplaatst worden, of over de volle breedte van het tekstveld. De grootte van de afbeelding is standaard te wijzigen.

Opties

lp-label
De waarde van dit attribuut wordt in de editor getoond boven de plek waar deze afbeelding te wijzigen is.
lp-disable-resizable
Voorkomt dat de grootte van de afbeelding kan worden aangepast.
lp-disable-moving
Een afbeelding binnen een multiline kan standaard links, rechts, of over de volle breedte worden geplaatst (met pijltjes links en rechts van het multiline vak). Voeg dit attribuut toe om dit onmogelijk te maken.
align
Hiermee bepaal je de plek van de afbeelding: left voor links in de tekst en right voor rechts.
hspace, vspace
Meestal is het niet gewenst als de tekst de afbeelding raakt. Met deze attributen kun je aangeven hoeveel witruimte om de afbeelding moet worden geplaatst. (hspace voor horizontale ruimte, en vspace voor verticale).
Overigens zijn dit standaard html-attributen, die bij het weergeven worden verwijderd en vervangen door een tabel die rond de afbeelding wordt geplaatst. Dit is de enige manier om de witruimte in alle e-mailprogramma’s correct weer te geven.

Voorbeeld

Hier wordt een afbeelding aan de rechterkant in de tekst geplaatst. De afbeelding is in grootte aanpasbaar tussen een breedte van 100 en 300 pixels. Om de afbeelding is een witruimte van 10 pixels. Zoals te zien is het opnemen van een lp-edit attribuut niet noodzakelijk.
<lp-multiline lp-label="Hoofdalinea"><img lp-min-width="100" lp-max-width="300" src="http://example.net/image.jpg" width="200" align="right" hspace="10" vspace="10">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>
	

De multiline met afbeelding responsive maken

Om een multiline met daarin een afbeelding goed te vertonen op kleinere beeldschermen zijn een paar extra regels css nodig. De afbeelding wordt namelijk opgenomen in een tabel om de witruimte om de afbeelding te garanderen. Met de volgende css voor binnen een mediaquery wordt de tekst onder de afbeelding geplaatst, met de afbeelding op 100%.
/* responsive image inside multiline */

table[class="lp-image-wrapper"] {
  width:100% !important;
}

td[class="lp-image-wrapper-h"] {
  display: none !important;
}

td[class="lp-image-wrapper-img"] {
  display: block !important;
  width: 100% !important;
  overflow: auto !important;
}

img[class="lp-multiline-image"] {
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
}

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