Tags om een afbeelding te wijzigen

Afbeeldingen <img>

U kunt in uw sjabloon op de normale manier afbeeldingen gebruiken. Als u een afbeelding wijzigbaar wilt maken, voegt u het attribuut <code>lp-edit</code> toe. Het is ook mogelijk aan te geven dat de afbeelding van grootte gewijzigd mag worden.
Als er in het src attribuut van de img tag een url naar een afbeelding staat, dan zal deze als startafbeelding getoond worden. Mocht u geen afbeelding voorhanden hebben, dan kunt u de src leeg laten; dan wordt een standaardafbeelding getoond.
Bij het bewerken is het mogelijk een link achter de afbeelding te plaatsen. Als er 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 kunt u aangeven tot welke breedte de afbeelding maximaal vergroot mag worden.
lp-min-width
Met dit attribuut kunt u aangeven tot welke breedte de afbeelding maximaal verkleind mag worden.
lp-no-import
Standaard worden alle afbeeldingen in een sjabloon geimporteerd en vanuit Laposta weergegeven. Met dit attribuut geeft u aan dat de betreffende afbeelding niet geimporteerd 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 geeft u 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-highres
Als afbeeldingen worden weergegeven op schermen met een hoge pixeldichtheid (bijvoorbeeld het scherm van een moderne smartphone of een Apple Retina display) is het mooier de resolutie te verhogen door een afbeelding met dubbele grootte te gebruiken. Met deze tag wordt aangegeven dat de betreffende afbeelding hiervoor geschikt moet worden gemaakt.
lp-disable-href
Standaard kan er een link achter de afbeelding worden geplaatst. Wilt u dat niet, dan kunt u 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 bepaalt u 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 kunt u aangeven hoeveel witruimte er 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