• Los geht´s
  • Software Tips
  • Hardware Tips
  • Scripting
  • Tools
  • Dies & Das
  • Impressum

2 Bilder nebeneinander

24.02.19
by Christian
Bilder mit Gutenberg
Comments are off

Mit dem neuen Gutenberg Editor in WordPress ändert sich einiges.

Wenn man WordPress 5.x installiert hat bekommt man den neuen Gutenberg Editor gleich mitgeliefert. Ich finde den gar nicht so schlecht auch wenn vieles erst einmal sehr ungewöhnlich erscheint.

In anderen Blog´s die ich betreibe habe ich oft 2 Bilder nebeneinander dargestellt.

Beim neuen Editor war mir erst mal nicht ganz klar wie das funktioniert weil wenn man den Block „Bild“ auswählt dann kann man immer nur jeweils 1 Bild auswählen. Aber eigentlich ist es ganz einfach.

Neuen Block hinzufügen als „Bild“. Das jeweilige Bild auswählen und die Ausrichtung auf Linksbündig stellen.

Dann wählt man einen neuen Block darunter aus, auch als Bild und wählt das nächste Bild aus. Hier vergibt man aber keine Ausrichtung. Fertig. Das war es schon.

Auch wenn man 2 Blöcke jetzt hat und im Editormodus die Bilder untereinander angezeigt werden, sind diese später auf der Webseite nebeneinander sichtbar.

Vorausgesetzt natürlich man wählt die Bildgröße so, dass die auch von der Breite her, nebeneinander passen. Bei meinem Theme sind das pro Bild 460px.

Was auch ganz interessant ist, klickt man mal mit der Maus ausserhalb der Blöcke und wieder auf eines der Bilder dann sieht man, dass WordPress die beiden Bilder zu einem Block zusammengefasst hat. Man kann aber weiterhin jetzt z.B. auf das 2. Bild klicken und „Block entfernen“ anwenden.

Es wird dann nur der jeweilige Block entfernt und nicht der zusammengefasste. Ob das ein Feature oder Fehler ist, weiß ich nicht.

Was mir noch aufgefallen ist, die einzelnen Blöcke trennen nicht komplett Bild und Text zeilenweise voneinernander. Im Bild unten sieht man dass hier das Bild einen Block bildet und die Ausrichtung auf Linksbündig steht. Der Text darunter ist ein eigenen Block. Im Endergebnis läuft aber jetzt der Text um das Bild herum. Das funktioniert jetzt deutlich besser wie früher.

Und hier dann das Ergebnis. Leider gibt es weiterhin kein richtiges WYSIWYG. Im Editor hat der Text eine ganz andere Größe und läuft somit auch ganz anders um das Bild herum wie man im Ergebnis unten gut sehen kann.

Wen man das Umlaufen nicht möchte muss man die Ausrichtung herausnehmen oder das Bild auf zentriert setzen oder so breit darstellen, dass kein Text umlaufen kann.

Möchte man, dass die Bilder auch anklickbar sind und etwas vergrößert dargestellt werden dann muss man das jeweilige Bild auswählen und rechts in der Menüleiste auf Link-Einstellungen klicken, Link zur „Medien-Datei“ auswählen.

Die Funktion „In neuem Tab öffnen“ funktioniert bei mir in der WordPress 5.1 nicht.

(Visited 343 times, 1 visits today)

Die letzten Posts

Was bringt Serif am 30.10.25 ?
28.10.25
Directory Opus Ordner erweitern
03.08.25
Greenshot wird weiterentwickelt
03.08.25
Wusstest Du schon....
07.09.24
Druck Taste übersteuern
31.08.24
Your Start Menu isn´t working
28.06.24

Tags

Adobe Affinity Aktivierung All IP Backup Batch Bilder Dell Directory Opus ESET ESXi Felder Firmware Fotobuch GPResult Greenshot Gruppenrichtlinien IE Koordinaten Lancom Modernize Theme MS Nod32 Office OKI OneNote Ordner Outlook Plugin POP3 Profile Publisher Rename Server Sophos Suche Tools Treiber Updates UTM Veeam VirtualDub Windows Windows 7 Wordpress

Meistbesucht

  • ProfilpfadServergespeicherte Profile umziehen (5.042)
  • VeeamVeeam Backup Modi Erklärung (3.479)
  • canonCanon Selphy CP800 und Windows 8/10 (2.954)
  • Flexfix_04Opel Astra FlexFix klemmt (2.844)
  • passwoerterPantsOff Sternchen/Passwörter sichtbar machen (2.525)
  • cmdDell Server Lüfter steuern (2.518)

Letzte Beiträge

Was bringt Serif am 30.10.25 ?
28.10.25
Directory Opus Ordner erweitern
03.08.25
Greenshot wird weiterentwickelt
03.08.25
Wusstest Du schon....
07.09.24
We use cookies to ensure that we give you the best experience on our website. If you continue to use this site we will assume that you are happy with it.