Bilder einfügen und formatieren

Hallo, mein Name ist Gerhard Moser. In diesem Video fügen wir unserer Seite Bilder hinzu.

Im UniCMS gibt es mehrere Gestaltungselemente, mit denen Sie Bilder einfügen können. Über das Gestaltungselement Bild ebenso wie z. B. über ein Textfeld, eine Kachel oder eine Bildergalerie. Unabhängig davon, welches Element Sie verwenden, der Dialog, mit dem Sie ein Bild einfügen und formatieren, ist immer derselbe.

Im folgenden Beispiel arbeiten wir dem Element Text. Andere Gestaltungselemente, die ebenfalls mit Bildern arbeiten, sehen wir uns in kommenden Videos an.

Bearbeiten Sie das Element Text über das Bleistiftsymbol, klicken Sie an die Stelle, an der Sie das Bild einfügen möchten und wählen Sie aus dem Dropdown CMS Plugins den Befehl Bild aus.

Zuerst wählen Sie das gewünschte Bild über den Button „Datei auswählen“ aus. Damit kommen Sie in die Medienbibliothek. Haben Sie das Bild bereits hochgeladen, wählen Sie es aus und treffen Sie die gewünschten Formatierungseinstellungen.

Wir gehen in diesem Beispiel jedoch davon aus, dass das Bild noch nicht hochgeladen wurde. Sie könnten das gewünschte Bild einfach in den grauen Bereich ziehen. Möchten Sie aber bestimmen, in welchem Ordner das Bild abgelegt wird, verwenden Sie den Button „Datei auswählen“. Letzteres würde ich Ihnen empfehlen, denn nur so bleibt ihre Dateistruktur übersichtlich.

Surfen Sie in der Medienbibliothek zum gewünschten Ordner und laden Sie Ihr Bild (es können auch mehrere sein) hoch. Dafür gibt es zwei Möglichkeiten: klicken Sie entweder auf den Button „Dateien hochladen“ oder schieben Sie Ihr Bild, Ihre Bilder von ihrem Desktop direkt in die Medienbibliothek. Ich entscheide mich für diese Variante.

Nun wählen Sie das gewünschte Bild aus und kehren damit automatisch zum Bild-Dialogfenster zurück.

Verwenden Sie ein Bild zum ersten Mal, müssen Sie bestimmte Informationen angeben. Zum einen den Bildtitel. Der Bildtitel ist die Bezeichnung des Bilds in der Medienbibliothek. Ein aussagekräftiger Bildtitel hilft Ihnen, das Bild in der Medienbibliothek schnell zu finden. Der Bildtitel ist für Besucher und Besucherinnen Ihrer Website nicht sichtbar. Sie müssen den Bildtitel nur beim ersten Mal angeben, er wird mit dem Bild gespeichert.

Geben Sie Ihrem Bild eine alternative Beschreibung. Die alternative Beschreibung ist wichtig, um Ihre Seite barrierefrei zu gestalten. Geben Sie eine Beschreibung an, die das Bild gleichwertig ersetzt, d. h. Besucher und Besucherinnen, die das Bild nicht wahrnehmen können, dieselbe Information vermittelt. Beschreiben Sie kurz und bündig, was auf dem Bild zu sehen ist und für ihre Besucher und Besucherinnen relevant ist. Eine solche Beschreibung wird bei z. B. einem Diagramm naturgemäß langer ausfallen müssen als bei einem Symbolbild. Sollte es sich bei Ihrem Bild um ein reines Schmuckbild ohne Informationsgehalt handeln, haben Sie die Möglichkeit ein Häkchen bei „Leeres Alt-Feld“ zu setzen. Der Text wird dann von Screenreadern ignoriert und sehbehinderten Benutzern und Benutzerinnen nicht vorgelesen. Bei solchen Bildern sollten Sie sich aber überlegen, wie nützlich sie überhaupt sind.

Verwenden Sie das Feld Quellenangabe, um eine notwendige rechtliche Quellenangabe zu ergänzen. Fehlende Quellenangaben können zu kostspieligen Nachforderungen führen. Daher müssen Sie gegebenenfalls mit der Checkbox „leere Quellenangabe“ bestätigen, dass keine Quelle angegeben werden muss. Verwenden Sie bitte keinesfalls ein Bild, ohne das ausdrückliche Recht, es verwenden zu dürfen. Achten Sie auch immer auf die Lizenzbestimmungen, die regeln, ob und wie eine Quelle angegeben werden muss. Geben Sie die Quelle nicht korrekt an, kann dies ebenfalls zu Nachforderungen führen, auch bei Bildern, für die Sie bezahlt haben.

Die Texte für Bildtitel und Quellenangabe werden bei der erstmaligen Verwendung des Bilds in der Medienbibliothek gespeichert. Sie können anschließend nur direkt in der Medienbibliothek geändert werden; diese Änderung wird dann für alle Seiten übernommen, auf denen das Bild verwendet wird. Das sehen wir uns gleich im Anschluss an.

Auch die alternative Beschreibung wird bei der erstmaligen Verwendung des Bilds in der Medienbibliothek gespeichert. Dieser Text wird Ihnen, wenn Sie das Bild das nächste Mal verwenden, vorgeschlagen. Dieser Vorschlag kann aber für jede Verwendung überschrieben werden. Der Hintergrund ist, dass je nach Verwendung ein anderer alternativer Text sinnvoll sein kann, z. B. bei mehrsprachigen Seiten.

Unter diesen allgemeinen Bildeinstellungen finden Sie noch diverse Formatierungsmöglichkeiten. Diese sind abhängig vom Gestaltungselement, das Sie verwenden. Klicken Sie auf OK und das Bild wird auf Ihrer Seite eingefügt.

Ich möchte noch ein paar Worte über Dateigrößen und -formate verlieren. Wenn Sie ein Bild in das UniCMS hochladen, werden automatisch verschiedene Bildgrößen berechnet. Je nach Verwendungszweck, z. B. Handy, Desktop-PC usw. wird das passende Bild verwendet. Damit wird die Darstellungs- und Ladezeit der Webseite optimiert und Sie sparen sich das Komprimieren des Bilds vor dem Hochladen.

Welche Dateiformate können Sie verwenden? Da wäre einmal JPG, das gut geeignet ist für Fotos und detailreiche Grafiken mit vielen Farben. Für Logos, Zeichnungen und Grafiken mit großen einfärbigen Flächen verwenden Sie am besten das Format GIF. Oder alternativ die modernere Variante PNG, die praktisch für alle Anwendungen gut geeignet ist, besonders aber für Kombinationen aus Bild und Text. Die Dateigröße ist allerdings in der Regel etwas größer als bei anderen Formaten.

Schließlich steht Ihnen auch noch das Format SVG zur Verfügung. Dabei handelt es sich im Gegensatz zu den anderen Formaten um ein Vektorgrafikformat. Es ist daher bestens geeignet für Logos, Zeichnungen und Grafiken. Für diese Anwendungen ist ein SVG den anderen Formaten bzgl. Qualität und Dateigröße sogar vorzuziehen.

Wie angekündigt, werfen wir zum Abschluss noch einen kurzen Blick in die Medienbibliothek. Sie haben zwei Möglichkeiten, ein Bild in der Medienbibliothek zu bearbeiten. Entweder Sie wechseln über die Administration in den Ordner, in dem das Bild gespeichert ist und bearbeiten es über das Bleistift-Symbol. Oder – und das ist in der Regel der einfachere Weg – Sie wechseln direkt auf der Seite, auf der Sie das Bild verwenden, in die Medienbibliothek.

Bearbeiten Sie das Bild, in unserem Fall z. B. per Doppelklick. Neben dem eingefügten Bild finden Sie ein Bleistiftsymbol. Klicken Sie darauf, wechseln Sie in die Medienbibliothek. Sie könnten nun z. B. das Bild gegen ein anderes tauschen. Wir möchten es aber bearbeiten und klicken daher auch hier auf das Bleistiftsymbol. Nun können Sie den Namen, die alternative Beschreibung und die Quellenangabe des Bilds anpassen.

Ändern Sie die Quellenangabe, wird diese Änderung für alle Verwendungen des Bilds, alte wie neue, übernommen. Die alternative Beschreibung hingegen kann, wie schon gesagt, für jede Verwendung des Bilds individuell angegeben werden. Die Angabe hier ist also nur ein Vorschlag, den Sie sehen, wenn das Bild neu eingefügt wird.

Wie eingangs erwähnt, verwenden auch andere Gestaltungselemente Bilder, allen voran z. B. das Element Kachel. Dort gibt es auch noch einige besondere Einstellungsmöglichkeiten, die wir uns aber in einem anderen Video ansehen werden.

Herzlichen Dank für Ihre Aufmerksamkeit. Bis zum nächsten Mal.