Du musst Bilder hochladen für einen Blog Post?
Im WordPress-Backend führen viele Wege zum Ziel.
Ob es um Bilder geht oder um andere Assets.
Seit der WordPress-Editor Gutenberg heisst, führen die meisten Wege über einen Block. Die Frage ist: Welchen?
Der Image-Block scheint prädestiniert.
Wie der Name verspricht: dieser Block ist tatsächlich dazu da, in deinem Blog Post Content ein Bild festzuhalten. So ein Image-Block ist auch schnell eingefügt:
- Das Ausklapp-Menü links oben zeigt die zuletzt benutzten Blöcke. Wenn du Glück hast, wird dort gerade ein Image-Block zur Auswahl angeboten.
- Alternativ kannst du immer auch auf das schwarze Pluszeichen klicken, meistens am Ende des aktuellen Post-Inhalts (Tooltip "Add block" oder "Block hinzufügen). Darauf erscheint ein Auswahlmenü von Icons der meist benutzten Blöcke und – erneut in schwarz – die Option "Browse all" oder "Alle anzeigen" (das kann dauern …)
- Oder – meine bevorzugte Methode – du nutzt das Slash-Menü. An der passenden Stelle drückst du ein- oder zweimal [Enter] (Return / Eingabe) und ein neuer Platzhalter erscheint: "Type / to choose a block" oder "Schrägstrich eingeben und Block auswählen".
Wenn es ein Image-Block werden soll, genügt
/IFalls du GenerateBlocks verwendest, musst du wie ich damit leben, dass es zwei gleichnamige Blöcke gibt, die sich nur durch die Farbe unterscheiden.
Der Standardblock für Bilder ist schwarz.
Der GenerateBlocks-Block für Bilder ist blau gehalten.
Nun gut.
Jedenfalls bekommst du, was du klickst!
Aber:
Willst du das jetzt für jedes Bild einzeln wiederholen?
Wenn nicht, zeige ich dir eine Abkürzung via Gallery- statt Image-Block.
Gallery-Block statt Image-Block einfügen
Im Zweifel startest du mit 1x oder 2x [Return] und tippst dich mit einem Schrägstrich ("/") ins Slash-Menü, wie oben beschrieben.
Nur statt einem "I" entscheidest du dich diesmal für ein
/GUnd damit für Gallery (Galerie), wie im folgenden Screenshot gezeigt.
Dann darfst du entscheiden, ob die Bilder schon in der Media Library extistieren (Mediathek) oder ob du sie erst noch hochladen musst.
Der folgende Screenshot zeigt: ich entscheide mich zum Beispiel für [Upload].
Hochladen ist insofern angenehmer, weil dir z.B. Windows klar anzeigt, was es zum Hochladen gibt. Die quadratischen Thumbnail-Bildchen in der Mediathek sind oft keine grosse Hilfe. Leider.
Der folgende Screenshot zeigt, wie ich in Windows kürzlich alle Bilder für einen Blog Post ausgewählt habe. Und anschliessend [öffnen] geklickt.
Und Zack! zeigt dir der Gutenberg Block-Editor brav eine neue Galerie an, mit allen Bildern, die du zuvor ausgewählt hast, siehe folgenden Screenshot.
Jetzt sind wir dem Ziel ganz nah. Du spürst es 🙂
Der letzte Schritt ist ein "Geheimtipp".
Entscheidend ist, dass du den Galerieblock auswählst. Statt einem der darin enthaltenen Bilderblöcke.
Wie der folgende Screenshot zeigt.
Woran erkennst du, dass du bis jetzt alles richtig gemacht hast?
Ganz einfach: ganz links oben klicken und ausklappen lassen.
Jetzt steht da: "TRANSFORM TO" und eine Auswahl von Blocktypen.
Und siehe da: ganz oben kannst du "Image" auswählen.
Siehe folgenden Screenshot.
Et voilà!
Prompt erscheinen alle Bild-Blöcke der Reihe nach, untereinander.
Als ob du sie einzeln da hingeklickt hättest.
Jetzt kann es sein, dass du dich trotzdem ärgerst.
Weil die Reihenfolge der Bilder nicht passt.
Weil sie umgekehrt ist, im Content, im Vergleich zu deinem Ordner auf der lokalen Platte. Oder noch schlimmer: Die Reihenfolge ist gar keine. Jedenfalls passt sie logisch nicht zum geplanten "Flow" im Content, den du gerade bearbeitest.
Da hilft nur Eines:
Schon vor dem Upload festlegen, was Gutenberg anzeigen soll.
Formate und Reihenfolge vorher festlegen
Auf Bildformate wie GIF, JPG, PNG oder WebP gehe ich hier nicht einzeln ein. Nehmen wir an, du weisst was du tust 🙂
Und über die Grösse der Bilder, da halte ich mich auch lieber raus. Sagen wir, das passt alles, so weit.
Wie legst du die Reihenfolge am einfachsten fest?
Mein Tipp:
- Numeriere die Dateinamen so, dass sie schon im Ordner auf der Platte in der Reihenfolge erscheinen, in der du später die Bilder in deinem Content sehen willst.
- Führende Nullen nicht vergessen, falls du mehr als 9 Bilder in die Galerie packen möchtest (sprich: deinen Blog Post).
- Vor die Nummer setze ich meistens den "Slug" oder Kurztitel des Blog Posts.
Beispiel: dieser Artikel.
- Der Slug (das ist der Teil der URL einer Seite oder eines Beitrags ohne die Domain der Website) ist in diesem Fall: bilder-hochladen
- Der Post hat 6 Bilder.
Die Dateinamen sind dann
- bilder-hochladen-1-slash-gallery.webp
- bilder-hochladen-2-gallery-upload.webp
- bilder-hochladen-3-dateien-auswaehlen.webp
- bilder-hochladen-4-gallery-eingefuegt.webp
- bilder-hochladen-5-container-auswaehlen.webp
- bilder-hochladen-6-transform-gallery-to-image.webp
Deutsch / Englisch kommt da schon mal durcheinander. Hauptsache, da sind keine Leerzeichen, keine Umlaute und dergleichen drin.
Weil:
Diese Dateinamen tragen ihrerseits zu "Slugs" bei, so bald die dazugehörenden Dateien mal auf deiner Website "oben" sind und du sie in irgendeinem Post oder einer Seite oder einem Layout verwendest. Deshalb ist auch zu empfehlen, dass du auf Grossbuchstaben verzichtest und alles kleinschreibst.
Ja. Ich weiss.
Klar gehen in URLs auch Leerzeichen und Umlaute und so was.
Kannste machen.
Sieht dann eben &/%20(= aus 🙂
Fazit für heute
Perfekte Workflows gibt es nicht.
Zeit für Perfektionismus hast du nicht.
Dafür gibt es Tausende von Kleinigkeiten und "Habits", die sich am Ende deines Tages auszahlen, wenn du es regelmässig mit einem Monster wie dem WordPress Gutenberg Block-Editor zu tun bekommst.
Vielleicht kannst du aus diesem kleinen Blog Post so eine Kleinigkeit mitnehmen.
Würde mich riesig freuen!
Mehr zum Thema Bilder
- Bilder bearbeiten PNG to WebP – Die besten kostenlosen Tools
