Hier lernen wir Bilder und Galerien einzufügen mit allen Optionen.
gutenberg-fibel.de/bloecke/bild/
gutenberg-fibel.de/bloecke/galerie/
1) Bild mit Ausrichtung einfügen – Bildgröße
- Zwischen oder vor den Blindtexten mit „+“ (Bild suchen/auswählen) oder per Tastatur mit /Bil und <enter> jeweils Bild-Blöcke einfügen!
- Wähle als Bild beliebige Personen/Avatare aus der Mediathek aus
a) Ausrichtung keine – Bild in leere Zeile einfügen
Überall dieselbe alte Leier. Das Layout ist fertig, der Text lässt auf sich warten. Damit das Layout nun nicht nackt im Raume steht und sich klein und leer vorkommt, springe ich ein:
der Blindtext. Genau zu diesem Zwecke erschaffen, immer im Schatten meines großen Bruders »Lorem Ipsum«, freue ich mich jedes Mal, wenn Sie ein paar Zeilen lesen. Denn esse est percipi – Sein ist wahrgenommen werden.
b) Ausrichtung zentriert – Bild in leere Zeile einfügen
Überall dieselbe alte Leier. Das Layout ist fertig, der Text lässt auf sich warten. Damit das Layout nun nicht nackt im Raume steht und sich klein und leer vorkommt, springe ich ein: der Blindtext.
Genau zu diesem Zwecke erschaffen, immer im Schatten meines großen Bruders »Lorem Ipsum«, freue ich mich jedes Mal, wenn Sie ein paar Zeilen lesen. Denn esse est percipi – Sein ist wahrgenommen werden.
c) Ausrichtung links
Zusätzlich: In den Block Einstellungen den Style „Abgerundet“ und die Größe Vorschaubild auswählen
<- hier neue Zeile mit Bild einfügen! Überall dieselbe alte Leier. Das Layout ist fertig, der Text lässt auf sich warten. Damit das Layout nun nicht nackt im Raume steht und sich klein und leer vorkommt, springe ich ein: der Blindtext. Genau zu diesem Zwecke erschaffen, immer im Schatten meines großen Bruders »Lorem Ipsum«, freue ich mich jedes Mal, wenn Sie ein paar Zeilen lesen. Denn esse est percipi – Sein ist wahrgenommen werden.
d) Ausrichtung rechts
Teste den neuartigen Duotone-Filter in der Werkzeugleiste aus
<- hier neue Zeile mit Bild einfügen! Überall dieselbe alte Leier. Das Layout ist fertig, der Text lässt auf sich warten. Damit das Layout nun nicht nackt im Raume steht und sich klein und leer vorkommt, springe ich ein: der Blindtext. Genau zu diesem Zwecke erschaffen, immer im Schatten meines großen Bruders »Lorem Ipsum«, freue ich mich jedes Mal, wenn Sie ein paar Zeilen lesen. Denn esse est percipi – Sein ist wahrgenommen werden.
2) Großes Bild einfügen – Zuschneiden – Layout
- a) Füge hier unterhalb in die leere Zeile ein Bild-Block ein und suche in der Mediathek nach dem Bild „negative“.
- Stelle rechts in den Blockeinstellungen die Bildgröße auf „Vollständige Größe“
(= 2560px = -scaled-Datei ; das Originalbild hätte 5472 Pixel Breite) - Klicke in der Werkzeugleiste auf „Zuschneiden“
- Stelle dort das Seitenverhältnis 16:10 ein und die Lupe auf 130
- Mit der Maus lässt sich nun ein gewünschter Ausschnitt im Bild einstellen und mit Übernehmen wird das Bild mit dem neuen Zuschnitt in die Mediathek gespeichert
- Stelle rechts in den Blockeinstellungen die Bildgröße auf Mittlere
- Dupliziere das Bild zweimal und verschiebe die Duplikate unterhalb der Unteraufgaben b) und c)
- Stellen Sie den Anweisungen entsprechend die Ausrichtungen und Größen ein
b) Bildgröße: Groß – Ausrichtung: Weite Breite
c) Bildgröße: Original – Ausrichtung: Gesamte Breite
3) Bild mit Link versehen
- Fügen Sie das Rezept-Bild „unsplash-06“ in zentrierter Ausrichtung und mittlerer Bildgröße ein
- Duplizieren Sie dieses Bild weitere zweimal und verschieben diese unter die Anweisungen b/c
- Verlinken Sie die Bilder mit den jeweiligen Zielen in den Anweisungen
- Nach dem Aktualisieren/Öffnen dieses Beitrags, klicken Sie zum Testen auf die Bilder im Frontend.
a) Link zur Mediendatei + Link in neuen Tab öffnen
b) Link zur Anhang-Seite
c) Ersetze das Bild durch ein kleines WordPress_Logo und verlinke das Bild (benutzerdefinierte URL/suche) mit dem Beitrag Übung #01 oder – wenn vorhanden – mit der Seite WordPress Portal
4) Bild einfügen – Bild mit erweiterten Block-Optionen bearbeiten
- Beliebiges Bild einfügen in großer Größe
- Bildgröße mittels Anfasser am Bild etwas verkleinern und/oder durch die Blockeinstellungen in der rechten Seitenleiste
- Title-Attribut eintragen mit Text: Das ist ein TOOLTIPP (=Mouse-Over Text)
(Siehe Einstellungen/Erweitert, dort finden sich auch zusätzliche CSS-Klasse(n); die machen wir in Übung #4.3 - Link einfügen auf Medien-Datei
- In Link-Beziehung diese zwei Wörter eintragen: nofollow lightbox (hat keinen optischen Effekt!)
(= rel-Attribut in <a>; Infos: ekiwi.de/index.php/320/rel-attribute-fuer-bessere-html-links/) - CSS-Klasse des Links
(nutzen wir nicht, hier könnten wir eine eigene CSS-Klasse auf den Link legen) - CSS-Klasse Bild-Block (Block-Eigenschaften unter Erweitert) kommt in Übung #4.3 vor
5) Inline-Bild in einen Absatz einfügen – Bild kopieren
- Klicke an belieber Stelle in den untenstehenden Absatz an der Sie ein Inline-Bild einfügen möchten.
- In der Toolbar des Absatzes (mehr!) wählen Sie ein Inline-Bild aus; suchen Sie nach dem Bild „search“ (ist ein kleines Icon) 3. Stelle die Breite 50 px ein.
- Bitte das Inline-Bild markieren und mit STRG+C kopieren und an anderer Stelle mit STRG+V einfügen.
- Info : In manchen Themes werden Inline-Bilder falsch dargestellt. In TwentyTwentyOne funktioniert es dagegen seit V1.5
Überall dieselbe alte Leier. Das Layout ist fertig, der Text lässt auf sich warten. Damit das Layout nun nicht nackt im Raume steht und sich klein und leer vorkommt, springe ich ein: der Blindtext. Damit das Layout nun nicht nackt im Raume steht und sich klein und leer vorkommt, springe ich ein: der Blindtext. Damit das Layout nun nicht nackt im Raume steht und sich klein und leer vorkommt, springe ich ein: der Blindtext. Damit das Layout nun nicht nackt im Raume steht und sich klein und leer vorkommt, springe ich ein: der Blindtext. Überall dieselbe alte Leier.
6) Externes Bild von einer beliebigen WebSite einfügen
-> Bild-Block hinzufügen -> Von URL einfügen
7) Galerie einfügen
Wichtiger Hinweis: Mit der WP Version 5.9 wurde der Gallery Block verbessert. Jetzt werden die der Galerie hinzugefügten Bilder separat als Bild-Blöcke betrachtet (mit dem Vorteil dass man alle Bild-Aktionen und Eigenschaften individuell anwenden kann wenn man ein Bild markiert).
Um die Galerie-Blockeinstellungen zu sehen muss daher der richtige Block , also der Galerie-Block, ausgewählt werden. Da hilft die Listenansicht in der Editor-Leiste, bzw. unten links in der Status-Leiste die Breadcrumb-Zeile!
- a) Galerie einfügen mit 6 großen Bildern (suche nach WP)
- Bildgröße: mittel
- Linkziel: Medien-Datei einstellen
- Ausrichtung: Gesamte Breite
- In den Block-Einstellungen „Bild zuschneiden“ testen
- b) Wähle 5 Personen aus der Mediathek für eine weitere Galerie.
- Wie man sieht übernimmt die Galerie die Personenbeschriftungen aus der Mediathek.
- Ändere die Spaltenzahl der Galerie auf fünf
- Bildgröße: Original
- Ausrichtung: Weite Breite
- Galeriebeschriftung einfügen -> „Sie sehen unsere Mitarbeiter“