> 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. # Bilder mit Vorlagen-Tags änderbar machen > Machen Sie Bilder in einer importierten HTML-Vorlage bearbeitbar und legen Sie fest, ob Größe und Link angepasst werden dürfen. In einer selbst erstellten Html-Vorlage fügen Sie Bilder wie gewohnt ein. Wenn Sie ein Bild änderbar machen möchten, versehen Sie es mit einem Attribut: entweder einzeln in der Vorlage mit `lp-edit` oder innerhalb eines Textfelds, bei dem der Text das Bild umfließt. > **Note** > > Diese Tags gelten nur für eine importierte Html-Vorlage, nicht für den Drag & Drop-Editor. Wie Sie eine solche Vorlage importieren, erfahren Sie unter [Eine selbst erstellte Vorlage in Laposta importieren](/welke-opties-biedt-laposta-bij-een-zelfgemaakt-sjabloon). ## Ein einzelnes Bild mit `` Fügen Sie dem `img`-Tag das Attribut `lp-edit` hinzu, um das Bild änderbar zu machen. Das `img`-Tag muss immer ein `width`-Attribut enthalten. Steht im `src`-Attribut eine URL zu einem Bild, wird dieses als Startbild angezeigt. Wenn Sie kein Bild zur Hand haben, lassen Sie das `src`-Attribut leer. Laposta zeigt dann ein Standardbild an. Beim Bearbeiten kann der Redakteur einen Link hinter das Bild setzen. Befindet sich in der Vorlage bereits ein Link um das `img`-Tag, verwendet Laposta diesen als Standardwert. ### Optionen Diese Attribute legen fest, was der Redakteur im Editor mit dem Bild machen kann. **`lp-edit`** Macht ein Bild änderbar. --- **`lp-label`** Zeigt den eingegebenen Wert im Editor oberhalb der Stelle an, an der das Bild geändert werden kann. --- **`lp-resizable`** Gibt an, dass die Größe des Bildes angepasst werden darf. --- **`lp-max-width`** Gibt an, bis zu welcher Breite das Bild höchstens vergrößert werden darf. --- **`lp-min-width`** Gibt an, bis zu welcher Breite das Bild höchstens verkleinert werden darf. --- **`lp-no-import`** Standardmäßig importiert Laposta alle Bilder in einer Vorlage und gibt sie über Laposta wieder. Mit diesem Attribut legen Sie fest, dass ein Bild nicht importiert werden darf und von der ursprünglichen URL geladen werden muss. Wenn dieses Attribut aktiv ist, kann die Größe des Bildes nicht angepasst werden. --- **`lp-no-imageedit`** Standardmäßig lassen sich alle änderbaren Bilder beim Ausfüllen der Vorlage auch mit dem [Bildeditor](/afbeeldingen-bewerken) bearbeiten. Mit diesem Attribut deaktivieren Sie diese Funktion für dieses Bild. --- **`lp-disable-href`** Verhindert, dass der Redakteur einen Link hinter das Bild setzen kann. --- **`lp-decorative`** Ein dekoratives Bild dient ausschließlich dem Design und ist für den Inhalt des Newsletters nicht relevant, wie beispielsweise ein kleiner Pfeil vor einem Link. Aus Gründen der Barrierefreiheit ist es bei solchen Bildern nicht zulässig, einen Alt-Text einzugeben. Mit diesem Attribut geben Sie an, dass es sich um ein dekoratives Bild handelt. Die Benutzeroberfläche fragt dann keinen Alt-Text ab. --- ### Beispiele Das Minimum für ein änderbares Bild ohne Startbild: ```html ``` Ein Bild mit einem umschließenden Standardlink, das auf eine Breite zwischen 100 und 300 Pixeln skaliert werden darf: ```html ``` ## Ein Bild innerhalb von `` Ein Bild kann sich auch innerhalb eines [Textfelds](/tags-om-tekst-te-wijzigen) befinden. Der Text umfließt dann das Bild. Beim Bearbeiten kann der Redakteur das Bild mithilfe der Pfeile links und rechts neben dem Multiline-Feld links, rechts oder über die volle Breite des Textfelds platzieren. Die Größe lässt sich standardmäßig anpassen, und das Attribut `lp-edit` ist hier nicht erforderlich. ### Optionen Neben der Platzierung und dem Weißraum stellen Sie mit diesen Attributen vor allem ein, was der Redakteur nicht anpassen darf. Für `lp-label` und `lp-decorative` gelten dieselben Regeln wie bei einem einzelnen Bild. **`lp-disable-resizable`** Verhindert, dass die Größe des Bildes angepasst werden kann. --- **`lp-disable-moving`** Verhindert, dass der Redakteur das Bild nach links, nach rechts oder über die volle Breite verschieben kann. --- **`align`** Bestimmt die Position des Bildes: `left` für links im Text und `right` für rechts. --- **`hspace, vspace`** Gibt an, wie viel Weißraum um das Bild herum eingefügt wird, damit der Text das Bild nicht berührt: `hspace` für den horizontalen Abstand und `vspace` für den vertikalen. Dies sind Standard-Html-Attribute. Bei der Darstellung ersetzt Laposta sie durch eine Tabelle um das Bild herum. Nur so lässt sich der Weißraum in allen E-Mail-Clients korrekt darstellen. --- ### Beispiel Hier steht das Bild rechts im Text, umgeben von einem Weißraum von 10 Pixeln. Der Redakteur kann die Breite zwischen 100 und 300 Pixeln anpassen. ```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. ``` ### Das Multiline-Element mit Bild responsiv gestalten Da das Bild für den Weißraum in eine Tabelle gesetzt wird, sind einige zusätzliche CSS-Regeln erforderlich, um das Multiline-Element auf kleineren Bildschirmen korrekt anzuzeigen. Fügen Sie diese Regeln innerhalb einer Media-Query ein. Der Text wird dann unterhalb des Bildes angezeigt, wobei das Bild 100 % der Breite einnimmt. ```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; } ``` ## Verwandte Artikel #### [Text mit Vorlagen-Tags änderbar machen](/tags-om-tekst-te-wijzigen) Machen Sie einzelne Textzeilen und längere Textblöcke in einer eigenen HTML-Vorlage bearbeitbar. #### [Einen Video-Screenshot mit einem Vorlagen-Tag einfügen](/tags-om-video-screenshot-te-wijzigen) Fügen Sie in Ihrer eigenen HTML-Vorlage automatisch einen anklickbaren Screenshot mit… #### [Ein Bild bearbeiten und verkleinern](/afbeeldingen-bewerken) Passen Sie mit dem Bildeditor unter anderem Helligkeit, Kontrast, Format und Dateigröße… #### [Ein Bild in einer Joe-Vorlage einfügen und bearbeiten](/hoe-bewerk-ik-een-afbeelding-in-mijn-sjabloon-op-maat-type-joe) So können Sie feste und skalierbare Bilder in Ihrer Joe-Vorlage einfügen, zuschneiden…