Bob de webbouwer bouwt en verbetert websites 040 848 80 69 bob@bobdewebbouwer.com

WordPress handleiding hoofdstuk 5 : Foto’s en video’s in WordPress plaatsen en bewerken

Zoals je in hoofdstuk 3 hebt kunnen lezen kun je in Gutenberg, de standaard editor sinds WordPress 5.0, content toevoegen met zogenaamde blokken.
Voor het toevoegen van een foto of video is een eigen blok beschikbaar.

Als je een foto of andere afbeelding wilt toevoegen klik je op het plus icoontje en selecteer je “afbeelding”. Je kunt dan kiezen uit meerdere manieren om je afbeelding toe te voegen: 

afbeelding blok
  • Je kunt een afbeelding in het grijze vlak slepen om deze automatisch te uploaden
  • je kunt op “uploaden” klikken om een afbeelding op je computer te selecteren
  • Je kunt een eerder geuploade afbeelding uit de media bibliotheek kiezen 
  • Je kunt een afbeelding embedden door de URL in te voeren
Voor videofragmenten is een eigen blok beschikbaar.

Media bibliotheek

Alle afbeeldingen, video’s, PDF’s en andere bestanden die je uploadt naar je WordPress website worden opgeslagen in de media bibliotheek. Dit kun je vergelijken met de map “foto’s” op je computer. Door in het WordPress menu op “media” te klikken kun je deze media bibliotheek openen, en je kunt dus ook afbeeldingen vanuit de media bibliotheek toevoegen aan je pagina’s en berichten.

De details van een afbeelding invullen

afbeelding details

Wanneer je een foto of video in de media bibliotheek upload of erop klikt verschijnt het venster hiernaast aan de rechterzijde van de pagina. Daarin zie je eerst enkele details, zoals de naam van de afbeelding en de afmeting. Vervolgens zie je enkele velden die je zelf kunt vullen.

Het alt-tekst veld mag in principe niet leeg gelaten worden, althans niet volgens de HTML specificaties. Dit veld wordt namelijk gebruikt door screenreaders voor blinden en slechtzienden, en aangezien Google ook blind is gebruiken ook zoekmachines de alt tekst om te bepalen wat er op de afbeelding te zien is. Het alt-tekst veld dient dus een korte omschrijving van de afbeelding te bevatten.

De tekst die je bij “titel” invult krijgen mensen te zien als ze met de muis over de foto gaan. In sommige thema’s wordt de titel ook bij de foto getoond, evenals het onderschrift en/of de omschrijving die je daaronder kunt invullen. Bij veel thema’s wordt deze echter niet getoond, in dat geval kun je die velden dus gewoon leeg laten.

 

Overige afbeelding instellingen

afbeelding bewerken in wordpress

Wanneer je de afbeelding hebt ingevoegd in je pagina of bericht kun je nog enkele dingen instellen middels de toolbar die boven de afbeelding verschijnt.

Zo kun je instellen hoe de afbeelding uitgelijnd dient te worden (1) en je kunt de blauwe punten (2) met je muis verslepen om de afbeelding te verkleinen of te vergroten.

Als je op het link icoontje (3) klikt kun je instellen wat er gebeurt als er op de afbeelding geklikt wordt. De eerste optie is het invoeren van een URL. Door naast het URL vak op het pijltje naar beneden te klikken kun je nog kiezen of je de link in een nieuw tabblad wilt openen, en indien gewenst kun je ook een linkrelatie en CSS class toevoegen. 

De tweede optie is “mediabestand”. Als je deze optie kiest wordt er een groter exemplaar van de afbeelding weergegeven. Als je een plugin als “fancybox for wordpress” hebt geïnstalleerd krijgt je een mooi plaatje over de huidige pagina (lightbox).

De derde optie is “bijlagepagina”. WordPress maakt voor iedere afbeelding of ander mediabestand een eigen pagina aan, en als je deze optie selecteert opent de eigen pagina van de betreffende afbeelding.  

Daarnaast zie je een icoontje om de afbeelding bij te snijden (4). Je krijgt dan 2 nieuwe icoontjes op je werkbalk – 1 waarmee je de afbeelding kunt inzoomen, en 1 waarmee je de afbeelding kunt bijsnijden met verschillende ratio’s. 

Als je op de 3 puntjes boven elkaar (5) klikt opent een sidebar met nog meer instellingen aan de rechterkant. Zo kun je hier de eerder genoemde alt tekst aanpassen en selecteren hoe groot de afbeelding dient te zijn.

Hulp nodig met je WordPress website?

Deze Wordpress handleiding is geschreven door Bob de webbouwer, een allround website expert die regelmatig blogt over allerlei onderwerpen die je helpen bij (het bouwen van) jouw website. Heb je hulp nodig? Huur Bob de webbouwer dan in om een WordPress website voor je te bouwen, jouw WordPress website te verbeteren of een workshop over dit onderwerp te verzorgen.

Vraag direct een vrijblijvende offerte aan

Heeft dit artikel je zo goed geholpen dat je mij niet meer nodig hebt?
Een kleine eenmalige donatie wordt altijd zeer op prijs gesteld 🙂

Bedrag €*



13 Reacties

  1. Babs

    Hi, ik heb een vraagje. Als ik nu een afbeelding upload via mijn computer staat er als titel “bty” of “ADV” terwijl ik de foto’s op mijn laptop wel hernoemd heb.
    Op de een of andere manier pakst hij de teskt niet.
    Enig idee hoe ik dit kan oplossen?

    Antwoord
  2. Bob de webbouwer

    Hoi Babs,

    Standaard gebruikt WordPress de bestandsnaam als titel, maar de titel wordt meestal niet weergegeven. Vaak wordt de alt tekst als omschrijving gebruikt, maar er zijn ook thema’s of plugins die het onderschrift weergeven. Die moet je dus ook aanpassen.

    Groeten van Bob

    Antwoord
  3. Esther

    Hoe kan ik de afbeelding van mijn logo in de linkerbovenhoek van mijn website aanpassen?
    Bij jullie staan daar ook jullie logo.

    Antwoord
  4. Bob de webbouwer

    Hoi Esther,

    Normaal kun je dat instellen via weergave –> customizer –> kopafbeelding, maar in sommige thema’s (zoals het thema waar ik mee werk) kun je het logo in de thema instellingen wijzigen.

    Groeten van Bob

    Antwoord
  5. jan

    hallo, ik wil graag in de ‘uitgelichte afbeelding’foto s embedden, maar hoe plaats ik daar de link?

    Antwoord
  6. Bob de webbouwer

    Hoi Jan,

    Ik begrijp even niet wat je bedoelt, sorry… wil je een galerij met meerdere foto’s in de uitgelichte afbeelding hebben? Dat is standaard helaas niet mogelijk. Of bedoel je wat anders?

    Groeten van Bob

    Antwoord
  7. jan heller

    Nee wat ik bedoel is het volgende|: Je kunt in een post een foto embedden, niet door de foto te uploaden maar door een link in te voegen. Dat zou ik dus ook graag willen in uitgelichte afbeelding. Tot nu toe moet je eerst een foto downloaden en dan via deze button toevoegen, maar dan is het geen embedden en daar gaat het nu juist om.

    Antwoord
  8. Bob de webbouwer

    Ah zo, nu snap ik ‘m. Dat is standaard niet mogelijk inderdaad, maar met deze plugin moet het volgens mij wel lukken.

    Antwoord
  9. Romy

    Hoi,

    Bedankt voor deze duidelijke uitleg! Ik heb nog een vraagje, is het mogelijk om een ‘knop’ of tekst IN de foto te leggen?
    Ik kan dit nu alleen onder, boven of naast de foto zetten.
    Wat moet ik hiervoor doen?

    Antwoord
  10. Bob de webbouwer

    Hoi Romy,

    Voor zover ik weet is het niet standaard mogelijk om een achtergrond afbeelding te gebruiken (dat is eigenlijk wat jij wilt, net als op mijn homepage bijvoorbeeld). Met een gratis page builder plugin zoals Elementor of Brizy kan dat wel. Als je toch liever met Gutenberg werkt (dat is de standaard editor van WordPress) kun je eventueel een extra (gratis) plugin als Atomic Blocks gebruiken; met hun container block kun je dat ook toevoegen.

    Groeten van Bob

    Antwoord
  11. Jan

    Hallo Bob,
    Wil graag op mijn site meerdere foto`s en/of filmpje`s plaatsen.
    Alleen nu komen de foto`s onder elkaar.
    Zou mooi zijn als dat zo is als bv op marktplaaats.
    foto vergroot, en de andere er onder.
    Hoe moet dat?

    Antwoord
  12. Bob de webbouwer

    Hoi Jan,

    Daar heb je een slider voor nodig, zoals deze gratis plugin.

    Groeten van Bob

    Antwoord
  13. Britt van Uem

    Dag Bob,

    Sinds vorige week werk ik aan een nieuwe site met WordPress.
    Vragen die ik heb.
    Hoe kan ik een tekst in de afbeelding zetten? Moet ik daarvoor eerst de foto bewerken op mijn computer en dan uploaden naar de bibliotheek?
    En een andere vraag: hoe krijg ik de vaste achtergrond afbeelding weg van de home page?
    En tenslotte: hoe wijzig ik de volgorde van het menu op de homepagina? Dus de tabbladen: over ons, contact , home?
    Dank!

    Groeten,
    Britt van Uem

    Antwoord

Een reactie versturen

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *