Bilder mit Vorlagen-Tags änderbar machen

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.

Ein einzelnes Bild mit <img>

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.

Beispiele

Das Minimum für ein änderbares Bild ohne Startbild:

<img lp-edit src="" width="200">

Ein Bild mit einem umschließenden Standardlink, das auf eine Breite zwischen 100 und 300 Pixeln skaliert werden darf:

<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>

Ein Bild innerhalb von <lp-multiline>

Ein Bild kann sich auch innerhalb eines Textfelds 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.

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.

<lp-multiline lp-label="Hauptabsatz"><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>

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.

/* 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