• 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 135 times, 1 visits today)

Die letzten Posts

Keine Anmeldung bei Konto möglich
05.06.20
Paragon kann nicht mehr sichern
31.05.20
Affinity Publisher Felder
30.05.20
Affinity Publisher Einzelseiten
12.04.20
Merkwürdige Text Zeichen
22.03.20
200GB Cloudspeicher kostenlos
21.03.20

Tags

Acrobat Adobe Affinity All IP Backup Batch Bilder Dell Directory Opus Drucker ESET ESXi Exchange 2010 Felder Firmware Kyocera Lancom Lifecycle Modernize Theme MS Office OKI Ordner Outlook Passwörter Plugin POP3 Post Profile Publisher Rename Schnittstellen Server SFIRM Sophos Tools Treiber UTM Veeam VirtualDub Windows Windows 7 Windows 8 Winrar Wordpress

Meistbesucht

  • Servergespeicherte Profile umziehenServergespeicherte Profile umziehen (2.408)
  • Canon Selphy CP800 und Windows 8/10Canon Selphy CP800 und Windows 8/10 (1.152)
  • OKI C332 Login & PasswortOKI C332 Login & Passwort (1.147)
  • Dell Server Lüfter steuernDell Server Lüfter steuern (1.017)
  • Opel Astra FlexFix klemmtOpel Astra FlexFix klemmt (938)
  • Fonts Remote installierenFonts Remote installieren (751)

Letzte Beiträge

Keine Anmeldung bei Konto möglich
05.06.20
Paragon kann nicht mehr sichern
31.05.20
Affinity Publisher Felder
30.05.20
Affinity Publisher Einzelseiten
12.04.20
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.OkNo