Wie heißt es so schön „Bilder sagen mehr als tausend Worte.“ Deshalb sind Bilder ein fester Bestandteil jedes Internetauftritts.

Nach dem Aufruf des Blocks „Bild“ hat man zunächst zwei Optionen: „Bild hinzufügen“. und „Datei hochladen“.

Nach dem Klick auf „Bild hinzufügen“ öffnet sich der Dateiordner und man kann ein bereits hochgeladenes Bild einfügen. 

Man kann zudem einen Dateiordner wählen, öffnen und in den Ordner ein Bild hochladen

Das Erstellen eines neuen Ordners bzw. Unterordners ist in diesem Arbeitsgang ebenfalls möglich.

Nach dem Klick auf „Datei hochladen“ kann man ein Bild auf dem heimischen Gerät auswählen und hochladen. Im Dateiordner wird es im Verzeichnis "Uploads" abgelegt und kann nach Einwahl in "Dateien" in einen anderen Ordner verschoben werden. Bequemer ist es, "Bild hinzufügen" zu nutzen, um es gleich in den gewünschten Ordner zu laden.

Das Hochladen mehrerer Bilder in einem Arbeitsgang ist möglich.

Der Dateiordner

Der Dateiordner enthält Ordner und Unterordner mit Bildern und Dateien, die für die Website hochgeladen wurden, sowie den Bilderpool mit Dateien, die für die Allgemeinheit zur Verfügung gestellt sind. Die eigenen Ordner sind nur für die User der eigenen Website zu sehen. 

Übersicht über den Dateiordner

Im rechten Feld sieht man dunkelgrau unterlegt (1), in welcher Website man arbeitet und die bereits angelegten Ordner.

Wenn man auf den Dropdown-Pfeil (2)  klickt, öffnet sich ein Feld und man kann einen neuen Unterordner anlegen.

Wenn man sich in einem Unterordner befindet (3), kann man einen weiteren Unterordner anlegen. Einen übergeordneten Ordner klickt man in der Übersichtszeile (3) einfach an, um in dessen Inhalt zu wechseln. Zurück in das Hauptmenü der Dateien kommt man mit einem Klick auf das Häuschen

Welche Informationen zum Bild angezeigt werden, kann man mit dem Menüpunkt „Ansicht“ (4) bestimmen. Sinnvoll ist es, zusätzlich zu den voreingestellten Informationen „Dimensionen“ anzuklicken, die darüber Auskunft geben, wieviel Pixel das Bild hat.

Welches Bild in der Dateiliste oben stehen soll, wählt man mit „Sortieren nach“ aus (5). Zu guter Letzt kann man noch das Aussehen der Dateiliste anpassen (6), es gibt die Optionen Liste oder Kacheln.

Praktisch ist die Suchfunktion ganz oben. Wenn man im Hauptordner ist, kann man die Unterordner in die Suche nach bestimmten Dateien einbeziehen. 

Die Dateisuche macht dann Sinn, wenn man den Bildern einen aussagekräftigen Namen gibt, etwa den Namen der abgebildeten Person oder eine Kurzbeschreibung der Szene. Bei Bildern mit img… oder .dsc… im Titel gestaltet sich die Suche nach einem Motiv schwierig.

Bildinformationen

Eine Seite mit einem Bild kann nur dann gespeichert werden, wenn die Bildinformationen ausgefüllt sind. Dazu doppelklickt man im Block „Bild“ zügig auf den Dateinamen oder das Bild. Jetzt öffnet sich ein Fenster, in dem man die notwendigen Einträge machen kann.

Arbeitsfläche zu Bildinformationen

Das Feld „Titel“ übernimmt den Dateinamen des Bildes. Er kann hier geändert werden.

Alternativtext

Kann das Bild nicht im Browser geladen werden oder wird das Format vom Webbrowser nicht unterstützt, wird stattdessen der ALT-Text angezeigt. Dies soll Websitebesuchern, deren Browser das Bild nicht darstellen können, den Inhalt des Bildes vermitteln. 

Der Text wird zudem sehbehinderten Menschen vorgelesen, wenn sie sich die Seite vorlesen lassen.

Es gilt gemäß der offiziellen HTML-Spezifikation als Mangel, bei Bildern auf diesen Alt-Text zu verzichten. Mittlerweile gilt dieser Alt-Text auch als ein Kriterium in der Onpage-Suchmaschinenoptimierung, denn die Suchmaschinen erfassen über diesen Text ebenfalls den Inhalt von Bildern.

Copyright

Hier wird eingetragen, wer die Rechte an dem hochgeladenen Bild hat.

Jedes Bild, jeder Text unterliegt dem urheberrechtlichen Schutz, egal ob einfacher Schnappschuss, Gruppenfoto oder Zeitungsartikel. Sind Personen abgebildet, so müssen die Persönlichkeitsrechte berücksichtigt werden. Grundsätzlich bedarf es bei der Veröffentlichung fremden Bild- bzw. Textmaterials immer der Zustimmung des Urhebers oder einer entsprechenden Lizenz.“ Rechtsgrundlage ist das Urheberrechtsgesetz (UrhG).

Beschriftung

Hier trägt man die Bildunterschrift ein, die später im Frontend unter dem Bild zu sehen ist. 

Rechtliche Freigabe. 

In dieses Kästchen muss ein Häkchen gesetzt werden, ansonsten funktioniert die Übernahme der Datei in die Vorlage nicht.

Ablaufdatum

Sollte die Nutzungserlaubnis zeitlich begrenzt sein, kann man hier ein Datum einfügen. Nach Ablauf der Nutzungsfrist wird das Bild automatisch von den Seiten entfernt.

Die Angaben müssen für jede Datei gemacht werden, die in Seiten eingebunden sind. Die Bildinformationen werden gespeichert und müssen bei einer erneuten Nutzung des Bildes nicht noch einmal eingegeben werden.

Im grauen Feld rechts erhält man weitere Informationen zum BIld wie die Dimensionen oder den Standort, wo es abgelegt ist.

Wenn die Daten eingegeben sind, klickt man auf „speichern“ und kann das Bild veröffentlichen. Ohne die Bildinformationen ist Speichern nicht möglich.

Bild bearbeiten

SPDplus bietet einige Möglichkeiten, bereits hochgeladene Bilder zu bearbeiten. Um in den Bearbeitungsmodus zu gelangen, gibt es drei Wege.

  1. Man wählt im Hauptmenü Dateien, sucht das zu verändernde Bild, markiert es duch einen Klick, klickt auf das Werkzeugrädchen im Seitenkopf und wählt "Datei bearbeiten".
     
  2. Schneller geht es, wenn man auf das Bild doppeltklickt. Es öffnet sich ein Popup mit den Bildinformationen. Wenn man jetzt mit dem Mauszeiger auf das Vorschaubild fährt, öffnet sich rechts oben der Menüpunkt "Bearbeiten".
     
  3. Wenn man an einer Seite arbeitet und mit dem Block "Bild" ein Bild auf die Seite lädt, kann man wie unter 2. auf das Bild doppeltklicken. Wenn man jetzt mit dem Mauszeiger auf das Vorschaubild fährt, öffnet sich rechts oben der Menüpunkt "Bearbeiten".

Bildbearbeitungs-Optionen

Nach dem Klick auf "Bearbeiten" stehen mehrere Bildbearbeitungswerkzeuge zur Verfügung.

Anzeige der Bearbeitungsmöglichkeiten
Drehen

Man kann ein Bild bis zu 45 Grad nach rechts oder links drehen. Dafür steht unterhalb des Bildes eine Skala mit Schieberegler zur Verfügung. Das Drehen erfolgt innerhalb der Bildgröße, sodass beim Drehen Inhalte des Bildes entfallen können. Einfach ausprobieren!

Zuschneiden

Die Option "Zuschneiden" bietet zahlreiche Möglichkeiten, ein Bild den Erfordernissen von SPDplus anzupassen. 

Wenn man auf Zuschneiden klickt, hat man zuerst einmal die Möglichkeit, das Bild durch Anfassen der Seitenlinien zu verkleinern. Wenn man zufrieden ist, speichert man die Variante entweder als neues Asset (Bild) oder überschreibt mit "speichern" das Original-Bild.

Wenn man aus der Option "Zuchneiden" in das Anfangsmenü wechseln möchte, klickt man auf "Drehen".

Im Zuschneide-Modus hat man eine Reihe von Möglichkeiten, die einem das Zuschneiden auf das richtige Format vereinfachen. Mit einem Klick kann man ein Quadrat zuschneiden oder das richtige Seitenverhältnis (16:9) für SPDplus wählen. Man trifft die entsprechende Auswahl, klickt auf das Bild und ein Ausschnitt wird erstellt. Anschließend kann man den Ausschnittrahmen verschieben und das Bild ins rechte Licht rücken. Jetzt muss man mit "Speichern" das vorhandene Bild überschreiben oder es "Als neues Asset speichern".

Nach links drehen ­ Nach rechts drehen
Mit diesen Optionen dreht man das Bild jeweils um 90 Grad entweder nach links oder nach rechts.
 
Vertikal spiegeln

Wenn ein Bild nach dem Hochladen auf dem Kopf steht, kann man es hier in die richtige Position bringen. Die Option stellt Bilder auf den Kopf (oder umgekehrt)

Horizontal spiegeln

Mit dieser Option wird ein seitenverkehrtes Bild erstellt.

Blickpunkt

Mit der Option "Blickpunkt" werden Bilder für den Meldungs- und Termin-Teaser optimal zugeschnitten. Dies gilt insbesondere für hochformatige Bilder.

Man schiebt dazu den Punkt, der nach dem Klick auf "Blickpunkt" im Bild erscheint, auf eine Position des Bildes, die oben sein soll und klickt dann auf "Speichern" bzw. "Als neues Asset speichern". Das Programm springt zurück zum Bild, das ihr jetzt speichern könnt. Leider sieht man im Thumbnail nicht die Änderung, aber wenn ihr auf "Vorschau" klickt, ist die Veränderung zu sehen, ebenso wie später im Frontend.

Tipp: Wenn man 1 x auf ein eingefügtes Bild klickt, öffnet sich automatisch "Blickpunkt".

Optionen (Bildposition und -größe, Link auf Bild)
Darstellung zur Bildpositionierung

Um die Position des Bildes und seine Größe in der Vorlage zu bestimmen, geht man rechts in der Menüleiste des  Blocks auf den Reiter "Optionen,"

Die Position zentriert ist voreingestellt. In dieser Position wird das Bild in Vollansicht über die gesamte Textbreite gezeigt.

Nach einem Klick auf den Dropdown-Pfeil sieht man weitere Optionen:

Linksbündig schmal: Das Bild steht links und entspricht 25 % der Textbreite.

Linksbündig: Das Bild steht links und entspricht 50 % der Textbreite.

Volle Breite: Das Bild wird nicht nur über die Textbreite, sondern die gesamte Seitenbreite dargestellt.

Rechtsbündig: Das Bild steht rechts und entspricht 25 % der Textbreite.

Rechtsbündig schmal: Das Bild steht rechts und entspricht 50 % der Textbreite.

Sollen Text und Bild nebeneinander stehen, muss der Bildblock vor dem Textblock stehen.

Ein weiteres Angebot unter dem Punkt "Optionen" ist 

"Link auf Bild".

Nach dem Klick auf den Dropdown-Pfeil neben "Link einfügen" öffnet sich eine Liste mit mehreren Optionen.

Lightbox. Mit diesem Link wird das Bild nach einem Klick vergrößert angezeigt.

Eintrag. Dieser Link öffnet die Liste aller Einträge und man kann einen auswählen, den man mit dem Bild verlinken möchte.

URL. Hier kann man eine URL eintragen, die auf eine externe Seite verlinkt.

E-Mail. Eine E-Mail-Adresse wird verlinkt.

Datei. Dieser Link öffnet die Liste aller Einträge und man kann eine Datei auswählen oder hochladen, die man mit dem Bild verlinken möchte.

Telefonnummer. Um Anwendern, die beispielsweise mit einem Smartphone die Website besuchen, die Kontaktaufnahme so einfach wie möglich zu gestalten, kann hier eine Telefonnummer nach internationalem Standard eingegeben werden. Wenn ein Besucher auf dem Handy den Link anklickt, öffnet sich die Telefon-App.

Mehr zum Thema Links mit ausführlicher Erklärung: Block „Links“  

Jetzt wählt man nur noch im Feld rechts, ob der Link in einem neuen Fenster geöffnet werden soll.

Mit einem Klick auf das Werkzeugrädchen rechts kann der Link gelöscht werden. 

Fragen, Probleme? Hier wird euch umfassend geholfen: cms-admin@spd.de