Afbeeldingen en andere mediabestanden zijn een belangrijk onderdeel van elke WordPress website. Om ze effectief te gebruiken, helpt het om een goed idee te hebben van hoe de WordPress mediabibliotheek werkt.

Met deze handige WordPress functie kan je je afbeeldingen en andere media opslaan en beheren. Met de juiste kennis en een aantal simpele trucs kan je via je mediabibliotheek je site vrij makkelijk verbeteren.

In deze uitgebreide handleiding gaan we je alles vertellen over de WordPress mediabibliotheek, waaronder het importeren en downloaden van content. Ook gaan we het hebben over het bewerken van afbeeldingen, hoe je voor de lange termijn bestanden beheert en vier hacks over hoe je een aantal geavanceerde functionaliteiten kan inzetten.

Laten we beginnen!

Een inleiding tot de WordPress mediabibliotheek

De belangrijkste taak van de WordPress mediabibliotheek wordt al enigszins weggegeven door de naam: het is een catalogus van alle mediabestanden die je naar je site hebt geüpload:

WordPress mediabibliotheek

WordPress mediabibliotheek

WordPress kan verschillende soorten media hosten, waaronder:

Ook biedt het (beperkte) mogelijkheden voor fotobewerking, zodat je rechtstreeks vanuit je dashboard aanpassingen kan aanbrengen.

Om bij de mediabibliotheek te komen, klik je op Media in de beheerderszijbalk:

De WordPress mediabibliotheek openen

De WordPress mediabibliotheek openen

There are a few basic options available here.

Ten eerste kan je bepalen of je je bestanden in een lijst of in rasterweergave wil zien. Dit doe je door op de bijbehorende iconen te klikken:

Weergave-opties WordPress mediabibliotheek

Weergave-opties WordPress mediabibliotheek

Ook kan je je bestanden filteren met behulp van de dropdown-menu’s:

Filteren van bestanden in de WordPress mediabibliotheek

Filteren van bestanden in de WordPress mediabibliotheek

In het eerste menu kan je je media bekijken per type, terwijl het tweede de inhoud van je bibliotheek filtert op de datums waarop ze zijn geüpload.

Ook kan je de zoekbalk gebruiken om naar specifieke bestanden te zoeken:

Zoekbalk van WordPress mediabibliotheek

Zoekbalk van WordPress mediabibliotheek

Ten slotte is er ook nog de knop Bulkselectie. Met deze functie kan je meerdere bestanden tegelijkertijd uit de WordPress installatie verwijderen:

Bulkselectie optie in de WordPress mediabibliotheek

Bulkselectie optie in de WordPress mediabibliotheek

Dit waren de ingebouwde functionaliteiten die je op de pagina van de WordPress mediabibliotheek kan vinden.

Zoals je verderop in dit artikel zal zien, zijn er veel wijzigingen die je kan aanbrengen om ze te verbeteren. Maar voordat we het hierover gaan hebben, gaan we uitleggen hoe je bestanden aan WordPress kan toevoegen.

✨ Afbeeldingen zijn krachtige hulpmiddelen om meer te verkopen en om meer in contact te komen met je gebruikers. Leer alles wat je moet weten over de WordPress mediabibliotheek 📸Click to Tweet

Bestanden toevoegen aan je WordPress mediabibliotheek

Er zijn een aantal verschillende manieren waarop je bestanden aan je WordPress mediabibliotheek kan toevoegen. De eerste is manier is door naar Media > Nieuwe toevoegen te gaan:

De WordPress media-uploader

De WordPress media-uploader

Hier kan je bestanden uploaden die zijn opgeslagen op je computer of ander apparaat:

WordPress media-uploader

WordPress media-uploader

Ook kan je mediabestanden rechtstreeks vanuit de WordPress editor toevoegen. In de blok-editor moet je eerst het juiste blok vinden voor het type media dat je wil toevoegen:

WordPress mediablokken

WordPress mediablokken

In de placeholder die je nu te zien krijgt, selecteer je Upload en kies je een bestanden op je computer:

Media uploaden vanuit de blok-editor

Media uploaden vanuit de blok-editor

Een makkelijk alternatief is een simpele drag-and-drophandeling door het bestand rechtstreeks van je desktop naar het bijbehorende blok te slepen.

In de klassieke editor moet je op de Media toevoegen knop klikken:

De knop Media toevoegen in de klassieke editor

De knop Media toevoegen in de klassieke editor

Ga vervolgens naar het tabblad Uploaden en selecteer een bestand op je computer:

Media uploaden vanuit de klassieke editor

Media uploaden vanuit de klassieke editor

Ook hier kan je rechtstreeks bestanden verplaatsen door middel van een drag-and-drophandeling.

In sommige gevallen is het nodig om handmatig mediabestanden via FTP naar je WordPress site te uploaden. Dit kan je doen met een client zoals FileZilla.

Zodra je verbonden bent met je server, ga je naar wp-content > uploads:

Bestanden uploaden naar de WordPress mediabibliotheek map via FileZilla

Bestanden uploaden naar de WordPress mediabibliotheek map via FileZilla

Upload je bestanden naar deze map om ze toe te voegen aan je mediabibliotheek.

Content downloaden uit de WordPress mediabibliotheek

In sommige gevallen is het nodig om bestanden uit je mediabibliotheek naar je computer te downloaden. WordPress heeft hier een ingebouwde functie voor. Je kan deze openen via Gereedschap > Exporteren:

WordPress exporttool

WordPress exporttool

Selecteer vervolgens de optie Media. Als je alleen bestanden nodig hebt die binnen een specifiek tijdsbestek zijn geüpload, dan kan je hiervoor de drop-downmenu’s gebruiken:

WordPress media exporteren

WordPress media exporteren

Klik ten slotte op de knop Exportbestand downloaden. Hiermee download je de door jou opgegeven bestanden naar je computer.

Afbeeldingen bewerken in de WordPress mediabibliotheek

Zoals we eerder vermeldden, heeft WordPress een aantal ingebouwde bewerkingsfeatures. Om hiervan gebruik te maken, ga je naar de WordPress mediabibliotheek en selecteer je het bestand dat je wil bewerken. Klik vervolgens op de knop Afbeelding bewerken:

De knop Afbeelding bewerken in WordPress

De knop Afbeelding bewerken in WordPress

Hiermee open je de afbeeldingseditor:

WordPress afbeeldingseditor

WordPress afbeeldingseditor

Er zijn vijf basisbewerkingen die je kan aanbrengen:

Bijsnijden stelt je in staat om delen van de afbeelding uit te knippen:

Afbeelding bijsnijden in WordPress

Afbeelding bijsnijden in WordPress

Roteren stelt je in staat om de afbeelding 90 graden (linksom of rechtsom) te draaien:

Afbeelding naar links roteren in WordPress

Afbeelding naar links roteren in WordPress

Spiegelen zorgt ervoor dat je de afbeelding horizontaal of verticaal spiegelt:

Horizontaal spiegelen in WordPress

Horizontaal spiegelen in WordPress

De overige drie instellingen kan je vinden in de zijbalk. Met de eerste kan je de grootte van de afbeeldingen wijzigen door deze te schalen. Het enige wat je hoeft te doen is de door jou gewenste hoogte en breedte op te geven en het andere veld wordt automatisch ingevuld. Klik vervolgens op de knop Schalen:

Een afbeelding schalen in WordPress

Een afbeelding schalen in WordPress

Het is belangrijk op te merken dat het schalen van een afbeelding in WordPress soms de kwaliteit negatief kan beïnvloeden.

Bovendien kan je alleen grote bestanden gebruiken om ze kleiner te schalen. Je kan afbeeldingen niet schalen naar een groter formaat!

Om afbeeldingen bij te snijden zodat ze een specifieke beeldverhouding of afmeting hebben, kan je onder Afbeelding bijsnijden de velden Aspect ratio en Selectie gebruiken:

Afbeeldingen bijsnijden met de selectie in WordPress

Afbeeldingen bijsnijden met de selectie in WordPress

Als laatste vind je de Thumbnail instellingen, voor als je de bestaande afbeeldingsthumbnail wil bewaren. Je kan het keuzerondje gebruiken voor de versie van de afbeelding waarop je de wijzigingen wil toepassen:

Thumbnail instellingen in de WordPress afbeeldingseditor

Thumbnail instellingen in de WordPress afbeeldingseditor

De standaard beeldbewerkingsfeatures zijn handig, maar wel enigszins beperkt. Als je wat uitgebreidere aanpassingen wil doen, dan vervangt deze tool niet de software die je hier normaal voor zou gebruiken, helemaal wanneer je een fotografiesite of fotoblog beheert.

Begrijpen van WordPress mediabibliotheek foutmeldingen

Helaas treden er geregeld WordPress fouten op. De WordPress mediabibliotheek is hierbij geen uitzondering.

Een probleem dat vaak opduikt is een niet-gespecificeerde “HTTP fout” die kan optreden wanneer je een nieuw bestand vanuit de editor uploadt:

HTTP fout bij het uploaden van media

HTTP fout bij het uploaden van media

Meestal is het genoeg om te wachten tot deze fout is verdwenen en het na een paar minuten opnieuw te proberen. Komt de HTTP fout echter weer terug, dan kan het zijn dat je WordPress sessie is verlopen. Je zult dus opnieuw in moeten loggen en de upload opnieuw moeten proberen.

Een ander probleem waar sommige gebruikers tegenaan lopen, is dat de mediabibliotheek niet kan worden geladen. Dit wordt vaak veroorzaakt door een conflict met je plugins en/of thema. Om deze fout op te lossen, kan je proberen om al je plugins te deactiveren en over te schakelen naar een standaard WordPress thema.

Als je mediabibliotheek vervolgens wél goed laadt, dan weet je dat het probleem wordt veroorzaakt door een plugin of thema. Je kan vervolgens alles een voor een opnieuw activeren tot je de conflicterende plugin/thema hebt gevonden.

Mediabibliotheekbeheer op lange termijn

Tot dusver hebben we ons uitsluitend gericht op de ingebouwde functionaliteiten van de WordPress mediabibliotheek. Als je deze functie echter een tijdje gebruikt, dan is de kans groot dat je problemen tegenkomt en dat je vervolgens extern een oplossing moet gaan zoeken.

Hoe meer bestanden je bijvoorbeeld toevoegt, des te ongeorganiseerder je WordPress mediabibliotheek wordt. Naast de zoek- en filteropties die we eerder bespraken, is WordPress niet bijster behulpzaam wanneer je enorme hoeveelheden media op je installatie hebt staan.

Er zijn, gelukkig, een aantal plugins waarmee je je mediabestanden kan rangschikken in mappen.

WordPress Media Library Folders is qua plugin de meest populaire optie:

WordPress Media Library Folders WordPress plugin

WordPress Media Library Folders WordPress plugin

Naast dat de plugin het mogelijk maakt om mappen voor je mediabestanden te maken, integreert deze ook met MaxGalleria zodat je direct vanuit de mediabibliotheek afbeeldingengalerijen kan maken:

WordPress Gallery MaxGalleria WordPress plugin

WordPress Gallery MaxGalleria WordPress plugin

Een upgrade naar WordPress Media Library Folders Pro biedt extra integratie met de NextGEN Gallery plugin en Advanced Custom Fields. Ook kan je met deze plugin categorieën en tags aanmaken om je bestanden nog verder te ordenen.

Een andere functionaliteit die WordPress mist, is de mogelijkheid om mediabestanden te vervangen door nieuwe versies. Omdat dit soort bestanden vrij groot kunnen zijn, wil je niet nieuwe blijven toevoegen wanneer je je inhoudt bijwerkt.

Dit betekent dat je na het uploaden van een nieuw bestand de oude versie moet lokaliseren en verwijderen. Je kan jezelf tijd besparen door de oude afbeeldingen rechtstreeks te vervangen met de plugin Enable Media Replace van ShortPixel:

Enable Media Replace WordPress plugin

Enable Media Replace WordPress plugin

Met deze plugin kan je ook meteen alle links vervangen die naar het oude bestand verwijzen. Dit is handig om niet-werkende mediabestanden op je site te voorkomen.

4 handige WordPress mediabibliotheek hacks

De WordPress mediabibliotheek voldoet aan de meeste vereisten die de gemiddelde sitebeheerder heeft. WordPress biedt echter ook een aantal functies en hooks waarmee gebruikers specifieke functies van de mediabibliotheek kunnen verbeteren, zonder het gebruik van externe plugins. Laten we deze functies en hooks eens bekijken, inclusief vier praktische voorbeelden.

1. Aangepaste metadata toevoegen aan bijlage berichttypes

Elke keer als je een mediabestand uploadt, genereert WordPress een bijlage berichttype.

Net als elk ander berichttype, worden bijlagen vastgelegd in de tabel wp_posts en hun bijbehorende metadata kan je vinden in de tabel wp_postmeta van je database:

Standaard panel van details bijlage

Standaard panel van details bijlage

De tabel wp_posts slaat data op van onder meer post_content (beschrijving bijlage), post_excerpt (bijschrift bijlage), post_author, post_title, post_status en post_mime_type.

Moe van WordPress problemen en een langzame gastheer? Wij bieden ondersteuning van wereldklasse van WordPress-experts die 24/7 beschikbaar zijn en die een razendsnelle server bieden. Bekijk onze pakketten

De tabel wp_postmeta slaat alle soorten metadata op, zoals de URL van het bijgevoegde bestand, afbeeldingsafmetingen en mime-typen, en metadata van Exchangeable Image File format (EXIF) en International Press Telecommunications Council (IPTC).

Het kan voorkomen dat je aangepaste metadata wil toevoegen aan bijlagen, zoals de naam van de auteur van een document, een bijbehorende URL of locatie waar een foto is gemaakt. Het toevoegen van metavelden aan bijlagen werkt net even anders dan het toevoegen van metavelden aan berichten en vereist specifieke hooks en functies.

Eerst moet je alle benodigde aangepaste velden toevoegen aan de Media bewerken pagina. Je kan dit doen door de beschikbare bijlagevelden met de filter attachment_fields_to_edit in wp-media/includes/media.php:

function media_hacks_attachment_field_to_edit( $form_fields, $post ){

	// https://codex.wordpress.org/Function_Reference/wp_get_attachment_metadata
	$media_author = get_post_meta( $post->ID, 'media_author', true );
    
	$form_fields['media_author'] = array(
		'value' => $media_author ? $media_author : '',
		'label' => __( 'Author' )
	); 
	return $form_fields;
}
add_filter( 'attachment_fields_to_edit', 'media_hacks_attachment_field_to_edit', 10, 2 );

De function heeft twee arguments: de $form_fields array van form fields en het $post object. Eerst haalt get_post_meta de bestaande ‘media_author’ value op en vervolgens wordt een ‘media_author’ element toegevoegd aan de $form_fields array.

Ten slotte retourneert de callback $form_fields (zie de code op Gist).

Hiermee krijg je een nieuw veld te zien op de pagina Media bewerken. Deze kan je vinden door de relevante afbeeldingen te selecteren in je mediabibliotheek en op de Meer details bewerken link te klikken:

De Media bewerken pagina van WordPress openen

De Media bewerken pagina van WordPress openen

Op het scherm dat nu verschijnt, zie je je nieuwe aangepaste metadata-veld onderaan:

Nieuwe

Nieuwe “author” metadata-veld

De volgende stap is het opslaan van de gebruikersinput. Je kan dit doen door een nieuwe function te hooken aan de action edit_attachment:

function media_hacks_edit_attachment( $attachment_id ){
	if ( isset( $_REQUEST['attachments'][$attachment_id]['media_author'] ) ) {
    
		$media_author = $_REQUEST['attachments'][$attachment_id]['media_author'];
    
		update_post_meta( $attachment_id, 'media_author', $media_author );
	}
}
add_action( 'edit_attachment', 'media_hacks_edit_attachment' );

Deze function behoudt slechts één argument: de $id van het huidige mediabestand. Eerst controleert de function of er een geldige value voor het aangepaste metaveld is verstuurd. Vervolgens registreert het de value dankzij de function update_post_meta (zie de code op Gist).

Je kan je nu de value ‘media_author’ ophalen dankzij de function get_post_meta:

$media_author = get_post_meta( $post->ID, 'media_author', true );

Daarna kan je het overal in de front-end weergeven.

2. EXIF en IPTC metadata tonen op de pagina Media bewerken

WordPress slaat automatisch extended metadata op voor de mime-types JPEG en TIFF. Nu je weet hoe je velden toevoegt aan de pagina Media bewerken via media.php, kan je deze data weergeven.

Om dit te doen, moet je de eerste callback function als volgt wijzigen:

function media_hacks_attachment_fields_to_edit( $form_fields, $post ){

	// get post mime type
	$type = get_post_mime_type( $post->ID );

	// get the attachment path
	$attachment_path = get_attached_file( $post->ID );

	// get image metadata
	$metadata = wp_read_image_metadata( $attachment_path );

	if( 'image/jpeg' == $type ){

		if( $metadata ) {

			$exif_data = array(
				'aperture'          => 'Aperture', 
				'camera'            => 'Camera', 
				'created_timestamp' => 'Timestamp',
				'focal_length'      => 'Focal Length', 
				'iso'               => 'ISO', 
				'shutter_speed'     => 'Exposure Time', 
				'orientation'       => 'Orientation' );

			foreach ( $exif_data as $key => $value ) {

				$exif = $metadata[$key];
				$form_fields[$key] = array(
					'value' => $exif ? $exif : '',
					'label' => __( $value ),
					'input' => 'html',
					'html'  => "ID][$exif]' value='" . $exif . "' />
				);
			}
		}
	}
	return $form_fields;
}
add_filter( 'attachment_fields_to_edit', 'media_hacks_attachment_fields_to_edit', 10, 2 );

Dit fragment gebruikt de volgende WordPress functions:

Als image mime type “image/jpeg” is en als er metadata bestaan, dan wordt een array met bijbehorende metadata vastgesteld, en wordt er voor elk element een veld aangemaakt:

EXIF en IPTC metadata velden in WordPress bijlage details

EXIF en IPTC metadata velden in WordPress bijlage details

De formuliervelden van dit voorbeeld zijn iets complexer, dus we zetten een value voor het ‘html’ form element (zie de code op Gist). Je hoeft geen EXIF en IPCT metadata op te slaan, omdat WordPress deze automatisch opslaat binnen de tabel wp_postmeta wanneer je afbeeldingen uploadt.

3. Extended metadata laten zien in de front-end

Het is natuurlijk erg handig om al deze informatie in de back-end te hebben. Maar als je deze extended metadata van je mediabestanden ook aan de front-end wil laten zien, dan moet je wat sleutelen.

Om dit te doen moet je deze informatie toevoegen aan de bijlagebeschrijving met de filter the_content in wp-admin/includes/post.php, zoals hieronder:

function media_hacks_the_content( $content ){
	global $post;

	if( is_attachment() && 'image/jpeg' == get_post_mime_type( $post->ID ) ) {

		$fields = wp_get_attachment_metadata( $post->ID );
		$meta = $fields['image_meta'];

		if( ! empty( $meta['camera'] ) ){
			$custom_content = "
			<ul>
				<li>Camera: {$meta['camera']}</li>
				<li>Created timestamp: {$meta['created_timestamp']}</li>
				<li>Aperture: {$meta['aperture']}</li>
				<li>Focal length: {$meta['focal_length']}</li>
				<li>ISO: {$meta['iso']}</li>
				<li>Shutter speed: {$meta['shutter_speed']}</li>
				<li>Orientation: {$meta['orientation']}</li>
			</ul>";
			$content .= $custom_content; 
		}
	}
	return $content;
}
add_filter( 'the_content', 'media_hacks_the_content' );

Hier wordt de function wp_get_attachment_metadata aangeroepen. Als het huidige berichttype “attachment” is en het huidige mime type “image/jpeg” is, dan wordt de beschikbare metadata van de afbeelding opgehaald en gebruikt om een ongeordende lijst met velden te bouwen, die wordt toegevoegd aan de inhoud van het bericht.

De callback function retourneert $content (zie de code op Gist):

EXIF en IPTC metadata weergegeven op een bijlagepagina

EXIF en IPTC metadata weergegeven op een bijlagepagina

Hierboven zie je het nieuwe bijlage bericht met de metadata die is toegevoegd aan de beschrijving.

4. Een afbeeldingsarchief publiceren

Out-of-the-box kan WordPress geen archieven van bijlagen weergeven. Dit komt omdat de option has_archive van het bijlage berichttype is ingesteld op false.

Bovendien is de standaard bijlage post_status ingesteld op “inherit”, terwijl de standaard parameter post_status van het $query object op publish” staat. Dit betekent dat in de archieven geen bijlagen worden weergegeven, tenzij we de query post_status expliciet instellen op “inherit” of “any” (bekijk WP_Query_Type Paremeters voor meer informatie).

Dat gezegd hebbende: om afbeeldingsarchieven te tonen moet je twee functions definiëren. De eerste function filters de arguments van een opgegeven berichttype en zet de property van de bijlage has_archieve op true:

function media_hacks_register_post_type_args( $args, $post_type ){
	if( $post_type == 'attachment' ){
		$args['has_archive'] = true;
	}
	return $args;
}
add_filter( 'register_post_type_args', 'media_hacks_register_post_type_args', 10, 2 );

De twee function stelt de custom values voor de query variables post_mime_type en post_status in:

function media_hacks_pre_get_posts( $query ){
	if ( !is_admin() && $query->is_main_query() ) {

		if( is_post_type_archive('attachment') ){
			$query->set('post_mime_type', 'image/jpeg');
			$query->set( 'post_status', 'inherit' );
		}
	}
}
add_action( 'pre_get_posts', 'media_hacks_pre_get_posts' );

De function wordt gehookt aan de action hook pre_get_posts, die wordt geactiveerd nadat de query is geactiveerd, maar voordat deze wordt uitgevoerd. Het $query object wordt doorgegeven door “reference” en niet door “value”, wat betekent dat elke wijziging in de huidige instance van $query invloed heeft op het originele object $query.

Om deze reden is het belangrijk om het te verifiëren welke query je gaat wijzigen (zie de code op Gist). Als je vervolgens https://jouwdomein.com/?post_type=attachment in je browser intikt, krijg je een archief van je JPEG afbeeldingen:

WordPress media-archief

WordPress media-archief

De volledige code van al deze hacks is beschikbaar als plugin in een publieke Gist, waar we in deze sectie meermaals naar hebben gelinkt. Je kan deze als .zip bestand downloaden en naar je WordPress site uploaden om deze vier hacks te implementeren, zonder dat je je bestanden handmatig hoeft te wijzigen.

Een foto zegt meer dan 1.000 woorden... maar alleen als je weet hoe je deze moet importeren, bewerken en beheren op je WordPress site. 🖼 Klik om hierover meer te leren in deze uitgebreide gids. 📸Click to Tweet

Samenvatting

Afbeeldingen, video’s, audiobestanden en documenten kunnen enorm van waarde zijn voor gebruikers van WordPress site. De WordPress mediabibliotheek is essentieel voor het uploaden, publiceren en zelfs wijzigen van deze bestanden om aan de behoeften van je content te voldoen.

Heb je nog andere vragen over de WordPress mediabibliotheek? Laat het ons hieronder in de reacties weten!


Als je dit artikel leuk vond, dan ga je Kinsta’s WordPress hosting platform ook heel erg leuk vinden! Of het nu gaat om het versnellen van je website of de 24/7 support van ons ervaren WordPress-team. Onze door Google Cloud aangedreven infrastructuur is gericht op automatische schaalbaarheid, prestaties en beveiliging. Laat ons jou het Kinsta verschil tonen! Bekijk onze pakketten