WPLounge
Home » WordPress Gutenberg » Alle afbeelding blok types

Alle afbeelding blok types

Welke mogelijkheden zijn er in Gutenberg om afbeeldingen op te maken? Er zijn diverse blokken om afbeeldingen op verschillende manieren in je bericht of pagina te tonen. We bespreken hier welke er zijn en hoe ze gebruikt kunnen worden.

Affiliate disclaimer:
In onze artikelen en op onze pagina's staan affiliate links. Wanneer je via één van deze links een aankoop doet, ontvangen wij een (meestal kleine) commissie van de verkoper. Wij geven altijd onze eerlijke mening over producten. Klik hier voor meer informatie.

Afbeeldingen vind je op heel veel plaatsen in websites; in de achtergrond, in de header, in het ontwerp (grafische elementen ter ondersteuning van het visuele ontwerp) en binnen de content. In de klassieke editor kon er een afbeelding ingevoegd worden in de tekst en de uitlijning ingesteld worden. Ook was het mogelijk een eenvoudige galerij op te maken vanuit de mediabibliotheek. Binnen het Afbeelding blok zijn deze mogelijkheden nog steeds aanwezig, maar zijn er nog veel meer mogelijkheden toegevoegd. Zo is de galerij nu een apart blok geworden met veel meer mogelijkheden die we vaak ook wel kennen van page builders zoals Elementor en Divi.

We behandelen nu de blok types voor het opmaken van afbeeldingen.

TIP VAN WPLOUNGE
Divi theme & Divi Builder
Bij Elegant Themes ontvang je meer dan
85 premium WordPress themes (waaronder Divi!) voor maar 89 dollar!
Bekijk de themes »»
Lees meer over Divi.

Afbeelding

Dit blok wordt gebruikt voor het plaatsen van één afbeelding. Het toevoegen van een Afbeelding blok aan een bericht of pagina kan op een aantal verschillende manieren. Deze gaan we hier nu uitvoerig bespreken. Eerst nog even een stukje basis Gutenberg…

Een nieuw bericht of pagina begint vrijwel altijd op de volgende manier, voor de Afbeelding kun je ook een ander blok naar keuze invullen.

Zo ziet een nieuw bericht of pagina eruit
3 manieren om een Afbeelding blok in te voegen met de inserter
Klik op het veld en typ ‘/’ . Typ ‘Afbeelding’ indien het niet in de lijst voorkomt
  • De eerste manier is die zoals hierboven aangegeven, namelijk met de WordPress inserter. Een afbeelding voeg je toe door
    – in een Alinea blok een ‘/’ in te typen;
    – óf op het ‘+’ teken rechts naast het Alinea blok;
    – óf op het ‘+’ teken rechts naast het WordPress logo helemaal bovenin de linkerhoek van het browser scherm te klikken.
    In alle gevallen kun je daarna het blok ‘Afbeelding’ selecteren en invoegen. Daarna kun je met één van de buttons op het blok een afbeelding uploaden, invoegen via de Mediabibliotheek of Invoegen via URL. Daarover zo meer.
  • Een afbeelding vanaf elders kopiëren en plakken (Ctrl-C->Ctrl-V).
  • Een afbeeldingbestand slepen vanuit de Windows file explorer of Apple finder.

Afbeelding bestand toevoegen

Bij rechtstreeks slepen of plakken converteert het Alinea blok automatisch naar een Afbeelding blok. Door de afbeelding te slepen naar of te plakken in de editor wordt de link naar het bronbestand meegenomen. Dit betekent, dat de bronafbeelding altijd beschikbaar moet zijn voor je site. Staat de afbeelding op je harde schijf, dan zal jouw website het bronbestand vanaf het internet niet kunnen benaderen en wordt de afbeelding niet getoond (gebroken afbeelding). Staat de bron ergens op het internet, dan gaat het in de eerste instantie wel goed, maar als de bronafbeelding wordt verwijderd op de bronwebsite, heb je een probleem. Dan wordt er op jouw site ook een gebroken link getoond van de afbeelding.

Toevoegen Afbeelding blok door slepen bestand vanuit file explorer

Uploaden

Met de knop Uploaden kun je een afbeelding in één actie uploaden naar de Mediabibliotheek en tegelijk in bericht of pagina plaatsen. Het uploaden naar de Mediabibliotheek zelf wordt op de achtergrond gedaan. De afbeelding is daarna ook gelijk beschikbaar. Bestond de afbeelding al in de Mediabibliotheek? Dan maakt hij een nieuw bestand aan met -n erachter, waarbij n het volgnummer is.

Mediabibliotheek

Dit is de reeds bekende manier zoals in de Klassieke editor ook een afbeelding vanuit de Mediabibliotheek kan worden ingevoegd. Hier ga ik dan ook verder niet over uitweiden. Wil je meer weten over de Mediabibliotheek, dan kun je ons artikel (nog eens) lezen over Afbeeldingen bewerken in de mediabibliotheek.

Invoegen via URL

Heb je een URL van een afbeelding die je graag wilt invoegen? Dan kan dat op deze manier. Let er wel op dat je geen inbreuk maakt op het copyright dat op de meeste afbeeldingen rust. Ook moet de bron van de afbeelding (de andere site) altijd beschikbaar zijn anders valt de afbeelding weg.

De afbeelding instellingen

Heb je een afbeelding uitgekozen en geplaatst op één van bovenstaande manieren, dan ziet het er ongeveer zo uit:

Werkbalk (toolbar) instellingen

Via de werkbalk boven het Afbeelding blok kun je de volgende wijzigingen aanbrengen.

  1. Geeft het blok type aan; gebruik deze button om de afbeelding te converteren naar bijvoorbeeld een galerij of cover afbeelding.
  2. Uitlijning en breedte; stel hiermee de uitlijning in of kies een wijde of volledige breedte van de afbeelding.
  3. Kies een URL waarnaar de afbeelding moet linken.
  4. Bijsnijden, je komt nu in een sub-werkbalk terecht met van links naar rechts de volgende knoppen:

Van links naar rechts:

Sub-werkbalk Bijsnijden

  1. Bloktype
  2. Uitlijning & breedte
  3. Tekst over de afbeelding plaatsen; let op, hierdoor wordt de afbeelding geconverteerd naar een Cover blok
  4. In- of uitzoomen
  5. Aspect ratio veranderen met vaste waarden
  6. Afbeelding draaien
  7. Toepassen; vergeet niet hierop te klikken anders worden de wijzigingen niet doorgevoerd
  8. Annuleren maakt de wijzigingen ongedaan en gaat terug naar de ‘oude’ afbeelding
  9. Opties, algemene blokopties

De blok instellingen

Deze afbeelding heeft een leeg alt-attribuut; de bestandsnaam is image-6.png

Stijlen
Afhankelijk van je Theme zijn er verschillende stijlen beschikbaar om uit te kiezen.

Afbeelding instellingen
De Alt tekst (alternatieve tekst) moet gevuld worden met een beschrijvende tekst van de afbeelding als deze deel uitmaakt van de content. Bij een sfeerafbeelding hoeft dat niet. Dit is belangrijk voor Google dus vergeet dit niet!
Bij Grootte afbeelding kies je uit de de vooraf gedefinieerde waarden uit de dropdown, of typ zelf een Breedte en Hoogte in onder het kopje Afbeelding omvang. Een andere mogelijkheid is om de afbeelding direct te schalen naar 25, 50, 75 of 100% met de daaronder aanwezige 4 buttons.

Er is nog een uitklapje Geavanceerd met daarin HTML gerelateerde opties. Deze laten we voor nu nog even links liggen.

Type 1: Cover (omslagafbeelding)

De Omslagafbeelding (het blok wordt in de inserter ‘Cover’ genoemd) is een speciaal type Afbeelding blok. De naam zegt het al, het wordt gebruikt als omslag of header van een artikel. Deze afbeelding geeft een visuele indruk van wat de lezer kan verwachten in het artikel en geeft ook vaak de titel van het artikel weer als tekst over de foto. Om de tekst te verduidelijken wordt de foto meestal wat gedimd door een doorschijnende (instelbare) gekleurde laag tussen de afbeelding en de tekst toe te voegen. Na invoegen van een Cover afbeelding op inmiddels één van de bekende manieren, wordt de afbeelding getoond met een doorschijnende donkergrijze laag met een overlay tekst. De overlay tekst bestaat uit een Alinea blok. Dit betekent dat wat er met een Alinea blok mogelijk is, ook binnen overlay tekst van de Omslagafbeelding mogelijk is.

De overlay tekst is een standaard Alinea blok

Werkbalk (toolbar) instellingen

De eerste twee buttons in de werkbalk mogen inmiddels als bekend worden beschouwd;

  1. Het blok type;
  2. De uitlijning / breedte;
  3. De positie van de tekst; keuze uit 9 posities in de afbeelding;
  4. Volledige hoogte aan- en uitzetten. Bij aanzetten beslaat de afbeelding de volledige hoogte van het bevattende element;
  5. Vervangen-knop om de afbeelding te vervangen op de bekende manier.

Blok instellingen

Vaste achtergrond

Dit geeft een parallax effect door de achtergrond afbeelding vast te zetten bij het scrollen.

Herhaalde achtergrond

Achtergrond wordt doorlopend herhaalt in de originele afmetingen. Zet je dit uit, dan wordt de volledige achtergrond opgevuld met een geschaalde versie.

Focuspunt kiezer

Bepaalt het middelpunt van focus. Bij verandering van uitsnede wordt hierdoor het middelpunt bepaald.

Minimale hoogte cover

Aantal pixels dat de afbeelding minimaal hoog moet zijn.

Ondoorzichtigheid

Percentage transparantie van de bedekkingslaag. 50% ondoorzichtigheid wil ook zeggen 50% doorzichtigheid. De transparantie is dan altijd 100 – dit getal. In dit blok kun je ook een (aangepaste) kleur en een eventueel verloop instellen. Dit kennen we al van eerdere instellingen.

Type 2: Galerij

Een galerij is eigenlijk een container van meerdere afbeeldingen met speciale eigenschappen. Veel galerijen hebben functies als paginering en zaken die je bij een foto album kunt voorstellen. Tot op heden is een galerij in WordPress ook in Gutenberg nog vrij beperkt. Het is eigenlijk een uitgebreide versie van het Kolommen blok dat later nog wordt besproken. Stel je het aantal kolommen in op bijvoorbeeld 2 terwijl er drie foto’s aanwezig zijn, dan wordt de laatste foto over twee kolommen gespreid. Zo krijg je altijd een gelikte presentatie van je galerij. Mocht dit niet passend zijn, dan kun je altijd nog het Kolommen blok gebruiken om handmatig je gewenste presentatie wijze van meerder afbeeldingen op te maken.

Gebruik Uploaden of de Mediabibliotheek om een afbeelding toe te voegen aan de Galerij. Deze komt er dan zo uit te zien:

Werkbalk (toolbar) instellingen

In de werkbalk is er maar één instelling beschikbaar en dat is de uitlijning en wijdte. Experimenteer hiermee om te bepalen wat het precies doet voor je pagina.

Blok instellingen

Een galerij heeft altijd meerdere afbeelding, anders is het niet nodig om hem te gebruiken. We voegen nog een tweede afbeelding toe om ook de opties voor meerdere afbeeldingen te laten zien. Let op dat Afbeeldingen bijsnijden aan staat. De afbeeldingen vullen nu netjes de kolommen en zijn automatisch waar nodig bijgesneden. Zet je dit uit, dan kun je grote verschillen krijgen in formaat van de afbeelding, afhankelijk van de originele grootte.

Zodra er meerdere afbeeldingen in de galerij staan verschijnt de optie Kolommen. Hiermee kan het aantal kolommen worden ingesteld. De weergave verandert direct mee bij het wijzigen. De knop Afbeeldingen bijsnijden zorgt ervoor dat ze passend worden gemaakt naar het omliggende element en zorgt ervoor dat afbeeldingen automatisch worden bijgesneden. Linken naar en Grootte afbeelding zijn instellingen die we inmiddels al kennen van het Afbeelding blok zelf. Voor Geavanceerd geldt weer hetzelfde als hiervoor.

Hieronder zie je het resultaat als je Afbeeldingen bijsnijden uit zet:

Type 3: Kolommen afbeeldingen

Het Kolommen blok is eigenlijk geen afbeelding, maar een Afbeelding blok kan er wel naar geconverteerd worden. Het wordt normaal gebruikt om tekst netjes in kolommen te plaatsen, maar wordt ook vaak gebruikt om afbeeldingen in bijvoorbeeld een rij of grid (meerdere rijen) uit te lijnen. Het wordt gebruikt als je niet alle opties van een galerij nodig hebt maar wel meerdere afbeeldingen op een nette album-achtige manier wilt presenteren. Vandaar dat we het Kolommen blok hier ook bepreken.

Werkbalk (toolbar) instellingen

Blok instellingen

Bij de blok instellingen van het Kolommen blok zijn er diverse mogelijkheden om de Kleur instellingen aan te passen, zoals ook in de screenprint onder te zien is. Ook is het hierbij mogelijk om een verloop te maken in de achtergrond en om aangepaste kleuren met een kleurenkiezer te selecteren. De belangrijkste instelling is het aantal Kolommen. Stel deze in op twee of meer kolommen en je kunt in elke kolom een afbeelding toevoegen. Ook kun je de horizontale en verticale uitlijning instellen in de werkbalk.

Per kolom zijn de instellingen nog beperkt; je kunt in de werkbalk de verticale uitlijning instellen en in de blok instellingen de breedte van de kolom in procenten.

Type 4: Groep

Met een groep kun je alle soorten blokken in een groep plaatsen. Het voordeel is dat je de groep blokken bijvoorbeeld samen als één herbruikbare blok kunt opslaan. Een groep heeft zelf niet veel instellingen, eigenlijk alleen de tekst- en achtergrond kleur. Hieronder vind je een voorbeeld van een Groep blok met header tekst, twee afbeeldingen (in kolommen) en nog een paragraaf tekst:

gutenberg-groep-afbeelding

Conclusie

Na het uitgebreid uitzoeken van de werking en de mogelijkheden van het Afbeelding blok kan ik concluderen dat er heel veel mogelijkheden zijn bijgekomen met de Gutenberg editor om afbeeldingen te plaatsen en te customizen. De werkwijze vergt nog wel enige gewenning en is hier en daar nog niet helemaal logisch of eenduidig. Soms komen er kleine bugs aan het licht. Dat is op zich ook wel logisch bij zo’n nieuw product. De werking van de Gutenberg editor is deels bekend en komt overeen met hoe andere page builders werken. Maar het is toch net even anders. Wij raden je aan om er gewoon mee aan de slag te gaan om alle opties en mogelijkheden te verkennen!

Roger.Overdevest

Roger is eigenaar van de website WPLounge en van zoekmachine marketing bureau Kliq Internet

Reageer

Partners

de snelste en beste wordpress webhosting