Afbeeldingen wijzigbaar maken met sjabloontags
In een zelfgemaakt HTML-sjabloon plaats je afbeeldingen op de normale manier. Wil je een afbeelding wijzigbaar maken, zet er dan een attribuut bij: los in het sjabloon met lp-edit, of binnen een tekstveld waar de tekst omheen loopt.
Deze tags gelden alleen voor een geïmporteerd HTML-sjabloon, niet voor de drag & drop-editor. Hoe je zo’n sjabloon importeert, staat in Een zelfgemaakt sjabloon importeren in Laposta.
Een losse afbeelding met <img>
Voeg aan de img-tag het attribuut lp-edit toe om de afbeelding wijzigbaar te maken. De img-tag moet altijd een width-attribuut bevatten.
Staat er in het src-attribuut een url naar een afbeelding, dan verschijnt die als startafbeelding. Heb je geen afbeelding voorhanden, laat de src dan leeg. Laposta toont dan een standaardafbeelding.
Bij het bewerken kan de redacteur een link achter de afbeelding plaatsen. Staat er in het sjabloon al een link om de img-tag, dan gebruikt Laposta die als standaardwaarde.
Opties
Deze attributen bepalen wat de redacteur in de editor met de afbeelding kan doen.
Maakt een afbeelding wijzigbaar.
Toont de ingevulde waarde in de editor boven de plek waar de afbeelding te wijzigen is.
Geeft aan dat de grootte van de afbeelding aangepast mag worden.
Geeft aan tot welke breedte de afbeelding maximaal vergroot mag worden.
Geeft aan tot welke breedte de afbeelding maximaal verkleind mag worden.
Standaard importeert Laposta alle afbeeldingen in een sjabloon en geeft ze vanuit Laposta weer. Met dit attribuut geef je aan dat een 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.
Standaard zijn alle wijzigbare afbeeldingen ook aan te passen met de afbeeldingseditor bij het vullen van het sjabloon. Met dit attribuut schakel je dat voor deze afbeelding uit.
Voorkomt dat de redacteur een link achter de afbeelding kan plaatsen.
Een decoratieve afbeelding is puur bedoeld voor de vormgeving en niet relevant voor de inhoud van de nieuwsbrief, bijvoorbeeld een pijltje voor een link. Voor de toegankelijkheid is het bij dit soort afbeeldingen niet toegestaan een alt-tekst in te vullen. Met dit attribuut geef je aan dat het om een decoratieve afbeelding gaat. De interface vraagt dan niet om een alt-tekst.
Voorbeelden
Het minimum voor een wijzigbare afbeelding, zonder startafbeelding:
Een afbeelding met een standaardlink eromheen, die tussen 100 en 300 pixels breed geschaald mag worden:
Een afbeelding binnen <lp-multiline>
Een afbeelding kan ook binnen een tekstveld staan. De tekst loopt er dan omheen. Bij het bewerken kan de redacteur de afbeelding links, rechts of over de volle breedte van het tekstveld plaatsen, met de pijltjes links en rechts van het multiline-vak. De grootte is standaard aan te passen en het attribuut lp-edit is hier niet nodig.
Opties
Naast de plaatsing en de witruimte stel je met deze attributen vooral in wat de redacteur niet mag aanpassen. Voor lp-label en lp-decorative gelden dezelfde regels als bij een losse afbeelding.
Voorkomt dat de grootte van de afbeelding kan worden aangepast.
Voorkomt dat de redacteur de afbeelding links, rechts of over de volle breedte kan verplaatsen.
Bepaalt de plek van de afbeelding: left voor links in de tekst en right voor rechts.
Geeft aan hoeveel witruimte er om de afbeelding komt, zodat de tekst de afbeelding niet raakt: hspace voor horizontale ruimte en vspace voor verticale.
Dit zijn standaard HTML-attributen. Bij het weergeven vervangt Laposta ze door een tabel rond de afbeelding. Dat is de enige manier om de witruimte in alle e-mailprogramma’s goed weer te geven.
Voorbeeld
Hier staat de afbeelding rechts in de tekst, met een witruimte van 10 pixels eromheen. De redacteur kan de breedte aanpassen tussen 100 en 300 pixels.
De multiline met afbeelding responsive maken
Omdat de afbeelding voor de witruimte in een tabel komt te staan, zijn er een paar extra regels CSS nodig om de multiline goed te tonen op kleinere schermen. Neem deze regels op binnen een mediaquery. De tekst komt dan onder de afbeelding te staan, met de afbeelding op 100% breedte.