WordPress Grundlagen

WordPress Editor #8 Bild-Block

Bild 1: Auswahl des Bild-Blocks

Um ein Bild auf Ihrer Seite einzufügen, verwenden Sie den Bild-Block des WordPress-Editors.

Hinweis: dieser, wie alle anderen Block-Editor Beiträge auch, bezieht sich auf das separate Plugin »Gutenberg«, das immer die neueste Version des Block-Editors zur Verfügung stellt. Die in WordPress selbst integrierte Version des Editors läuft naturgemäß dem Plugin in der Ausstattung hinterher. Sie können sich das Plugin jederzeit in Ihrem WordPress Backend nachinstallieren unter PLUGINS > INSTALLIEREN > »Gutenberg«.

Vorbereitung eines Bildes vor dem Upload

Bevor Sie Bilder auf den Server Ihrer Website hochladen, sollten Sie sie unbedingt bearbeiten. Insbesondere die Auflösung der hochgeladenen Bilddatei sollte der tatsächlich benötigten Größe des Bildes entsprechen. Ansonsten verwenden Sie unnötig viel Speicherplatz auf Ihrem Server und beeinträchtigen ggfs. die Ladegeschwindigkeit Ihrer Seite.

Meine Empfehlung

Bildauflösungen in Pixel

Auf meinen Seiten verwende ich meist die folgenden Bildauflösungen. Je nach Webdesign können diese jedoch variieren. Fragen Sie im Zweifel nach.

Empfohlene Bildauflösungen für den Upload in Pixel [px]
(BREITE x VARIABLE HÖHE)

Beitragsbilder 

1200 x VAR 
(z.B. 1200 x 600 oder 1200 x 800)

Bilder mit umlaufendem Text

600 x VAR 
(z.B. 600 x 400 oder 600 x 800)

Fullwide-Bilder

2100 x VAR 
(z.B. 2100 x 800 (Banner) oder 2100 x 1400 (Fullscreen))

Screenshot Bild-Block
Bild2: Quellen Optionen für das Einfügen eines Bildes

Wenn Sie den Bild-Block auswählen, haben Sie drei Möglichkeiten ein Bild einzufügen. Sie laden es neu hoch, Sie haben es bereits bearbeitet und in die Mediathek hochgeladen und fügen es von dort ein oder Sie fügen es von einer externen URL ein (dies würde ich nur im Ausnahmefall empfehlen, denn Sie haben dann überlicherweise keinen Einfluss darauf, ob das Bild an dieser Adresse dauerhaft verfügbar ist und Ihre Seite muss darüber hinaus auf die Auslieferung des Bildes von dem anderen Server warten).

Screenshot eingefügtes Bild
Bild 3: Bearbeitungsoptionen Bild-Block

Haben Sie das Bild im Editor eingefügt, bietet Ihnen das Top-Menü des Bildes verschiedene Optionen der Bearbeitung an (Bild 3). Die wichtigste ist die Ausrichtung des Bildes (1). Linksbündig und rechtsbündig, lassen den Text um das Bild laufen, sofern genügend Raum im Browserfenster des Nutzers vorhanden ist. Zentrieren zentriert das Bild ohne Textumlauf. Weite Breite versieht das Bild mit der Class »alignwide«, die je nach Theme etwas breiter formatiert ist, als die Standard-Textbreite. Voll Breite setzt die Class »alignfull«, die das Bild über die gesamte Fensterbreite streckt.

Screenshot Bild-Block Einstellungen
Bild 4: Größeneinstellungen Bild-Block in der Seitenleiste

Sie wählen dabei jeweils in der Seitenleiste des Editors die Anzeigegröße des Bildes aus. Hier hatte ich die Breite von 500 Pixel manuell eingegeben; die Höhe wird proportional zum Seitenverhältnis des Bildes berechnet.

Beim Bild-Block können Sie eine Bildbeschreibung angeben. Das ist auch dann sehr praktisch, wenn Sie den Urheber des Bildes nennen möchten (Immer beachten: Das deutsche Urheberrecht fordert die Urhebernennung »am Werk«. Wenn Sie selbst Urheber*in sind, brauchen Sie das natürlich nicht beachten, können es aber).

In Bild 3 sehen Sie die weiteren Bearbeitungsoptionen für den Bild-Block. Wichtig ist noch die Möglichkeit, das Bild zu verlinken (2). Klickt der Nutzer auf das Bild, öffnet der Browser den hier eingefügten Link. Dies haben wir schon im Beitrag zum Absatz-Block beschrieben.

Die mit der Version 8.4 des Block-Editors Gutenberg neu hinzugekommene Bildbearbeitungsmöglichkeiten (3) in Bild 3, empfehle ich nur in Ausnahmefällen zu verwenden. Besser ist es, das Bild vor dem Upload fertig aufzubereiten (Beschnitt, Auflösung, etc.), siehe oben. Die Online-Bearbeitung in WordPress produziert ansonsten viele verschiedene Versionen des Bildes und verbraucht dafür die Rechenpower und den Webspace Ihres Webservers.

Die vierte Bearbeitungsmöglichkeit (4) »Ersetzen« in Bild 3, ersetzt das Bild mit einem anderen Ihrer Wahl. Sie haben die bekannten Auswahlen: hochladen, Mediathek, URL.

Mit dem Block-Editor können Sie elegant und zügig Bilder in Ihre Texte einfügen und formatieren. Probieren Sie die Möglichkeiten aus und Sie werden damit professionelle Webtexte gestalten.


Möwe im akrobatischen Flug

Newsletter

Mein Kunden-Newsletter informiert Sie über neue Beiträge im Blog.


Schreiben Sie mir

    Datenschutzerklärung lesen

    * Pflichtfelder

    Oder rufen Sie direkt an


    Logo handmade web.design

    handmade web.design

    Claus Pescha

    Wengen 36 B
    86911 Dießen am Ammersee

    Ein Klick auf die Adresse führt Sie
    zur Routenplanung mit Google Maps.

    Telefon
    +49 (0) 8807 2066599

    E-Mail
    web@clauspescha.de

    vCard

    Social

       

    DATENSCHUTZ  |  IMPRESSUM  |  KEKSE !