WordPress Block Galerie
Nach Projektabschluss übernehme ich Wartungsarbeiten ganz nach den Wünschen meiner Kund:innen. Seien es sämtliche technischen Wartungsarbeiten an WordPress wie Updates der Installation und der Plugins oder dass ein Teil der Website von Ihnen selbst aktualisiert wird während ich die weitere redaktionelle Betreuung übernehme.
Bilder vorbereiten und optimieren
Zu den Standardblöcken beim Bearbeiten von Beiträgen in WordPress gehören u.a. die am meisten gebrauchten Funktionen wie Überschriften, simple Absätze für den Fließtext, ein Bild oder eine Bildergalerie. Der Gutenberg Editor bietet für letztere den Block namens Galerie.
Im Alltag bewährt hat sich die als erster Schritt die Bildbearbeitung z.B. in Photoshop wo das Bild auch in die passende, maximal erforderliche Größe gebracht wird und über für Web Speichern mit minimaler Qualität bei größtmöglicher Farb- und Detailtreue gespeichert wird. Tipp: Verwenden Sie eindeutige Dateinamen um bei WordPress später Bilder wieder zu finden. Danach spiele ich die Dateien in die Mediathek ein und erst daraufhin bearbeite ich den zugehörigen Beitrag.
Optimale Bildgrößen nicht nur für WordPress
Oft werde ich nach den optimalen Bildgrößen gefragt. Die Antwort ist wie so oft: Es kommt darauf an. Zum einen hängen diese vom Layout bzw. Design des Themes bzw. der Website ab, zum anderen wo diese auf der Webpage eingesetzt werden und welchen Zweck die Bilder haben. Die Seiten einer Kunstgalerie leben von Bildern, ein Beratungsunternehmen wird diese eher nur zur Unterstreichung der eigenen Messsage nutzen.
Die Bildergröße ergibt sich somit aus der Breite des Themes bzw. der maximalen Darstellungsbreite, die Höhe aus dem gewünschten Bildverhältnis (z.B. 16:9, 4:3 oder 3:2). Daraus ergibt sich Breite / Verhältnisbreite * Verhältnishöhe also z.B. 1280 Pixel Breite / 16 * 9 = 720 Pixel Höhe. Thumbnail, mittlere und große Größe lassen sich in der Mediathek einstellen bzw. bei komplexeren Projekten per Code in der functions.php entsprechend festlegen. Für Hintergrundbilder empfiehlt sich eine Breite von 1920 Pixel, für Thumbnails Minimum 150 Pixel.
Übersicht Mediathek
In der Mediathek liegen alle Medien die wir auf unsere Website präsentieren wie etwa Bilder, Dokumente (z.B. pdf) und Videos. Neue Dateien werden hier hochgeladen. Beim Upload erzeugt WordPress automatisch die passenden Bildformate wie beispielsweise kleinere Voransichten. Diese Größen lege ich spezifisch für jedes Projekt fest um ein Optimum an Optik und Ladegeschwindigkeit zu erreichen.
Bilder in Mediathek laden
Nach dem Hochladen erscheinen in der Mediathek unser(e) Bild(er) und vier Felder, u.a. die üblichen und wichtigen Felder für Alternativtext und Titel des Bildes. Darunter kann man, sofern wir das passende Werkzeug installiert haben, die Möglichkeit das Bild einer Kategorie zuordnen. Dies empfiehlt sich insbesondere bei Projekten mit vielen Bildern bzw. Bildergalerien.
Beiträge bearbeiten
Nachdem unsere neuen Bilder in der Mediathek sind gehen wir auf Beiträge und wählen über Bearbeiten den Beitrag aus dessen Bildergalerie ergänzt werden soll. Mit einem Klick auf die weiße Fläche z.B. zwischen den Bildern wird der Block Galerie blau eingefasst. Um nun die bereits hochgeladen Bilder zu integrieren erfolgt ein Klick auf den Button Mediathek.
Galerie bearbeiten
Nach dem Klick im dritten Schritt sehen wir nun alle Bilder und Medien der Mediathek. Um unsere bestehende Galerie um weitere Bilder ergänzen zu können erfolgt zunächst rechts oben ein Klick auf Galerie bearbeiten.
Bestehende Galerie
Durch den Klick auf Galerie bearbeiten im vorhergehenden Schritt sehen wir nun unsere Galerie in der durch Wahl des Symbol X rechts oberhalb eines jeden Bildes selbiges gelöscht werden kann. Da aber neue Bilder hinzugefügt werden sollen wählen wir links „Zur Galerie hinzufügen” aus.
Bilder hinzufügen
Die Mediathek hat sich geöffnet und ist bereit, dass all die Bilder ausgewählt werden die zur bestehenden Galerie hinzugefügt werden sollen. Sobald ein oder mehrere Bilder gewählt wurden wird dies blau umrahmt und erhält einen Marker rechts oben. Wir bestätigen nun unsere Auswahl über den fetten blauen Button „Zur Galerie hinzufügen“ rechts unten.
Bilder sortieren
Das bzw. die Bilder wurden der Galerie beigefügt und zwar an das Ende der Galerie. Über simples Drag and Dropp können Bilder an die gewünschte Position verschoben werden. Danach wird das vorgenommene Update wieder über den Button rechts unten, der sich „Galerie aktualisieren” nennt, bestätigt.
Beitrag aktualisieren
Nun sind wir bereits wieder zurück bei dem Beitrag dessen Galerie wir überarbeitet bzw. ergänzt haben.
Da WordPress passende Vorschaubilder generiert und über Javascript Nutzern ermöglicht wird sich die Bilder zu Vergrößern gehen wir sicher, dass rechts in den Einstellungen für den Block Galerie der Link zu Mediendatei und Bildgröße Vorschaubild gewählt ist.
Durch Klick auf den kleinen dicken rechts oben aktualisieren wir den Beitrag und sind fertig.
Beiträge um neue Galerie ergänzen
Sofern Bilder noch nicht bearbeitet und noch nicht in der Mediathek wird wie oben verfahren. Danach wird über Beiträge der Artikel gewählt oder ggf. ein neuer Beitrag angelegt. Über das Pluszeichen kann der Gutenberg Block Galerie in WordPress gewählt werden. Danach in der Mediathek die gewünschten Bilder auswählen und Auswahl über „Neue Galerie erstellen“ bestätigen. Mediendateien ggf. umsortieren und mit „Galerie einfügen“ bestätigen. In den Galerie-Einstellungen rechts gewünschte Spaltenzahl wählen, „Bilder zuschneiden“ deaktivieren, Link setzen zu Mediendatei und Bildgröße auf Vorschaubild. Danach Seite oder Beitrag über blauen Button oben rechts veröffentlichen bzw. aktualisieren.
Was sind Masonry, Photoswipe und Co?
Zur Gestaltung von Multimediainhalten bieten sich Lightboxen an. Bei dieser Form der Darstellung wird nach dem Klick auf ein Vorschaubild die Seite beispielsweise abgedunkelt und quasi darüber schwebend legt sich großformatig das Bild. Gerade bei Webseiten für Künstler oder Auktionshäuser erhalten Sie ein sauberes Design, um Details und Strukturen optimal darstellen zu können. Mehr zum Thema: www.servicepraxis.com/plugins/lightbox.