Bilder einfügen und editieren

Bilder sagen oft mehr als tausend Worte! Diese Weisheit gilt auch in Zusammenhang mit den Internetseiten, die mit Hilfe von OpenCms erstellt und bearbeitet werden. Durch das Einfügen von Fotos und Grafiken wird der ansonsten stupide Textfluss aufgebrochen, aufgelockert und der Leser bekommt keine Textwüsten auf dem Monitor angezeigt.
 

OpenCms verfügt hierfür über einen intuitiv bedienbaren Assistenten, der Ihnen das individuelle Einbinden von Bildern und Grafiken in Ihre Dokumente ermöglicht, einschließlich einer einfachen Bildbearbeitung, mit deren Hilfe Sie Ihre Bilder in der Größe anpassen und Freistellen können.

Abb: Der Assistent "Bild einfügen / editieren"

Arbeiten mit der Bildergalerie

Der für das Einfügen von Fotos und Grafiken zuständige Assistent lässt sich wie gewohnt über Schaltfläche in der Symbolleiste öffnen.

Ein Klick auf die Schaltfläche „Bild einfügen / editieren“ öffnet ein PopUp-Fenster, in dem alle benötigten Einstellungen - aufgeteilt auf Register - aufzufinden und einzustellen sind. Standardmäßig ist das Register „Vorschau“ aktiviert.
 

Aufbau und Funktion

Der Assistent „Bild einfügen / editieren“ präsentiert seinen vollen Funktionsumfang in einem PopUp-Fenster, dass mittels Registerkarten in einzelne Themenbereiche unterteilt ist. Je nach dem welche Einstellungen Sie vornehmen wollen, müssen Sie diese durch einen Wechsel der Registerkarte zunächst aufrufen.

Register „Vorschau“

Dies ist das wichtigste und am häufigsten verwendete Register in diesem Dialog, beherbergt es doch nahezu alle wichtigen Einstellungsmöglichkeiten.

Die Bildparameter setzen sich aus folgenden Einstellungsmöglichkeiten zusammen:

Beschreibung / Alt-Text

Die Bildbeschreibung, im Fachjargon auch „Alt-Text⁴ genannt zählt zu den Pflichtangaben beim Einbinden von Fotos und Grafiken. Insbesondere für die barrierefreie Gestaltung Ihrer Seiten ist dies eine Voraussetzung und gehört zum guten Ton.

Standardmäßig wird in diesem Feld der Wert eingetragen, der der Grafik beim Hochladen als Eigenschaft mitgegeben wurde. Dieser Wert ist oft wenig aussagekräftig (bsp.: DCF2089.jpg für ein mit einer Digitalkamera aufgenommenes Bild) und sollte entsprechend abgeändert werden.

Durch das zusätzliche aktivieren der Option „Bildunterschrift einfügen“ kann der zuvor eingegebene Text auch als Bildbeschreibung verwendet werden.
 

Copyright-Informationen

Liegen auf dem verwendeten Bild etwaige Copyrights kann es nötig sein den Inhaber dieser Bildrechte namentlich zu nennen. Füllen Sie hierzu das entsprechende Eingabefeld aus und aktivieren es anschließend durch das Setzen des Häkchens „Copyright Informationen einfügen“.
 

Abstandränder erzeugen

Durch setzen dieses Häkchens aktivieren sie die darunter gelegenen Eingabefelder „H-Abstand“ und „V-Abstand“, wodurch der Abstand zwischen Bild und Text definiert wird.
 

H-Abstand / V-Abstand

Mittels dieser beiden Eingabefelder können Sie den horizontalen und vertikalen Abstand zwischen dem Bild und dem Text definieren. Die hier eingegebenen Werte beziehen sich auf die Maßeinheit „Pixel“. Standardmäßig sind hier jeweils die Werte „5“ eingetragen.
 

Ausrichtung

Mittels dieser Auswahl können Sie die Ausrichtung des Bildes innerhalb des Textes beeinflussen. Drei Auswahlmöglichkeiten stehen ihnen zur Verfügung: Keine, Links und Rechts. Standardmäßig ist der Wert „Keine“ eingetragen.
 

Link zum Bild im Originalformat setzen

Durch setzen dieses Häkchen wird das eingefügte und vielleicht verkleinerte Bild mit einem Link versehen, so dass nach einem Klick auf das Bild dieses in seiner Originalgröße angezeigt wird. Hierbei kommt die von vielen Websites bekannte „Lightbox“ zum Einsatz, bei der der Hintergrund abgedunkelt wird und das dargestellte Bild zentriert in voller Größe auf dem Monitor angezeigt wird.

Die Größenänderung und das Zuschneiden eines Bildausschnittes sind gruppiert im unteren Bereich des Fensters untergebracht und setzen sich aus den folgenden Einstellungsmöglichkeiten zusammen:

Format

In dieser Selectbox sind die vier unterschiedlichen Formen der Größenanpassung aufgelistet. Sie setzen sich aus den Werten „Originalformat“, „Benutzerdefiniertes Format“, „Freier Bildausschnitt“, „Kleines Bild“ und „Großes Bild“ zusammen. Standardmäßig ist der Wert „Benutzerdefiniertes Format“ ausgewählt. Jede dieser Auswahlmöglichkeiten bietet Ihnen spezielle Eigenschaften an, die je nach Anforderung die am besten geeigneten Eigenschaften mit sich bringt.
 

Originalformat

Fügt das Bild in seinen Originalabmessungen in die Website ein, also in der Größe in der Sie es zuvor nach OpenCms hochgeladen haben. Die maximale Größe beträgt hierbei 800 x 600 Pixel.
 

Benutzerdefiniertes Format

Diese standardmäßig ausgewählte Eigenschaft gibt Ihnen die Möglichkeit mittels der darunter platzierten Eingabefelder „Breite“ und „Höhe“ die Größe des Bildes vor dem Einfügen in die Website zu verkleinern. OpenCms berechnet daraufhin die neue Bildgröße. Die Grafik wird hierbei proportional in der Größe geändert, dass Seitenverhältnis bleibt also gewahrt und die Grafik wird nicht verzerrt.
 

Freier Bildausschnitt

Durch diese Funktion können Sie einen beliebigen Ausschnitt des Originalbildes in einem interaktiven Dialog freistellen und in Ihr Dokument einfügen. Ein Beispiel: Sie haben ein Gruppenbild in einer Ihrer Bildergalerien gespeichert, wollen aber nur eine bestimmte Person in aus dieser Gruppe bildlich auf Ihrer Website darstellen. Mit Hilfe der Option „Freier Bildausschnitt“ können Sie alle nicht benötigten Bildbereiche zuvor entfernen und nur den gewünschten Bereich auf Ihrer Website darstellen.
 

Kleines Bild / Großes Bild

Durch Verwendung einer dieser beiden Auswahlmöglichkeiten werden die Bilder automatisch auf einen bestimmten Wert herunter gerechnet. Bei der Auswahl „Kleines Bild“ beträgt die Breite des Bildes immer 200 Pixel, bei der Auswahl „Großes Bild“ immer 500 Pixel.
 

Register „Galerien“

Dieses Register gibt Ihnen die Möglichkeit zwischen den einzelnen Bildergalerien Ihres Projektes hin- und herzuwechseln. Ein Klick auf „Zeige Galerien“ erzeugt eine Auflistung aller Bildergalerien auf die Sie Zugriff haben, ein weiterer Klick auf die entsprechende Galerie wechselt in diese hinein und die Vorschaubilder werden angezeigt.

Durch einen Mausklick auf das gewünschte Bild wird dieses ausgewählt. Im unteren Bereich des Fensters werden nun die Eigenschaften des Bildes angezeigt und im Weiteren fügt ein Klick auf das grüne Häkchen das Bild in Ihre Website ein.
 

Register „Kategorien“

Dieses Register wird derzeit noch nicht unterstützt und hat demnach keine Funktion. In einer späteren Version von OpenCms können die Bilder Kategorien zugeordnet und somit besser verwaltet werden.
 

Erweitert

Unter dem Register werden alle weiteren, weniger häufig benötigten Eigenschaften gruppiert. Neben Stylesheet-Klassen kann hier unter anderem ein Link auf das Bild gesetzt werden, sowie andere Attribute vergeben werden.