Bilder und Grafiken mit OpenCms bearbeiten und einfügen
OpenCms bietet die Möglichkeit 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 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. Ausgangspunkt dieses Tutorials ist die im Editor geöffnete Website.1. Wechsel in den Bearbeitungsmodus und Aufruf des Bilder-Assistenten
Nachdem Sie in den Bearbeitungsmodus gewechselt sind, sollten Sie zunächst den Cursor an die gewünschte Stelle setzen. Klicken Sie anschließend auf das Symbol "Bild einfügen / editieren" um den Assisten zu starten.
Abbildung 1: Start des Assistenten durch einen Klick auf die entsprechende Schaltfläche
2. Auswahl der Bildergalerie
Der Assistent startet in einem PopUp-Fenster. Die Ausgangsposition ist das Register "Galerien". Um Zugriff auf unser Bildmaterial zu bekommen, klicken wir zunächst auf die Schaltfläche
Zeige Galerien
Der sich im PopUp-Fenster öffnende Assistent benötigt eine Auflösung welche höher ist als 1024x768 Pixel auf einem 19 Zoll-Monitor. Läuft Ihr Monitor
nichtmit diesen Einstellungen, wird das PopUp-Fenster nicht vollständig angezeigt. Verfügen Sie über ein 17" oder 19" TFT-Display, sollten Sie auf die Standardeinstellung 1280x1024 Pixel wechseln. Sollte dies nicht möglich sein, können Sie auf einer Windows-Tastatur mit der Funktionstaste F1 in den Vollbildmodus wechseln. Wenn Sie einen iMAC-Tastatur verwenden wechseln Sie in den Vollbildmodus mit Umschalt + F11. Tasttaturen, welche die Tast F 11 mit anderen Funktionen belegt haben, verwenden für den Vollbildmodus oftmals die Tastenkombination STRG + F 11. Bite informieren Sie Sich in der Hilfe.
nichtmit diesen Einstellungen, wird das PopUp-Fenster nicht vollständig angezeigt. Verfügen Sie über ein 17" oder 19" TFT-Display, sollten Sie auf die Standardeinstellung 1280x1024 Pixel wechseln. Sollte dies nicht möglich sein, können Sie auf einer Windows-Tastatur mit der Funktionstaste F1 in den Vollbildmodus wechseln. Wenn Sie einen iMAC-Tastatur verwenden wechseln Sie in den Vollbildmodus mit Umschalt + F11. Tasttaturen, welche die Tast F 11 mit anderen Funktionen belegt haben, verwenden für den Vollbildmodus oftmals die Tastenkombination STRG + F 11. Bite informieren Sie Sich in der Hilfe.
Abbildung 2: Der Assistent startet in einem PopUp-Fenster
3. Auswahl der Bildergalerie
Der Assistent listet nun alle verfügbaren Bildergalerien auf. Wählen Sie die gewünschte Bildergalerie durch einen Klick aus.
Abbildung 3: Auswahl der richtigen Bildergalerie durch Mausklick
4. Auswahl des gewünschten Bildes
OpenCms erzeugt nun eine Liste mit allen Vorschaubildern der gewählten Bildergalerie. Durch einen Klick auf das gewünschte Bild wird dieses ausgewählt, ein weiterer Klick auf das grüne Häkchen im unteren Bereich des Fensters bestätigt die Auswahl.
Abbildung 4: Auswahl des gewünschten Bildes
5. Bildeigenschaften anpassen
Der Assistent wechselt nun automatisch zurück auf das Register "Vorschau". Unter diesem Register finden Sie alle Einstellungen die zur Verfügung stehen, um ein Bild in einer besonderen Größe, einem bestimmten Ausschnitt oder mit einer Beschreibung in die Seite einzufügen.
Abbildung 5: Automatischer Wechsel auf das Register "Vorschau"
6. Bildformat auswählen
Im unteren Bereich des PopUp-Fensters befindet sich unter dem Oberpunkt "Format" eine Selectbox. Ein Klick auf diese zeigt die zur Verfügung stehenden Auswahlmöglichkeiten an. Wir wählen an dieser Stelle "Freier Bildausschnitt". Bedingt durch diese Auswahl wird daraufhin die Schaltfläche
Ausschnitt eingeblendet. Ein Klick auf diese Schaltfläche öffnet den interaktiven Dialog zum Freistellen des Bildes.
Abbildung 6: Auswahl des Bildformat. In unserem Falle "Feier Bildausschnitt"
7. Einen Bildausschnitt freistellen
Der Assistent wechselt nun auf die Ansicht "Bildausschnitt". In dieser Ansicht können Sie mit gedrückter linker Maustaste eine quadratische oder rechteckige Auswahl aufziehen, deren Begrenzung durch eine gestrichelte Linie dargestellt wird. Alle außerhalb dieser Linie befindlichen Bereiche werden abgeschnitten und sind später auf der Website nicht sichtbar. Zur Feinjustierung können Sie die Auswahl mit der gedrückten linken Maustaste verschieben oder vergrößern. Entspricht die Auswahl Ihren Anforderungen, können Sie dies mit
OK bestätigen.
Abbildung 7: Freistellen des Bildes durch aufziehen eines rechteckigen Auswahlfeldes
8. Überprüfen der Parameter
Der Assistent kehrt nun auf das Register "Vorschau" zurück. Das freigestellte Bild erscheint nun mit seinen neuen Abmessungen im oberen Vorschaubereich des PopUp-Fensters. Damit das Bild vom Text umflossen wird, sollten sie zusätzlich die Ausrichtung auf "Links" einstellen, sowie das Häkchen "Abstandsränder erzeugen" setzen. Überprüfen Sie Ihre Einstellungen und bestätigen Sie anschließend wieder mit
OK
Abbildung 8: Vervollständigen und Überprüfen der Parameter
9. Das freigestellte Bild in der Editoransicht
Der Assistent beendet seine Arbeit, schließt das PopUp-Fenster und kehrt zur Bearbeitungsansicht im Editor zurück. Dort erscheint nun das von Ihnen eingefügte und freigestellte Bild an der zu Anfang gewählten Position.
Abbildung 9: Rückkehr in den Bearbeitungsmodus
10. Speichern und Schließen
Ein Klick auf die Schaltfläche "Speichern und Schließen" beendet den Bearbeitungsmodus und kehrt zur Vorschauansicht zurück. In dieser Ansicht wird Ihnen die Grafik im vollständigen Kontext Ihrer Website angezeigt.
Abbildung 10: Rückkehr in den Vorschaumodus.
Sollten Sie mit dem Ergebnis nicht zufrieden sein, so können Sie die Grafik bzw. deren Parameter jederzeit abändern. Markieren Sie hierzu die Grafik mit einem Mausklick und rufen anschließend über die Symbolleiste oder die rechte Maustaste die Bildeigenschaften auf. Die zuvor definierten Eigenschaften des Bildes werden angezeigt und können nachträglich modifiziert werden (Folgen Sie den Arbeitsschritten ab Punkt 5).