Werken met afbeeldingen in de WordPress blokeditor

Blogberichten en andere online artikels, je kan ze eigenlijk nauwelijks voorstellen zonder afbeeldingen. Dat treft, want tegenwoordig biedt de Gutenberg-editor aardig wat mogelijkheden om zo’n artikel te pimpen met grafische elementen. Plugins en page builders zijn niet echt meer nodig om er iets moois van te maken. Een overzichtje.

Leestijd: ca. 5 minuten

Aan de slag met afbeeldingen in WordPress Gutenberg (blokeditor)

Via de Blok-inserter vind je standaard een 5-tal WordPress-blokken waarmee je makkelijk afbeeldingen en foto’s kan invoegen.¹

1. Afbeeldingen toevoegen met het Afbeelding-blok

Dat is geen verrassing, natuurlijk. Selecteer dit WordPress-blok en je hebt 3 opties. Je kan:

• Een nieuwe afbeelding van op je computer uploaden naar (de mediabibliotheek van) WordPress
• Een afbeelding uit je mediabibliotheek kiezen om deze in te voegen in je artikel
• Een afbeelding van het internet plukken en deze invoegen via de url van de afbeelding

De hieronder getoonde foto komt uit mijn mediabibliotheek van WordPress:

Selecteer vervolgens de afbeelding en je kan deze nog helemaal bewerken. Zo past ‘ie mooi in de layout van je project van dat moment.

In het Instellingen-menu kan je dan onder het tabje Blok onder meer de precieze afmetingen van de foto instellen, samen met de padding en de marge. Goed om weten: de wijzigingen die je hier aanbrengt wijzigen niets aan het oorspronkelijke formaat van de afbeelding. Dus wat instelt geldt alleen voor deze specifieke toepassing.

Daarnaast is er de toolbar, specifiek voor het afbeelding-blok. Je beschikt hier over een aantal handige/nuttige opties:

• de afbeelding uitlijnen (links, midden en rechts)
• de maximale breedte van je afbeelding bepalen
• een duo-toonfilter instellen voor je plaatje
• een linkje aan je afbeelding koppelen (je foto aanklikbaar maken)
• je afbeelding bijsnijden
• het focuspunt van de foto aanpassen
• een tekst over je afbeelding laten lopen
• je foto voorzien van een bijschrift

Stiekem heb je zo toch wat extra opties om je webpagina leuk op te maken t.o.v. de klassieke WordPress-editor. Bovendien, allemaal zonder een letter code en zonder plugin.

---

2. Een uitgelichte afbeelding invoegen in een pagina

Misschien een beetje ongebruikelijk, maar het is mogelijk om een uitgelichte afbeelding toe te voegen midden in je artikel. Ik kan me persoonlijk niet direct inbeelden waarom je dit zou doen. Tenzij om een extra lang uitgevallen pagina met alleen tekst op te breken. Maar enfin, het kan:

1. Open de Blok-inserter
2. Kies het WordPress-blok Uitgelichte afbeelding
3. Selecteer de afbeelding die je wil invoegen uit je mediabibliotheek

De mogelijkheden zijn hier zowat dezelfde als bij het afbeelding-blok. Een bijschrift toevoegen kan dan weer niet. Al zou je die beperking kunnen omzeilen door gewoon een Paragraaf-blok (in een kleinere lettergrootte bijvoorbeeld) te plaatsen onder jouw uitgelichte afbeelding.

Lees ook: Tips om sneller te werken in WordPress Gutenberg

---

3. Foto’s opmaken naast tekst in WordPress via het Media & tekst-blok

De naam zegt het eigenlijk al, dit WordPress-blok is bedoelt om een tekst en afbeelding mooi te laten samenvoegen. Het blok bestaat dus uit 2 delen. Of 2 kolommen zo je wil. Het is wel fijn dat je kan spelen met de afmetingen van je afbeelding, waardoor je dus bijvoorbeeld de foto kleiner kan maken om meer ruimte te creëren voor het tekstgedeelte.

En net zoals bij het afbeelding-blok heb je de mogelijkheid om via het Instellingen-menu aan de rechterkant de afmetingen, padding en marges te tweaken. Gebruik de toolbar van het Media & tekst-blok om:

• het blok uit te lijnen (links, midden en rechts)
• de maximale breedte van het element te bepalen
• het blok verticaal uit te lijnen (boven, midden en onder)
• te kiezen of je de afbeelding links wil en de tekst rechts, of net omgekeerd
• een hyperlink toe te voegen aan dit element

Het is erg aan te raden de optie “Stapel op mobiel” te kiezen in het Instellingen-menu rechts op het scherm, zodat dit blok ook mooi uitkomt op kleinere schermen.

---

Geen tekstomloop mogelijk in WordPress?

Opvallend en een beetje jammer: tekstomloop – waarbij je tekst mooi om je afbeelding heen loopt – is niet momenteel niet voorzien in WordPress. Als je dit echt nodig hebt zijn er wel enkele noodmaatregelen te bedenken:

1. Neem het Media & tekst-blok (zie hierboven). Als de tekst langer is dan de hoogte van je afbeelding, plaats een Paragraaf-blok onder het Media & tekst-blok en plak er de “overtollige tekst” in. Zo lijkt het of de tekst om de afbeelding heen loopt. Eventueel kan je wat spelen met de marges, padding en afmetingen van je plaatje of de tekst.
2. Gebruik een Kolommen-blok en verdeel aldus de breedte van je pagina in twee. In één kolom komt de afbeelding (Afbeelding-blok), in de andere de tekst (Paragraaf-blok). En dan is het opnieuw spelen met kolombreedtes, marges en padding tot het zaakje min of meer goed staat.
3. Installeer een extra Gutenberg block plugin die die functionaliteit aanbied als dit je allemaal teveel gedoe lijkt.

---

4. Reeks foto’s tonen met het Galerij-blok in WordPress

De naam zegt het al: het Galerij-blok is erg geschikt wanneer je graag meerdere afbeeldingen aan je pagina wil toevoegen. De bestanden moeten zich wel in de mediabibliotheek bevinden. Afbeeldingen tonen via een URL is hier niet mogelijk.

Bij wijze van voorbeeld maakt ik snel even een fotogalerij aan:

1. Kies het Galerij-blok uit de Blok-inserter
2. Klik op Mediabibliotheek
3. In de mediabibliotheek kan je de afbeeldingen kiezen (Galerij aanmaken)
4. Tik vervolgens rechts onderaan op de knop Een nieuwe galerij aanmaken

Dat Galerij-blok is eigenlijk niet veel meer dan een groep-blok bestaande uit Afbeelding-blokken. Dus je kan de individuele afbeeldingen uit de galerij aanvliegen zoals een Afbeelding-blok (zie hierboven).

In de instellingen van het Galerij-blok vind je onder meer het aantal kolommen van je galerij instellen. Kies je 3 kolommen, dan worden 3 afbeeldingen naast elkaar getoond (op groot scherm). Neem je 6 foto’s op in je galerij dan heb je 2 rijen met telkens 3 foto’s.

---

5. Omslagafbeelding: flexibel en opvallend

Het Omslagafbeelding-blok is een krachtig en flexibel WordPress-blok. Dit is een groep-blok, bedoeld om tekst groot op een gekleurde achtergrond, foto of video te tonen (tekst-overlay). Ideaal voor het maken van visueel sterk in het oog springende secties op je site. Zoals headers, footers, call-to-actions, hero-secties, mega menu’s enzovoort.

---

Voorbeeld van een Omslagafbeelding-blok (Cover block). In dit geval een patroon uit de verzameling standaard patronen waar mijn WordPress-thema is uitgerust. Enkel de inhoud van het tekstvak werd aangepast uiteraard.

1. Kies het Omslagafbeelding-blok uit de Blok-inserter
2. Klik een kleur uit je (standaard) kleurenpalet aan (voor tekst op een gewone, gekleurde achtergrond)
3. of selecteer een geschikte afbeelding uit je mediabibliotheek
4. Voeg andere WordPress-blokken toe om je cover block samen te stellen

Opvallende opties in de toolbar voor dit blok zijn de mogelijkheid om:

• een duotoonfilter te voorzien over de afbeelding
• de kadrering van je afbeelding aan te passen via Positie wijzigen van de inhoud
• de Volledige hoogte van je afbeeldingen te gebruiken

Via het Instellingen-menu voor dit blok heb je nog opties voor de afmetingen en de positie van je afbeelding.

Vrij typisch aan zo’n Omslagafbeelding-blok is dat het de Volledige breedte gebruikt. En verder kan je dit blok gebruiken als achtergrond waarin je dan ook bijvoorbeeld paragrafen, quotes, menu’s en lijsten kan neerzetten. Enige beperking: jouw fantasie én de leesbaarheid voor je bezoekers.

Aangezien een Omslagafbeelding-blok meestal nogal groot uitvalt helpt het als de afbeelding die je kiest groot genoeg is en van goede kwaliteit.

Hoewel het natuurlijk perfect mogelijk is om zelf een Omslagafbeelding-blok samen te stellen from scratch, belet niks je om te gaan kijken bij de kant-en-klare patronen waar jouw WordPress theme standaard mee is uitgerust. Haal er inspiratie of pas een patroon aan aan je eigen behoeften en smaak.

1. Ook met de WordPress-blokken Insluiten en Eigen HTML kan je eventueel afbeeldingen in je webpagina invoegen, uiteraard alleen als er in het codefragement sprake is van een afbeelding. Dat komt in dit artikel echter niet ter sprake. ↩︎