Bilder, Cover und Galerie | Gutenberg Tutorial Teil 5

Bilder auf Webseiten

Keine Website ohne Bilder. Sowohl auf Homepages, sonstigen Seiten als auch bei Beiträgen erfüllen Abbildungen die unterschiedlichsten Aufgaben. Vor allem auf der Startseite dienen sie meistens als „Eye Catcher“. Einerseits sollen sie die Aufmerksamkeit und das Interesse des Besuchers wecken und Vertrauen aufbauen. Andererseits können sie dem Besucher eine visuelle Vorstellung vom Inhalt der Seite / des Beitrags vermitteln. Oder sie verdeutlichen einen im Text beschriebenen Sachverhalt wie dies z. B. bei Infografiken der Fall ist. Manchmal dienen sie aber auch der Werbung oder lockern einen längeren Text einfach nur auf.

Quelle der Bilder

Die Wahl eines Bildes hängt maßgeblich davon ab, zu welchem Zweck es eingesetzt werden soll. Wenn es nur als Blickfang oder zur Auflockerung dienen soll, greifen viele auf Stockfotos (Bilder von Foto-Portalen) zurück. Jedoch haben diese zwar Vorteile, aber auch gravierende Nachteile.

Deshalb ist es wesentlich besser, eigene Fotos oder Grafiken zu verwenden, die du entweder selbst gemacht hast oder die ein Profi speziell für dich erstellt hat. Aber vergiss auch hierbei nicht, später unterhalb der Abbildung den Urheber (Inhaber der Rechte) bzw. die Bildquelle anzugeben.

Bildvorbereitung

Nachdem dir nun die passenden Fotos oder Grafiken im .jpg, .png oder dem neueren, Datenmengen-reduzierenden .webp-Format vorliegen, könntest du mit dem Einbau auf deiner Webseite beginnen. Wenn da nicht die Suchmaschinen-Optimierung wäre. Denn Abbildungen, vor allem Fotos, bringen eine große Datenmenge mit, die die Ladezeit deiner Webseite in die Knie zwingt. Um das zu vermeiden, muss jede Abbildung vor dem Hochladen bearbeitet werden. Dazu gehört:

• Das Format (Höhe – Breite in px) an die Vorgaben deines Themes anpassen
• Alle Abbildungen komprimieren z. B. mit TinyPNG (für .png, webp und jp(e)g-Dateien geeignet)

Eine Alternative zu den altbekannten Formaten bildet WebP, dass inzwischen mit wenigen Ausnahmen (z. B. IE) von allen modernen Browsern unterstützt wird. Der Vorteil ist, dass die Datenmenge der Bilder um bis zu 50 % reduziert wird, weshalb es für Websites trotz der „Browser-Einschränkung“ zu empfehlen ist. Bei Grafiken benötigst du, sofern du „verlustfrei – kleinstes“ wählst, normalerweise keine zusätzliche Komprimierung mehr. Bei Originalen im .jpg-Format wählst du „beste Qualität“ aus. Dadurch wird die Datenmenge nicht ganz so stark verringert, so dass eine zusätzliche Komprimierung sinnvoll ist. Leider bieten noch nicht alle Bild-Bearbeitungsprogramme das neue WebP-Format an. Dann müsstest du deine Bilder wie zuvor erstellen, sie zunächst auf einer Website wie Tiny IMG umwandeln und danach komprimieren.

Anschließend kannst du die Bilder direkt in die WordPress Mediathek hochladen. Oder du lädst sie an der Stelle hoch, an der du sie einsetzen möchtest, also als Bild-Block im Gutenberg Editor. Im Folgenden steht der Begriff Abbildungen sowohl für Fotos als auch für Grafiken.

Möglichkeiten Bilder einzufügen

Der Gutenberg Editor bietet vier Optionen an. Zunächst erstellst du immer einen neuen Block. Im Auswahlmenü findest du in der Kategorie Medien: Bild, Galerie, Cover sowie Medien und Text.

Abweichend von der Reihenfolge im Menü des Editors beginne ich mit dem Cover, da dieses meistens den Kopf einer Seite oder eines Beitrags bildet.

Bilder als Cover

Wie die Bezeichnung Cover (Titel einer Seite) bereits andeutet, handelt es sich um große Bilder evtl. mit Text. Um ein Cover zu erstellen, wählst du den Cover-Block aus. Anschließend hast du folgende Optionen:

• Hochladen (vom PC),
• Auswählen aus der WP Mediathek oder
• mittels der angezeigten Farbfelder nur einen farbigen Hintergrund festlegen.

Nachdem du dich für eine davon entschieden hast, erscheint das Bild bzw. die Farbfläche als neuer Block. Im Zentrum befindet sich ein Textblock – Schreibe einen Titel …. Falls du ein Bild gewählt hast, ist ein dunkles Overlay voreingestellt. Jedoch kannst du die einzelnen Bestandteile des Covers individuell anpassen und z. B. auch einen Duotone-Filter nutzen. Zunächst zu den grundlegenden Einstellungen für das Hintergrundbild.

Anpassung des Cover-Bilds

Einerseits richtet sich die Höhe nach der Anzahl der Textzeilen und der Schriftgröße. Je länger der Text und je größer die Schrift ist, desto höher ist am Ende der Cover-Block. Wenn der Text z. B. aus einer Zeile in normaler Schriftgröße besteht, ist das spätere Cover nur ein recht schmaler Streifen. Um trotz wenig Text ein höheres Cover zu erhalten, kannst du einerseits ober- und/oder unterhalb des Textes noch einen Spacer (Abstandshalter) einfügen.

Andererseits hast du auch die Möglichkeit, in der rechten Seitenleiste auf das rechte Symbol zu klicken und im Eingabefeld am Ende des Menüs die Mindesthöhe in Pixel festzulegen. Darüber hinaus kannst du die Höhe auch durch Bewegen des blau-weißen Punkts am unteren Rand des Bildes verringern.

In den Optionen des Zahnrad-Menüs kannst du dich für einen fixierten Hintergrund (Parallax-Effekt) und/oder für eine Wiederholung des Hintergrunds entscheiden. Beim Parallax-Effekt schiebt sich während des Scrollens der Textbereich nach oben über das Bild. Darüber hinaus hast du zusätzlich die Möglichkeit den Fokus des Bildes zu verschieben.

Abschließend stellst du in der Bearbeitungsleiste ein, ob das Bild links-, rechtsbündig bzw. zentriert sein soll oder du wählst weite Breite bzw. gesamte Breite aus. Danach bearbeitest du den Textblock bzw. Überschrift-Block und fügst eventuell weitere Textblöcke oder Buttons etc. hinzu.

Einzelne Bilder einfügen

Um ein einfaches Bild vor den Textblöcken oder als Illustration zwischen anderen Blöcken einzufügen, erstellst du wieder einen neuen Block. Diesmal klickst du in der Auswahl jedoch auf Bild. Auch hierbei entscheidest du dich zwischen

• direktem Hochladen (vom PC),
• Auswählen aus der WP Mediathek oder
• Einfügen der URL eines Bildes.

Natürlich kannst du das Bild später über die Schaltfläche Ersetzen in der Bearbeitungsleiste jederzeit gegen ein anderes Bild austauschen. Nachdem das gewünschte Bild angezeigt wird, nimmst du folgende Einstellungen vor:

1. Alternativen Text eingeben: Er sollte das Schlüsselwort für deinen Beitrag enthalten
2. Eine Beschriftung hinzufügen: Hinweis auf den Rechteinhaber / die Bildquelle (und optional einen Titel). Ein Klick auf das Icon (… in einem Rahmen) in der Bearbeitungsleiste über dem Bildblock öffnet das Eingabefeld dafür unterhalb des Bilds.
3. Bildgröße einstellen

Bilder anpassen

Als erstes bestimmst du das Seitenverhältnis deiner Abbildung. Im Auswahlmenü stehen dir folgende Formate zur Verfügung:

• Original
• Quadratisch – 1:1
• Standard – 4:3
• Portrait – 3:4
• Klassisch 3:2
• Klassisches Portrait – 2:3
• Breit – 16:9
• Hoch – 9:16

In der Regel wirst du dich einfach für Original entscheiden. Darunter kannst du es entweder bei Breite / Höhe automatisch belassen oder du gibst jeweils einen eigenen Pixel-Wert ein. Letzteres kann jedoch dazu führen, das die Abbildung auf kleineren Bildschirmen verzerrt/gequetscht erscheint. Als letztes entscheidest du dich noch für eine der vorgegebenen Auflösungen Vorschaubild (Thumbnail) – mittel – groß – vollständige Größe. Auch hier empfiehlt sich die vollständige Größe, um eine gute und scharfe Darstellung des Bilds auf allen Bildschirmgrößen zu erreichen.

Darüber hinaus bietet dir der Gutenberg Editor neben der Standard-Maske (Rechteck) auch noch eine Kreis-Maske an. Letztere wäre z. B. für einen Biografie-Block geeignet, hat jedoch den Nachteil, dass nur der mittlere Teil des Bildes sichtbar ist. Zuletzt legst du über die Bearbeitungsleiste noch die Orientierung fest:

• Links- / Rechtsbündig
• Zentriert
• Weite Breite: Breiter als der normale Block, mobil über die gesamte Breite; Bildhöhe bleibt unverändert
• Gesamte Breite: Auf allen Bildschirmen, aber größere Bildhöhe

Um dem Besucher zu ermöglichen, direkt durch einen Klick auf das Bild z. B. zu einem anderen Beitrag zu gelangen, verlinkst du das gesamt Bild. Dafür klickst du auf das Link-Symbol in der Bearbeitungsleiste und fügst die URL der Zielseite ein (s. auch Gutenberg Tutorial Teil 4) oder du klickst auf Mediendatei. Wenn ein Besucher auf das Bild klickt, öffnet es sich vergrößert auf einer neuen Seite.

Natürlich könntest du die Abbildung über die Bearbeitungsleiste auch beschneiden (= Zuschneiden). Jedoch ist es immer besser, ein Bild bereits vor dem Hochladen entsprechend zu bearbeiten. Zuletzt hast du noch die Option, einen Text über dem Bild einzufügen, indem du auf das „A im Rahmen-Symbol“ klickst.

Mehrere Bilder – Galerie

Wenn du auf deiner Startseite oder in Blog-Beiträgen mehrere „zusammenhängende“ Bilder anzeigen möchtest, erstellst du einen Galerie-Block. Einerseits kannst du auch wieder mehrere Bilder direkt von deinem PC hochladen. Andererseits ist es in diesem Fall komfortabler, die Bilder aus deiner WP Mediathek auszuwählen.

1. Im Block auf Mediathek klicken und
2. die gewünschten Bilder markieren

Anschließend öffnet sich ein neues Fenster, in dem du die Reihenfolge der Bilder noch verändern kannst. Außerdem trägst du hier für jedes einzelne Bild einen ALT-Text ein, könntest es beschriften und versiehst es mit einem Hinweis auf den Rechteinhaber. Falls du dich für eine Beschriftung entscheidest, sollte diese nicht zu lang sein, da sie sonst insbesondere auf kleinen Bildschirmen einen (zu) großen Teil der Abbildung verdeckt.

Nachdem du auf Einfügen geklickt hast, passt du die Galerie an. Du legst fest, ob der gesamte Galerie-Block links-, rechtsbündig oder zentriert angezeigt wird. Oder du entscheidest dich für Weite Breite bzw. Gesamte Breite (s. o.).

Außerdem bestimmst du die Anzahl der Spalten (1 – 3), d. h. der Bilder pro Zeile. Wenn du mehrere Bilder-Zeilen untereinander verwenden möchtest, gibst du für jede einzelne Zeile die Anzahl der Spalten an. Des weiteren hast du die Möglichkeit, Vorschaubilder zu beschneiden, um sie besser auszurichten. Für eine Verlinkung der gesamten Galerie nutzt du die Option in der Seitenleiste.

Medien und Text

Um ein Bild und den (dazu gehörigen) Text in zwei Spalten nebeneinander darzustellen, benötigst du den Medien und Text-Block. Nachdem du den Block eingefügt hast, befindet sich auf der linken Seite die Eingabemaske für das Bild und auf der rechten der Textbereich. Die Vorgehensweise zur Bearbeitung des Text-Bereichs entspricht der bei Gutenberg-Blöcken üblichen.

Auch beim Einfügen des Bildes hast du wieder die Optionen Hochladen oder Auswahl aus der WP Mediathek. Die weiteren Einstellungsmöglichkeiten unterscheiden sich jedoch gegenüber dem vorher für Bilder beschriebenen. Lediglich die Eingabe eines alternativen Textes ist dieselbe.

Medien-Block anpassen

In der Seitenleiste über dem Alt-Text findest du bei diesem Block zwei Schalter. Einerseits kannst du festlegen, ob Bild und Text auf mobilen Geräten gestapelt werden sollen. Dies ist i. d. R. sinnvoll, da nebeneinander liegende Spalten je nach Bildschirmgröße nicht optimal dargestellt werden. Andererseits kannst du das Bild auch noch zuschneiden. Wenn die Größe deines Ausgangsbilds an dein Theme angepasst ist, ist das normalerweise nicht notwendig. Am besten belässt du es bezüglich der Formate und Auflösung bei den Voreinstellungen in der rechten Seitenleiste.

Alle weiteren Anpassungen nimmst du über die Bearbeitungsleiste oberhalb des Blocks vor, indem du z. B. auf das Bild klickst und dann in das Kästchen links neben der Bearbeitungsleiste:

1. Gesamter Block: Weite oder gesamte Breite sowie
2. Bild links oder rechts des Text-Teils anordnen
3. Ausrichtung des Bildes: Vertikal oben, mittig oder unten.

In den meisten Fällen bietet sich vertikal mittig an. Falls der Textbereich jedoch höher als das Bild ist, käme für das Bild eventuell eher vertikal oben in Frage. Denn der Text sollte beispielsweise nicht oberhalb der oberen Bildkante beginnen, um dann mit der unteren Bildkante abzuschließen. Wenn du den Text nicht kürzen möchtest, dann sollte er zumindest erst in Höhe der oberen Bildkante beginnen und dann unten über den Bildrand hinausreichen.

Falls du doch einen längeren Text mit einem Bild kombinieren möchtest, der Text das Bild sozusagen „umfließen“ soll, bieten sich zwei andere Methoden an. Entweder du verwendest ein Spalten-Layout oder du integrieren das Bild in einen Textblock. Die Beschreibung hierzu findest du in meinen Gutenberg Tutorial 4 – Textblock.

Nachdem du deine Seite / deinen Beitrag nun mit Bildern verschönert hast, erkläre ich in meinem Gutenberg Tutorial Teil 6 das Einfügen spezieller Blöcken wie Zitat, Liste etc.

WEITERE GUTENBERG-TUTORIALS

• Einführung
• Bedienfelder
• Überschrift
• Textblöcke
• Layout Elemente, Listen, Zitate
• Spezialelemente und Widgets

© eb | › Externe Verlinkungen: Dieser Beitrag enthält keine Affiliate-/Partner-Links.