Thema: WYSIWYG-Editor: Bilder

Um Bilder direkt in den Fließtext einzufügen, sind einige Dinge zu beachten. basic.life hat eine wichtige Funktion, die unter falscher Bildeinfügung leiden kann: basic.life ist vom Grund auf auf die Technologie „Responsive Webdesign“ aufgebaut. Informationen darüber finden Sie im eigenen Kapitel „Die Webseite: Responsive Webdesign“.

Was ist daher wichtig beim Einfügen von Bildern in den WYSIWYG-Editor:

  • Denken Sie immer daran, dass Bilder in den Textfluss eingebunden werden und auch dann, wenn ein schmälerer Bildschirm diese anzeigt, immer noch an der Stelle gut passen sollten. Bauen Sie Bilder daher am Beginn des Absatzes ein, auf den sie sich beziehen und setzen Sie die Bilder daher mit Ausrichtung „Links“ oder „Rechts“ in den Absatz ein.
  • Beachten Sie, dass für größere Bilder eine spezielle Programmierung nötig ist, damit diese – wenn sie auf einem schmäleren Bildschirm angezeigt werden sollen – auch noch immer vollständig darstellbar sind. Wenn Sie auf „Nummer sicher“ gehen wollen, bauen Sie Bilder im WYSIWYG-Editor immer mitWYSIWYG bildinfo ©echonet der maximalen Breite von 300 Pixel („Bildschirmpunkte“) ein, damit diese auch auf einem Smartphone dargestellt werden können.
Reiter: „Bild-Info“

Im Reiter „Bild-Info“ geben Sie die wichtigsten Details des Bildes bekannt, Sie haben hier folgende Felder zur Verfügung, die Sie befüllen bzw. auswählen können:

  • URL: Hier können Sie einen URL (Markierung „B“) des von Ihnen gewünschten Bildes eingeben. Wenn Sie ein Bild aus der eigenen Datenbank (siehe „Medien / Bilder“) benutzen möchten, was wir Ihnen raten, weil Sie nur dort die Kontrolle haben, ob das Bild auch an der Stelle bleibt, an der es derzeit ist, können Sie über „Server duchsuchen“(Markierung „A“) die Bilddatenbank durchsuchen und dort einfach ein Bild auswählen. Dann werden die Felder URL und Alternativer Text automatisch vorausgefüllt.
  • „Server duchsuchen“-Funktion: (Markierung „A“) Hier öffnet sich ein weiteres Fenster mit dem Sie Ihre Bilddatenbank am Server durchstöbern können um sich eines der Bilder aus Ihrer Datenbank auszusuchen. Dort stehen Ihnen übrigens dann auch die Kategorien aus der Bilddatenbank zur Verfügung um das Bild schneller zu finden.
  • Alternativer Text: (Markierung „C“) Der alternative Text sollte aus Gründen der Barrierefreiheit gut befüllt sein, den Inhalt des Bildes wiedergeben und auch die Copyright-Information enthalten. Dies hilft Ihnen auch bei der Suchmaschinen-Optimierung. Wird über „Server durchsuchen“(Markierung „A“) das Bild ausgewählt, so trägt das System hier automatisch Bildtitel und Copyright ein (Sie können das hier aber ändern).
  • Breite & Höhe: Tippen Sie eine Zahl (Markierung „D“)  in Bildschirmpunkten („Pixel“) ein, wie breit das Bild sein soll. Solange das Schloss-Symbol neben diesen beiden Feldern „geschlossen“ ist, wird automatisch die entsprechende Höhe oder Breite relativ berechnet und das Bild nicht verzerrt. Wenn Sie das Schloss-Symbol anklicken (und damit öffnen), können Sie das Bild beliebig in Breite und Höhe zerren.
  • Rahmen: Sie können dem Bild einen Rahmen geben, in den meisten Fällen wird man dieses Feld leer lassen, da Bildrahmen oft keine sehr schönen Ergebnisse erzeugen. Tippen Sie eine Zahl ein, so wird rund um das Bild ein farbiger Rahmen gelegt, der so viele Bildschirmpunkte („Pixel“) breit ist, wie die von Ihnen eingetippte Zahl vorgibt.
  • Horizontal-Abstand: Hier können Sie ebenfalls per Eingabe einer Zahl festlegen, dass das Bild nach links und rechts einen Mindestabstand von X Bildschirmpunkten hat.
  • Vertikal-Abstand: Mit diesem Wert können Sie einen Abstand des Bildes nach oben und unten festlegen.
  • Ausrichtung: Die Ausrichtung (Markierung „E“) ist besonders, wenn Sie ein Bild in einem Absatz hinzufügen, was wir empfehlen, relevant. Sie besagt, ob das Bild linksbündig oder rechtsbündig im Absatz ist und daher entsprechend vom Text umflossen wird. Beim Beispielbild sehen Sie hier mit dem vom System vorgegebenen „Layouttext“, dass das bild rechtsbündig erscheint und daher der Text links um das Bild herum fließt.
  • Vorschau: Sie sehen das Bild hier in der Größe, die Sie eingegeben haben (bei Breite & Höhe) und erfahren auch, wie sich die Ausrichtung des Bildes auswirkt.

Mit dem „OK“-Button (in Grün) können Sie das Bild in den WYSIWYG-Editor übernehmen. Drücken Sie diesen (Markierung „J“) einfach, um die Eingaben zu speichern und wirksam werden zu lassen. Natürlich müssen Sie nachher noch die Seite selbst speichern, damit das Bild auch wirklich online erscheint. Sie brauchen den OK-Button nicht drücken, wenn Sie noch einen der anderen Reiter in diesem Fenster ansteuern wollen.

Reiter: „Link“

WYSIWYG bildverlinkung ©echonetSie haben im WYSIWYG-Editor auch die Möglichkeit ein Bild mit einem Link zu versehen. Dies führt dazu, dass der Benutzer, wenn er das Bild anklickt eine andere Seite öffnet oder beispielsweise ein Dokument downloaden kann. Nutzen Sie, wenn Sie diesen Effekt erreichen möchten, folgende Felder für die Eingabe:

  • URL: (Markierung „F“) Hier tragen Sie die Adresse ein, auf die der Nutzer kommen soll, wenn er auf das Bild klickt. Die Adresse muss, wenn es um eine andere Webseite geht, mit „http://“ bzw. mit „https://“ beginnen.
  • „Server duchsuchen“-Funktion: Mit dieser Funktion (Markierung „G“) können Sie auf die Dateien-Datenbank (siehe „Medien / Dateien“) zugreifen und das Bild statt mit einer Webseite beispielsweise mit einem Dokument verlinken. Manche Kunden nutzen dies auch um anhand von Bildern die Möglichkeit vorzusehen, dass man sich ein hochauflösendes (z.B. „Pressebereich“) Bild herunterladen kann, das vorher im Bereich „Dateien“ abgelegt wurde. Diese Funktion befüllt dann das Feld „URL“ (Markierung „F“) automatisch.
  • Zielseite: Üblicherweise sollten Sie es hier bei „<nichts>“ (Markierung „H“) belassen, denn Links sollten nicht neue Fenster öffnen und einen Frameset (dieser wäre dann für „Oberes Fenster“, „Gleiches Fenster“ oder „Oberes Fenster _top“) haben Sie bei basic.life nicht, da diese alte Technologie für basic.life nicht mehr zum Einsatz kommt. Warum diese Auswahl überhaupt besteht: Wir empfehlen ein Neues Fenster zu öffnen, wenn Sie auf eine Download-Datei verlinken, denn oftmals haben Benutzer damit Probleme, wenn ihr Browser versucht ein Dokument (z.B. PDF) im gleichen Fenster zu öffnen, Ihre Seite weiter zu verwenden.

Mit dem „OK“-Button (in Grün) können Sie das Bild in den WYSIWYG-Editor übernehmen. Drücken Sie diesen (Markierung „J“) einfach, um die Eingaben zu speichern und wirksam werden zu lassen. Natürlich müssen Sie nachher noch die Seite selbst speichern, damit das Bild auch wirklich online erscheint. Sie brauchen den OK-Button nicht drücken, wenn Sie noch einen der anderen Reiter in diesem Fenster ansteuern wollen.

Reiter „Erweitert“

WYSIWYG bildeigenschaften ©echonetEs gibt noch zahlreiche andere Angaben, die bei einem Bild gemacht werden können. Wir empfehlen diese nur den ExpertInnen unter Ihnen. Befüllen können Sie aber, wenn Sie möchten, auch aus Gründen der Suchmaschinen-Optimierung die Beschreibung des Bildes (Markierung „I“) mit einem entsprechenden Text. Der „Style“ dagegen wird vom System vorausgefüllt und basiert auf den Eingaben im Reiter „Bild-Info“.

Mit dem „OK“-Button (in Grün) können Sie das Bild in den WYSIWYG-Editor übernehmen. Drücken Sie diesen (Markierung „J“) einfach, um die Eingaben zu speichern und wirksam werden zu lassen. Natürlich müssen Sie nachher noch die Seite selbst speichern, damit das Bild auch wirklich online erscheint. Sie brauchen den OK-Button nicht drücken, wenn Sie noch einen der anderen Reiter in diesem Fenster ansteuern wollen.

zurück