Bilder können innerhalb einer Seite auf unterschiedliche Weise eingebunden werden. Bei mit WPBakery aufgebauten Seiten wird dafür in der Regel das Element Single Image verwendet. Die Vorbereitung und Verwaltung von Bildern wird im Kapitel „Medienbibliothek“ beschrieben. Hier geht es darum, wie bereits vorbereitete Bilder auf einer Seite eingesetzt werden.
Bilder einfügen#
Um ein Bild einzufügen, wird innerhalb der gewünschten Column ein Single Image-Element angelegt. Anschließend kann entweder:
- ein bereits vorhandenes Bild aus der Medienbibliothek ausgewählt oder
- ein neues Bild hochgeladen werden.
Bereits vorhandene Bilder sollten nach Möglichkeit aus der Medienbibliothek ausgewählt und nicht erneut hochgeladen werden. Nach dem Einfügen sollte immer kontrolliert werden, wie das Bild im Zusammenhang mit den übrigen Inhalten der Seite dargestellt wird.
Bildgröße#
Bei einem neu angelegten Single-Image-Element steht die Bildgröße standardmäßig auf „thumbnail“.
Diese Einstellung muss im Regelfall auf Image size: full geändert werden. Andernfalls verwendet WordPress nur eine kleine Vorschaudatei des Bildes, die bei größerer Darstellung unscharf erscheinen kann.
„Full“ bedeutet allerdings nicht, dass beliebig große Originalbilder hochgeladen werden sollten. Das Bild sollte bereits vor dem Upload für die Verwendung im Web vorbereitet worden sein. Hinweise dazu finden sich im Kapitel „Medienbibliothek“.
Ausrichtung und Platzierung#
Die Position eines Bildes wird in WPBakery wesentlich durch die Row und Column bestimmt, in der sich das Single-Image-Element befindet.
Soll beispielsweise ein Text neben einem Bild stehen, wird dafür üblicherweise eine Row mit zwei Columns verwendet:
Column 1: Text
Column 2: Bild
Die Bildausrichtung sollte möglichst über die dafür vorgesehenen Einstellungen bzw. über die Seitenstruktur erfolgen und nicht durch Leerzeichen, leere Absätze oder andere Hilfskonstruktionen erzeugt werden.
Bei bestehenden Seiten empfiehlt es sich, vergleichbare Bild-/Text-Kombinationen als Vorlage zu verwenden.
Bildunterschriften und Bildnachweise#
Bilder können mit zusätzlichen Informationen wie einer Bildunterschrift oder einem Bildnachweis versehen werden. Die entsprechenden Angaben sollten dort hinterlegt werden, wo sie für den jeweiligen Bildtyp vorgesehen sind. Für Beitragsbilder (Featured Images) wird auf der IMAREAL-Website zusätzlich das Plugin FSM Custom Featured Image Caption verwendet. Dieses ermöglicht die Ausgabe entsprechender Captions bei Beitragsbildern.
Weitere Hinweise dazu finden sich im Kapitel „Medienbibliothek“.
Bilder verlinken#
Ein Bild kann auch als Link verwendet werden. Im Single-Image-Element kann dafür ein entsprechendes Linkziel angegeben werden. Ein Klick auf das Bild kann beispielsweise führen zu:
- einer anderen Seite der IMAREAL-Website,
- einer externen Website,
- einem Dokument,
- oder – falls gewünscht – zur größeren Version des Bildes.
Eine Bildverlinkung sollte nur verwendet werden, wenn für Besucher erkennbar oder inhaltlich nachvollziehbar ist, dass das Bild anklickbar ist. Bei externen Links sollte außerdem geprüft werden, ob die angegebene Adresse korrekt ist.
Bilder im Responsive Design#
Bei Bildern ist nicht nur die Darstellung am Desktop relevant. Insbesondere Bilder in mehrspaltigen Layouts können auf Tablets und Smartphones anders angeordnet werden. Bei einer Row mit Text und Bild nebeneinander werden die Columns auf kleinen Bildschirmen typischerweise untereinander dargestellt. Deshalb sollte nach dem Einfügen oder Verschieben von Bildern auch geprüft werden, ob Reihenfolge und Darstellung auf kleineren Bildschirmgrößen weiterhin sinnvoll sind. Die entsprechenden Möglichkeiten werden im Kapitel „Responsive Design“ näher behandelt.
Bestehende Gestaltung weiterverwenden#
Wie bei anderen WPBakery-Elementen gilt auch für Bilder: Wenn eine vorhandene Seite bereits die gewünschte Darstellung verwendet, sollte diese als Vorlage dienen. Häufig ist es einfacher und sicherer, ein bestehendes Single-Image-Element bzw. einen kompletten Bild-/Text-Bereich zu duplizieren und anschließend Bild und Inhalt auszutauschen, statt die Gestaltung neu aufzubauen.