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 kan verschillende soorten media hosten, waaronder:
- Afbeeldingen (.jpg, .jpeg, .png, .gif, en .ico).
- Audiobestanden (.mp3, .m4a, .ogg, en .wav).
- Video’s (.mp4, .m4v, .mov, .wmv, .avi, .mpg, .ogv, .3gp, en .3g2).
- PDF’s.
- Word documenten.
- Excel spreadsheets.
- Powerpoint presentaties.
- Adobe Photoshop documenten.
Ook biedt het (beperkte) mogelijkheden voor fotobewerking, zodat je rechtstreeks vanuit je dashboard aanpassingen kan aanbrengen.
Helaas ondersteunt WordPress van zichzelf nog geen WEBP afbeeldingen.
Om bij de mediabibliotheek te komen, klik je op Media in de beheerderszijbalk:
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:
Ook kan je je bestanden filteren met behulp van de dropdown-menu’s:
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:
Ten slotte is er ook nog de knop Bulkselectie. Met deze functie kan je meerdere bestanden tegelijkertijd uit de WordPress installatie verwijderen:
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.
Bestanden toevoegen aan je WordPress mediabibliotheek
Er zijn een aantal verschillende manieren waarop je bestanden (bijv. de favicon van je site) aan je WordPress mediabibliotheek kan toevoegen. De eerste is manier is door naar Media > Nieuwe toevoegen te gaan:
Hier kan je bestanden uploaden die zijn opgeslagen op je computer of ander apparaat:
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:
In de placeholder die je nu te zien krijgt, selecteer je Upload en kies je een bestanden op je computer:
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:
Ga vervolgens naar het tabblad Uploaden en selecteer een bestand op je computer:
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:
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:
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:
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:
Hiermee open je de afbeeldingseditor:
Er zijn vijf basisbewerkingen die je kan aanbrengen:
Bijsnijden stelt je in staat om delen van de afbeelding uit te knippen:
Roteren stelt je in staat om de afbeelding 90 graden (linksom of rechtsom) te draaien:
Spiegelen zorgt ervoor dat je de afbeelding horizontaal of verticaal spiegelt:
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:
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:
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:
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:
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.
Soms kan je de fout “Upload: Failed to Write File to Disk” tegenkomen bij het uploaden van je bestanden via de Mediabibliotheek. Normaal gesproken treedt deze fout op wanneer je uploadmap ingesteld staat op Not Writable (niet schrijfbaar). Je kan de rechten van je bestandssysteem controleren via de Sitediagnose tool van WordPress.
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:
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:
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:
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.
Real Media is een andere manager voor je mappen en bestanden die het bekijken waard is. Deze maakt bestandsbeheer uiterst eenvoudig.
Met de plugin kan je eenvoudig verschillende soorten bestanden beheren, zoals afbeeldingen, video’s en documenten, rechtstreeks vanuit WordPress. Leuk om te weten: Real Media Library is beschikbaar in 12 talen. Als de gratis versie niet genoeg voor je is, kan je ook de PRO versie overwegen. Deze bevat meer features.
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:
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.
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:
Op het scherm dat nu verschijnt, zie je je nieuwe aangepaste metadata-veld onderaan:
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:
- get_post_mime_type haalt het mime-type van een bijlage op – op basis van het ID.
- get-attached_file haalt het bijgevoegde bestandspad op – op basis van het ID.
- wp_read_image_metadata haalt EXIF of IPTC metadata op, indien beschikbaar.
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:
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):
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:
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.
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!
Carlo is a passionate lover of webdesign and front-end development. He has been playing with WordPress for more than 20 years, also in collaboration with Italian and European universities and educational institutions. He has written hundreds of articles and guides about WordPress, published both on Italian and international websites, as well as on printed magazines. You can find him on LinkedIn.
Kinsta je schrijft zo duidelijk en het is zo netjes om te volgen!
Dank je wel voor je uitleg en de extra tips ga zo door!
Ondanks het mooie overzicht hierboven, vond ik mijn vraag er niet tussen. Plotseling kreeg ik steeds als ik een afbeelding wilde uploaden voor een pagina een foutmelding. In rood: ‘Fout, opslaan van bestand naar schijf is mislukt’
Ook al eerder opgeslagen afbeeldingen wilden niet opnieuw opgeslagen worden.
Wat kan er aan de hand zijn?
mvg Rietje van’t Veen, Stichting workheart
Rietje, neem contact op met je hoster, of webbouwer, die moeten het voor je kunnen oplossen.