Bilder

Allgemeine Hinweise

Beim Hochladen von Bildern sollte aus rechtlichen Gründen stets ein Bildnachweis angegeben werden. Er wird direkt mit dem Bild abgespeichert.

Bitte beachten Sie, dass Seiten mit mehreren Bildern kurz nach dem Erstellen fürs Anzeigen etwas mehr Zeit benötigen (u.U. mehrere Sekunden), weil die Bilder für ein responsives Design automatisch in mehrere Größen umgerechnet werden. Dies geschieht nur beim ersten Laden der Seite (und falls sich Bildgrößen ändern).

Achten Sie bitte stets auf eine genügend hohe Auflösung der Bilder (ca. 1000 Pixel Breite). Sind die Bilder zu klein, werden sie in der Regel nicht hochskaliert und erscheinen dadurch kleiner als im Layout vorgesehen.

Bei jedem Bild muss eine 'Sammlung' angegeben werden. Für viele Seiten ist bereits eine Sammlung vordefiniert. Diese Sammlungen dienen der Sortierung bzw. Gruppierung von Bildern. Jede und jeder Editor bzw. Editorin darf Bilder jeder Sammlung auswählen. Jedoch darf man Bilder nur in Sammlungen hochladen oder deren Bilder editieren, wenn man die Berechtigung für die entsprechende Sammlung besitzt.

Bilder einfügen

Es gibt zwei Möglichkeiten, Bilder auf einer Seite einzubinden:

  1. Bild-Block einfügen
  2. Bild direkt im RichtText-Editor einfügen

1. Bild mit Hilfe eines Bild-Blocks einfügen

Diese Variante bietet die meisten Möglichkeiten, ist flexibel und erlaubt es, Bild und Bildunterschrift hinterher noch anzupassen und ist daher zu bevorzugen.

  • Gehen Sie ins Wagtail Admin-Interface zum Bearbeiten einer Seite.
  • Scrollen Sie zu dem Bereich, in dem Text- und Bildblöcke sowie weitere Inhalte hinzugefügt werden können. Der Aufbau der Seite im Admin-Interface hängt vom Seitentyp ab. Die meisten Seiten haben jedoch mindestens einen solchen 'Streamfield'-Bereich.
  • Klicken Sie auf 'Bild', um einen Bild-Block hinzuzufügen.
  • Klicken Sie auf 'Bild auswählen' und wählen Sie ein bereits vorhandenes Bild aus oder laden Sie ein neues Bild hoch. Wenn Sie ein neues Bild hochladen, geben Sie einen Bildnachweis und am besten auch gleich eine Bildunterschrift an.
  • Größe:
    • Für Bilder sind feste Bildgrößen und Seitenverhältnisse vorgesehen, um ein möglichst einheitliches Aussehen der Seiten zu gewährleisten. Die Bildbreiten sind so gewählt, dass sie einem Bruchteil der Seitenbreite entsprechen, so dass mehrere Bilder nebeneinander angeordnet werden können. Die folgenden Angaben beziehen sich auf die für den Inhalt zur Verfügung stehende Breite in einem großen Browserfenster (ab 1200 Pixel Breite), in kleineren Ansichten schrumpfen die Bilder zusammen, aber können auch mehr Raum einnehmen, damit sie noch erkennbar bleiben.
      • Extra klein: 1/4 der (Seiten-)Breite
      • Klein: 1/3
      • Mittel: 1/2
      • Groß: 2/3
      • ganze Breite: 100%
    • Die Bilder werden von Wagtail auf die entsprechend notwendigen Größen herunterskaliert und entsprechend dem Seitenverhältnis beschnitten, was beim ersten Laden der Seite ein Weilchen dauern kann.
  • Position:
    • Wählen Sie links, rechts oder zentriert. Bilder, die links oder rechts angeordnet sind, sind Float-Elemente, d.h. wenn genügend Platz ist, können nachfolgende Blöcke um sie herum fließen. Das Fließen kann mit einem 'Umbruch'-Block unterbrochen werden.
  • Seitenverhältnis:
    • Die Bilder werden von Wagtail auf die gewünschte Größe und das gewünschte Seitenverhältnis zurechtgeschnitten. Das bevorzugtes Bildverhältnis ist 1:1. Da dies jedoch nicht für alle Bilder funktioniert, können Sie hier stattdessen auch Hochformat oder Querformat auswählen. Wenn Sie die Option 'Original' nutzen, wird das Seitenverhältnis nicht verändert, das Bild wird also nicht beschnitten. Das ist z.B. für Diagramme praktisch.
  • Bildunterschrift:
    • Die Bildunterschrift kann in Deutsch und Englisch gleich mit dem Bild gespeichert und auf der Seite angezeigt werden. Diese Standard-Bildunterschrift kann jedoch in den entsprechenden Feldern im Bildblock überschrieben werden.
    • Bildunterschriften werden nur angezeigt, wenn der Haken bei 'Bildunterschrift anzeigen' gesetzt ist.

2. Bild im RichText-Editor einfügen

Alternativ können Bilder auch statt mit einem Bild-Block direkt im Text-Block eingefügt werden. Allerdings lässt sich dann ihre Größe und Position nur eingeschränkt anpassen und das Bild hinterher nicht mehr ändern. Es ist außerdem nicht möglich, Bildunterschriften sowie Bildnachweise direkt beim Bild zu definieren und dort zu platzieren. Daher wird das Einbinden von Bildern mittels Bild-Block empfohlen.

Bilder anordnen (Bild-Block)

Sie können mehrere Bilder in einer Reihe platzieren, indem Sie die entsprechende Bildgröße auswählen und alle Bilder nebeneinander positionieren (Position: links). Die Bilderreihe funktioniert jedoch nur für große Browserfenster, bei kleineren Browserfenstern oder in der Mobilansicht werden die Bilder - je nach ausgewählter Größe - teils untereinander angeordnet. Platzieren Sie vor und nach der Bilderreihe einen 'Umbruch'-Block, damit vorherige und nachfolgende Elemente auch dann, falls noch Platz links oder rechts frei sein sollte (z.B. in Mobilansicht), nicht in die Bilderreihe hineinfließen.

2 Bilder: Bildgröße: mittel

  • Möglichkeit 1: beide Bilder mit Position: links
  • Möglichkeit 2: 1. Bild: Position: links, 2. Bild: Position: rechts.

3 Bilder: Bildgröße: klein

  • Möglichkeit 1: alle Bilder mit Position: links
  • Möglichkeit 2: 1. Bild: Position: links, 2. Bild: Position: rechts, 3. Bild: Position: zentriert;
    Das 3. Bild schiebt sich dann bei Desktop-Ansicht zwischen die ersten beiden Bildern und erscheint auf mobilen Endgeräten unterhalb der ersten beiden Bilder. Die Seitenbreite wird hierbei maximal ausgenutzt.

4 Bilder: Bildgröße: extra klein

  • alle Bilder mit Position: links

Bildnachweis hinzufügen oder bearbeiten

Der Bildnachweis wird direkt mit dem Bild gespeichert, wenn es hochgeladen wird, d.h. beim Hochladen eines Bildes sollte immer das Feld 'Bildnachweis' mit ausgefüllt werden. Falls die Bildrechte beim AIP bzw. Mitarbeiterinnen und Mitarbeitern liegen, genügt auch die Angabe "AIP" oder beispielsweise "AIP/R. Arlt".

Falls es der Bildnachweis eine englische Übersetzung benötigt, geben Sie diese im Feld 'Bildnachweis (EN)' an. Wenn Sie dieses Feld freilassen, erscheint auf der deutschen und englischen Seite derselbe bei 'Bildnachweis' eingetragene Text.

Um einen Bildnachweis nachträglich zu bearbeiten, müssen Sie das Bildobjekt bearbeiten:

  • Klicken Sie bei einem Bild-Block im Bearbeitungsmodus einer Seite auf 'Bild bearbeiten' oder suchen Sie das Bild im 'Bilder'-Menü des Wagtail Admin-Interfaces heraus.
  • Passen Sie den Text bei 'Bildnachweis' und/oder 'Bildnachweis (EN)' an.
  • Bestätigen Sie Ihre Änderungen mit dem 'Speichern'-Button am unteren Ende des Dialogfensters.

Bitte beachten Sie, dass Bildnachweise nur angezeigt werden, wenn der Haken bei 'Bildnachweis anzeigen' im Bild-Block der Seite gesetzt ist. Für Bilder, die direkt im RichText-Editor eingebunden sind, wird kein Bildnachweis angezeigt.

Bildunterschrift hinzufügen oder bearbeiten

Hierfür gibt es zwei Möglichkeiten:

  • Bildunterschrift direkt mit dem Bild speichern; diese Bildunterschrift kann dann überall auf der Webseite automatisch bei diesem Bild angezeigt werden.
    Dies funktioniert genauso wie beim Bildnachweis im oberen Abschnitt.
  • Bildunterschrift auf der Seite definieren, auf der das Bild eingebunden ist, im Bild-Block.
    Die Bildunterschrift auf der Seite im Bild-Block hat Vorrang, d.h. hiermit kann die Bildunterschrift des Bildes selbst überschrieben werden.

Die Bildunterschrift wird stets als deutscher und englischer Text angegeben, wie bei anderen Textelementen auch.

Bitte beachten Sie, dass Bildunterschriften nur dann angezeigt werden, wenn der Haken bei 'Bildunterschrift anzeigen' im Bild-Block der Seite gesetzt ist. Für Bilder, die direkt im RichText-Editor eingebunden sind, wird keine Bildunterschrift angezeigt.

Letzte Aktualisierung: 16. November 2020