Wanneer je van WordPress thema wisselt, kan het zijn dat je bestaande afbeeldingen niet meer de juiste grootte hebben.

De oplossing voor WordPress? Thumbnails regenereren. Dit betekent dat je de afbeeldingsafmetingen opnieuw instelt in de instellingen van de WordPress core. Met een plugin kan je dit heel snel doen.

In dit artikel gaan we uitgebreider in op hoe je in WordPress thumbnails opnieuw genereert en laten we je zien hoe je problemen met afbeeldingen kan oplossen met de WordPress plugin Regenerate Thumbnails of handmatig met WP-CLI.

Laten we beginnen!

Wat er met je afbeeldingen gebeurt

Voordat we je gaan uitleggen hoe je thumbnails opnieuw genereert in WordPress, is het essentieel om te begrijpen hoe WordPress omgaat met afbeeldingen en afbeeldingsafmetingen.

WordPress bevat instellingen die automatisch afbeeldingen bijsnijden wanneer je ze uploadt. Deze instellingen kan je vinden in het beheerdersdashboard onder Instellingen > Media.

WordPress snijdt automatisch je afbeeldingen bij.
WordPress snijdt automatisch je afbeeldingen bij.

Op de pagina Media-instellingen kan je “Thumbnailgrootte”, “Gemiddelde afmeting” en “Grote afmeting” vinden. Hier kan je het aantal pixels voor elk ervan bijwerken.

Vergeet niet om onderaan de pagina op Wijzigingen opslaan te klikken als je de afmetingen hebt bijgewerkt.

Hier zijn de standaardafmetingen:

  • Thumnails – 150px x 150px
  • Gemiddelde afmeting – 600px x 600px
  • Grote afmeting – 1024px x 1024px

Houd er rekening mee dat het thema dat jij gebruikt mogelijk specifieke afmetingen heeft voor afbeeldingen. Deze overschrijven de instellingen op de Media-instellingen pagina. Als je overschakelt naar een nieuw thema, worden deze instellingen bijgewerkt naar de afmetingen die het nieuwe thema gebruikt.

Maar oudere afbeeldingen die je eerder hebt geüpload, worden hierdoor niet beïnvloed.

En dit kan wel eens voor problemen zorgen. Je zal dus de afbeeldingen die je al eerder hebt geüpload, moeten kunnen aanpassen, zodat ze overeenkomen met de afmetingen van het nieuwe thema. Maar helaas zijn er geen instellingen waarmee je dit kan doen.

De oplossing? Je zal thumbnails moeten regenereren, zoals ze dit zo mooi noemen.

Hoe verander ik in WordPress de afmetingen van thumbnails? (3 methodes)

Voordat we gaan kijken naar hoe je thumbnails in WordPress regenereert, is het belangrijk om de verschillende manieren te bespreken waarop je in het WordPress dashboard de afmetingen van afbeeldingen kan wijzigen.

Maar wellicht nog belangrijk om op te merken, is dat deze oplossingen niet noodzakelijkerwijs de afmetingen van oude afbeeldingen wijzigen. Je zal dus nog steeds WordPress moeten openen en de thumbnails moeten regenereren, zonder de hulp van een plugin of met behulp van een.

Als je de afmeting van een thumbnail of afbeelding wil wijzigen, zijn er drie manieren om dit te doen:

1. De afmetingen van afbeeldingen wijzigingen in je thema

Omdat je WordPress thema de standaard afbeeldingsafmetingen kan wijzigen, kan je ervoor kiezen om van thema te wisselen. Ook kan je kijken of er instellingen beschikbaar zijn die specifiek opgesteld zijn voor het aanpassen de afbeeldingsafmetingen.

Elk thema is weer anders, dus zorg ervoor dat je de bijbehorende documentatie raadpleegt om te zien of er een manier is om de afbeeldingsgroottes binnen je thema te wijzigen zonder een ander thema te installeren.

Ook kan je ervoor kiezen om een child-thema aan te maken of de afbeeldingsafmetingen met PHP code te wijzigen.

2. Afbeeldingen bijsnijden in de mediabibliotheek

Een andere optie is om de grootte van je afbeeldingen te wijzigen door ze bij te snijden (croppen) in de Mediabibliotheek.

Stap 1

Ga je Media > Bibliotheek in het WordPress beheerdersdashboard.

Je kan de afbeeldingsgrootte wijzigen in de Mediabibliotheek.
Je kan de afbeeldingsgrootte wijzigen in de Mediabibliotheek.

Klik vervolgens op een weergegeven afbeelding waarvan je de afmetingen wil wijzigen.

In de pop-over klik je vervolgens op de knop Afbeelding bewerken.

Klik op de knop onder de afbeelding om deze te bewerken.
Klik op de knop onder de afbeelding om deze te bewerken.

Stap 2

Hier heb je verschillende mogelijkheden om de afbeelding te bewerken.

Je kan op de afbeelding klikken en je muis over de afbeelding slepen. Hiermee selecteer je een gebied dat je wil behouden. Je kan nu de muisknop weer loslaten. Klik nu op Bijsnijden.

Als je de afbeeldingen nauwkeuriger wil bijsnijden, dan kan je de beeldverhouding aanpassen door de gewenste verhouding in te voeren.

Je kan bijvoorbeeld 1:1 om een vierkant te maken of je kan 4:3, 16:9 of elke andere gewenste verhouding gebruiken.

Houd vervolgens de shift-toets in gedrukt terwijl je met je muis over de afbeelding sleept. Laat los als je het deel van de afbeelding hebt geselecteerd dat je wil behouden. Je kan erop klikken en de selectie verplaatsen zodat je het exacte deel van de afbeelding kan bijsnijden dat je nodig hebt.

Ook kan je op de hoeken van de klikken en slepen als je in eerste instantie niet de afbeeldingsgrootte kreeg die je wilde.

Ook kan je een selectie maken en vervolgens de exacte gewenste grootte van de afbeeldingen in pixels invoeren in het veld Selectie onder Afbeelding bijsnijden aan de rechterkant.

Als je klaar bent, klik op Bijsnijden en vervolgens op de knop Opslaan.

Stap 3

Als je de afbeelding liever een andere afmeting geeft in plaats van deze bijsnijdt, dan kan je in de instellingen aan de rechterkant de afbeelding schalen.

Voer de gewenste grootte van de afbeelding in en klik op Schalen.

Je hebt verschillende opties om de afmetingen van je afbeelding te wijzigen.
Je hebt verschillende opties om de afmetingen van je afbeelding te wijzigen.

Stap 4

Onder Thumbnail-instellingen kan je kiezen op welke standaard afbeeldingen je de wijzigingen wil toepassen.

Je kan ervoor kiezen om ze toe te passen op:

  • Alle afbeeldingsafmetingen
  • Thumbnails
  • Alle formaten, behalve de thumbnail

3. De afmetingen van afbeeldingen wijzigen in Media-instellingen

Dit is met name handig als je slechts een of twee afbeeldingen wil bewerken, maar als je de afmetingen van al je afmetingen wil wijzigen, dan kan je dit beter via de instellingenpagina doen.

Stap 1

Ga in je beheerdersdashboard naar Instellingen > Media.

Hier kan je de standaard afbeeldingsafmetingen wijzigingen op de pagina Media-instellingen.
Hier kan je de standaard afbeeldingsafmetingen wijzigingen op de pagina Media-instellingen.

Stap 2

Voer de nieuwe afmetingen in die je wil voor alle thumbnails, gemiddelde afmetingen of grote afmetingen. Voer de gewenste breedte en hoogte in voor slechts één type afbeelding of, indien nodig, voor alle afbeeldingen.

Als je de afmetingen van thumbnails aan wil passen naar een afmeting dat niet in verhouding is, selecteer dan het vakje Thumbnail aanpassen aan vermelde afmetingen die je onder de sectie Thumbnailgrootte vindt.

Stap 3

Vervolgens kan je het vakje Uploads bewaren in mappen op basis van maand en jaar selecteren als je niet wil dat al nieuwe afbeeldingen ongeorganiseerd in de uploads map terecht komen.

Wanneer je tevreden bent met je wijzigingen, klik je op Wijzigingen opslaan knop onderaan de pagina.

Zo regenereer je thumbnails in WordPress

Nadat je deze instellingen hebt gewijzigd of van thema hebt gewisseld, moet je de thumbnails regenereren die nog niet zijn bijgewerkt op het openbare gedeelde van je site – zoals we eerder al aangaven.

Een van de makkelijkste manieren om dit te doen is door de gratis WordPress plugin Regenerate Thumbnails te gebruiken, waarmee je makkelijk eerde geüploade afbeeldingen bijwerkt.

Deze plugin is ook compatibel met WooCommerce.

Stap 1

Installeer en activeer om te beginnen de plugin Regenerate Thumbnails.

Ga vervolgens naar Gereedschap > Regenerate Thumbnails, waar je alle instellingen vindt voor WordPress afbeeldingen.

Ook kan je hier thumbnails, middelgrote en grote afbeeldingsafmetingen opnieuw genereren.
Ook kan je hier thumbnails, middelgrote en grote afbeeldingsafmetingen opnieuw genereren.

Stap 2

Standaard is de optie Skip regenerating existing correctly-sized thumbnails aangevinkt. Schakel dit selectievakje uit om de plugin Regenerate Thumbnails alle afbeeldingen aan te laten passen.

Als je wil besparen op serverresources, laat je deze aangevinkt.

Dit wordt aanbevolen als je al enkele afbeeldingsafmetingen hebt bijgewerkt, bijvoorbeeld via je thema. Ook kan je ervoor kiezen om het vakje eronder aan te vinken om oude thumbnailbestanden te verwijderen voor oude niet-geregistreerde afmetingen (Delete thumbnail files for unregistered sizes). Hiermee wordt er ruimte op je server vrijgemaakt.

Zorg ervoor dat je zeker weet dat je deze afbeeldingen niet nodig hebt, voordat je deze instelling kiest. Als sommige van deze afbeeldingen in gebruik zijn op je site en je selecteert deze optie, dan worden ze verwijderd en niet langer op je site weergegeven. Bezoekers krijgen dan een niet-werkende afbeelding te zien.

Mogelijk wil je ook naar het vakje Update the content of posts to use the new sizes aanvinken, als je wil dat afbeeldingen die je momenteel gebruikt in je berichten, worden bijgewerkt.

Stap 3

Nadat je de gewenste opties hebt gekozen, klik je op de knop Regenerate Thumbnails, om de thumbnails, gemiddelde, grote en nieuwe bestandsgroottes opnieuw te genereren.

Wacht vervolgens tot het proces is voltooid. Afhankelijk van het aantal afbeeldingen dat je op je site hebt, kan dit even duren. Pak gerust een bakje koffie of glas water terwijl je wacht. Het duurt meestal maar een paar minuten voor grotere websites op een high-performance server.

Je ziet het bericht “All done!” wanneer het proces is voltooid.

Dat was het.

Je thumbnails en afbeeldingen zouden nu opnieuw gegenereerd moeten worden.

Zo forceer je het regenereren van thumbnails

Als alternatief kan je de plugin Force Regenerate Thumbnails gebruiken. Zoals de naam aangeeft, forceert het de regeneratie van thumbnails door oude afbeeldingsafmetingen te verwijderen, wat WordPress dwingt om de afbeeldingen opnieuw te genereren. De plugin is ook compatibel met WooCommerce online winkels.

Houd er rekening mee dat deze plugin – op het moment van publicatie – al 3 grote releases niet is bijgewerkt, dus gebruik deze met de nodige voorzichtigheid. Zorg dat je deze in een staging of lokale testomgeving test, voordat je het op je live site gebruikt.

De reden waarom je deze plugin zou moeten gebruiken in plaats van de plugin Regenerate Thumbnails, is dat de laatstgenoemde alleen de grootte van de afbeeldingen wijzigt, en dus niet de oude afbeeldingsafmetingen verwijdert, tenzij je deze optie aanvinkt.

Als je hierbij tegen problemen aanloopt, dan kan je Force Regenerate Thumbnails eens proberen.

Stap 1

Om WordPress te dwingen thumbnails te regenereren, moet je de plugin Force Regenerate Thumbnails installeren en activeren.

Ga vervolgens naar Tools > Force Regenerate Thumbnails in het WordPress beheerdersdashboard.

Je kan het regenereren van thumbnails forceren met een klik.
Je kan het regenereren van thumbnails forceren met een klik.

Stap 2

Om alle afbeeldingen met de oude instellingen te verwijderen en WordPress te dwingen thumbnails opnieuw te genereren, klik je op de knop Regenerate All Thumbnails.

Nu moet je even wachten, terwijl je afbeeldingen worden aangepast. Als je een kleinere site hebt, is dit in mum van tijd gebeurd. Voor grotere sites met veel afbeeldingen kan dit een aantal minuten duren.

Specifieke afbeeldingen opnieuw genereren

Er kunnen situaties zijn waarin je niet al je thumbnails opnieuw hoeft te genereren, maar alleen een aantal specifieke. Ook dit kan je doen met de Regenerate Thumbnails plugin. Dit is hoe je dat doet.

Stap 1

Ga naar Media > Bibliotheek. Klik in de rasterweergave op een specifieke afbeelding.

Standaard staat de Mediabibliotheek in rasterweergave.
Standaard staat de Mediabibliotheek in rasterweergave.

Stap 2

Klik vervolgens aan de rechterkant op de knop Regenerate Thumbnails.

Je kan de thumbnails regenereren in de bijlagedetails.
Je kan de thumbnails regenereren in de bijlagedetails.

Wanneer je de Mediabibliotheek in de lijstweergave bekijkt, klik je op de link Regenerate Thumbnails nadat je de cursor op de afbeelding hebt geplaatst die je opnieuw wil genereren.

Klik op de link om thumbnails opnieuw te genereren in de lijstweergave.
Klik op de link om thumbnails opnieuw te genereren in de lijstweergave.

Thumbnails regenereren met WP-CLI

Als je liever geen plugin gebruikt, dan is er een andere oplossing binnen WordPress om zonder plugin thumbnails te regenereren. Je kan dit namelijk ook doen met WP-CLI.

Hou er rekening mee dat je toegang moet hebben tot de opdrachtregel van je server voor deze optie.

Het opnieuw genereren van thumbnails met WP-CLI is een veel betere optie dan het gebruik van een WordPress plugin omdat het sneller is en niet onderhevig is aan HTTP beperkingen en time-outs.

Het basiscommando om thumbnails te regenereren vind je hieronder:

wp media regenerate

Nadat je het hebt ingevoerd, moet je nu bevestigen dat je alle thumbnails opnieuw wil genereren door op de letter “y” (voor “yes”) op je toetsenbord te drukken.

Alle thumbnails regenereren met WP-CLI

Zodra je de opdrachtregel hebt opgestart, kan je het volgende commando voor WordPress gebruiken om zonder plugin – binnen enkele seconden – thumbnails opnieuw te genereren.

wp media regenerate --yes

Met deze opdracht worden thumbnails opnieuw gegenereerd zonder dat je dit handmatig hoeft te bevestigen.

Specifieke thumbnails regenereren met WP-CLI

Je kan met WP-CLI ook specifieke thumbnails regenereren door gebruik te maken van de ID’s van de afbeeldingen die je wil bijwerken.

Dit is het commando om dat te doen:

wp media regenerate 12 34 567

Zorg er natuurlijk wel voor dat je de drie voorbeeld ID’s – “12”, “34”, en “567” – vervangt door de daadwerkelijke ID’s van de afbeeldingen die je wil regenereren.

Je kan zoveel ID’s toevoegen als je wil. Zorg er wel voor dat je ze van elkaar scheidt met een spatie.

Samenvatting

Het kan frustrerend zijn om te zien dat je afbeeldingen niet correct worden weergegeven wanneer je van thema wisselt.

Gelukkig zijn er twee makkelijke en snelle oplossingen voor WordPress. Het kan met een paar klikken worden gedaan met behulp van de plugin Regenerate Thumbnails. Of je kan WP-CLI gebruiken om het voor elkaar te krijgen – sneller dan de tijd die nodig is om een bakje koffie te zetten.

Brian Li

Brian gebruikt WordPress al meer dan 10 jaar en deelt zijn kennis graag met de community. In zijn vrije tijd speelt Brian graag piano en verkent hij Tokio met zijn camera. Kom in contact met Brian op zijn website brianli.com.