> For clean Markdown of any page, append .md to the page URL. > For a complete documentation index, see https://docs.laposta.org/llms.txt. > For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://docs.laposta.org/_mcp/server. # Afbeeldingen wijzigbaar maken met sjabloontags > Maak afbeeldingen in een geïmporteerd HTML-sjabloon bewerkbaar en stel in of de grootte en link aangepast mogen worden. 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. > **Note** > > 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](/welke-opties-biedt-laposta-bij-een-zelfgemaakt-sjabloon). ## Een losse afbeelding met `` 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. **`lp-edit`** Maakt een afbeelding wijzigbaar. --- **`lp-label`** Toont de ingevulde waarde in de editor boven de plek waar de afbeelding te wijzigen is. --- **`lp-resizable`** Geeft aan dat de grootte van de afbeelding aangepast mag worden. --- **`lp-max-width`** Geeft aan tot welke breedte de afbeelding maximaal vergroot mag worden. --- **`lp-min-width`** Geeft aan tot welke breedte de afbeelding maximaal verkleind mag worden. --- **`lp-no-import`** 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. --- **`lp-no-imageedit`** Standaard zijn alle wijzigbare afbeeldingen ook aan te passen met de [afbeeldingseditor](/afbeeldingen-bewerken) bij het vullen van het sjabloon. Met dit attribuut schakel je dat voor deze afbeelding uit. --- **`lp-disable-href`** Voorkomt dat de redacteur een link achter de afbeelding kan plaatsen. --- **`lp-decorative`** 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: ```html ``` Een afbeelding met een standaardlink eromheen, die tussen 100 en 300 pixels breed geschaald mag worden: ```html ``` ## Een afbeelding binnen `` Een afbeelding kan ook binnen een [tekstveld](/tags-om-tekst-te-wijzigen) 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. **`lp-disable-resizable`** Voorkomt dat de grootte van de afbeelding kan worden aangepast. --- **`lp-disable-moving`** Voorkomt dat de redacteur de afbeelding links, rechts of over de volle breedte kan verplaatsen. --- **`align`** Bepaalt de plek van de afbeelding: `left` voor links in de tekst en `right` voor rechts. --- **`hspace, vspace`** 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. ```html 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. ``` ### 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. ```css /* responsive image inside multiline */ .lp-image-wrapper { width:100% !important; } .lp-image-wrapper-h { display: none !important; } .lp-image-wrapper-img { display: block !important; width: 100% !important; overflow: auto !important; } .lp-multiline-image { width: 100% !important; height: auto !important; margin: 0 !important; } ``` ## Gerelateerde artikelen #### [Tekst wijzigbaar maken met sjabloontags](/tags-om-tekst-te-wijzigen) Maak losse tekstregels en langere tekstblokken bewerkbaar in een eigen HTML-sjabloon. #### [Een videoscreenshot plaatsen met een sjabloontag](/tags-om-video-screenshot-te-wijzigen) Plaats in je eigen HTML-sjabloon automatisch een klikbaar screenshot met afspeelknop… #### [Een afbeelding bewerken en verkleinen](/afbeeldingen-bewerken) Pas met de afbeeldingseditor onder meer helderheid, contrast, formaat en… #### [Een afbeelding plaatsen en bewerken in een Joe-sjabloon](/hoe-bewerk-ik-een-afbeelding-in-mijn-sjabloon-op-maat-type-joe) Zo kun je vaste en schaalbare afbeeldingen plaatsen, bijsnijden, schalen of verplaatsen…