WordPress Handleiding Hoofdstuk 5 : Foto’s en video’s in WordPress plaatsen en bewerken
In dit hoofdstuk leer je:
- Hoe je een foto of video plaatst op je website
- Dat er een toolbar verschijnt als je op een afbeelding klikt en wat je daarmee kunt
- Dat er ook extra instellingen zijn in de sidebar
- Hoe je afbeeldingen cirkelvorming kunt maken, of afgeronde hoeken of een rand kunt geven
- Dat alle media worden opgeslagen in de mediabibliotheek en dat je daar ook afbeeldingen kunt bewerken
- Dat je ook een fotogalerij met meerdere afbeeldingen kunt invoegen
- Dat je niet zomaar elke afbeelding mag gebruiken op je website
Een foto of video plaatsen op je website
In hoofdstuk 3 heb ik al kort het afbeelding blok en galerij blok genoemd. Voor video’s is er een apart video blok. Weet je het nog? Klik op het blauwe plusje bovenaan om een blok toe te voegen. Als je één van deze blokken toevoegt krijg je onderstaand venster.
- Als je op “uploaden” klikt kun je een afbeelding die op je computer staat uploaden naar de mediabibliotheek. De mediabibliotheek is de plek waar al je afbeeldingen, video’s en andere media (zoals PDF documenten) worden opgeslagen.
- Als je op “mediabibliotheek” klikt kun je kiezen uit de bestanden die je al eerder hebt geupload.
- Als je op “via URL invoegen” klikt kun je een afbeelding of video embedden vanaf een externe bron. Dit zul je voor afbeeldingen niet zo vaak gebruiken, maar voor video’s des te meer; in het video blok kun je hier bijvoorbeeld gewoon de YouTube link plakken.
- Je kunt ook een afbeelding in het vak slepen om deze te uploaden.
Instellingen voor afbeeldingen
Als je een afbeelding hebt ingevoegd krijg je een aantal instellingen te zien, in een toolbar boven de afbeelding (1) en in de sidebar (2) en (3).
1. De Toolbar
Op de toolbar boven de afbeelding vind je van links naar rechts de volgende dingen:
- Met het afbeelding icoontje kun je het blok transformeren naar bijvoorbeeld een galerij of een layout met meerdere kolommen.
- Met het uitlijn icoontje kun je het blok links, gecentreerd of rechts uitlijnen.
- Het derde driehoekige icoontje is het duotone filter, waarmee je de afbeelding in 2 kleuren kan weergeven. Hiermee kun je een afbeelding bijvoorbeeld eenvoudig zwart-wit maken, of in de kleuren van je merk.
- Met het link icoontje kun je – uiteraard – een link toevoegen aan een afbeelding door een URL in het vak te typen. De opties “link naar afbeeldingsbestand” en “link naar bijlagepagina” zou ik niet gebruiken, maar de optie “vergroten door te klikken” gebruik ik zelf juist heel vaak (ook bij bovenstaande afbeelding). Daarmee opent de afbeelding groter in een lightbox.
- Als je op dit icoontje klikt verschijnen er enkele extra icoontjes waarmee je de afbeelding kunt bijsnijden door in te zoomen of een bepaald aspect ratio (zie hieronder) in te stellen. Verder kun je de afbeelding ook roteren.
- Hiermee transformeer je de afbeelding naar een omslagblok, waardoor je er tekst overheen kunt plaatsen.
- Met dit blok kun je een bijschrift (caption) toevoegen aan je afbeelding.
- Door op “vervangen” te klikken kun je een andere afbeelding selecteren
- Onder de 3 puntjes vind je een aantal extra mogelijkheden die je ook bij andere blokken vind. Deze zijn reeds behandeld in hoofdstuk 3.
2. Sidebar instellingen
In de sidebar kun je ten eerste een alternatieve tekst instellen; een omschrijving van wat er op de afbeelding te zien is. Dit is in eerste instantie bedoeld voor blinden en slechtzienden, maar ook Google maakt hier gebruik van dus het is altijd slim om daar ook enkele zoektermen in te verwerken.
Daaronder vind je de mogelijkheid een aspect ratio in te stellen. Daarmee forceer je een afbeelding naar een bepaalde verhouding. Als je bijvoorbeeld 3 kolommen met je diensten wilt weergeven is het wel zo mooi als alle afbeeldingen dezelfde afmetingen / verhouding hebben. De afbeelding wordt dan wel bijgesneden.
Je kunt ook handmatig een hoogte en breedte instellen voor je afbeelding.
Onder schalen vind je 2 opties: standaard is dat omslagafbeelding (object-fit: cover;), waarbij de afbeelding de gehele beschikbare ruimte vult (en dus wordt bijgesneden). De 2e optie is “bevat”
(object-fit: contain;) waarbij de afbeelding altijd in zijn geheel wordt weergegeven, ongeacht de ingestelde ratio of afmetingen.
Maar let op, als je een ratio instelt van 1/1, met een afbeelding die 400 x 200px groot is, zal het afbeelding blok een ruimte van 400px bij 400px innemen. Als je dan de optie “bevat” kiest zal de afbeelding zelf slechts de helft van die ruimte innemen, maar er is dus wel 200px witruimte tot het volgende blok.
Als een afbeelding upload naar WordPress worden er automatisch meerdere kleinere formaten van de betreffende afbeelding aangemaakt. Als je ergens een afbeelding van 400px breed wilt tonen hoef je niet de volledige afbeelding van 1000px breed te laden. Daardoor wordt je website sneller.
Onder resolutie kun je het gewenste formaat selecteren. Hoeveel px de betreffende formaten zijn kun je instellen in de instellingen (zie hoofdstuk 11) maar standaard is thumbnail 150px bij 150px en medium 300px bij 300px.
3. Sidebar stijlen
Als je bovenin de sidebar op het zwart-witte cirkeltje klikt kom je op het tabblad stijlen.
De eerste optie die je daar vindt is “standaard” of “afgerond”. Als je de optie “afgerond” kiest wordt je afbeelding cirkelvorming (of ovaal als deze niet vierkant is). Dat wordt bijvoorbeeld veel gebruikt bij dingen als reviews of teamleden. Voor dat soort dingen is de aspect ratio 1/1 instelling dan ook erg handig.
De volgende optie is filters, met als enige optie duotoon die is al behandeld in de toolbar instellingen.
Onder afmetingen kun je een marge instellen, zodat de afbeelding verder weg komt te staan van de omliggende blokken of de rand van je pagina.
Onder rand & schaduw kun je een rand instellen (kleur en breedte). Daaronder vind je straal, waarmee je afgeronde hoeken kunt maken. Door op het link icoontje te klikken kun je dat voor iedere zijde apart instellen. Instellingen om een echte schaduw in te stellen zijn hier niet te vinden.
Afbeeldingen bewerken in de mediabibliotheek
Als je in de admin omgeving in de linker sidebar op “media” klikt kom je in de mediabibliotheek, waar je al je afbeeldingen, video’s en (PDF) documenten vindt. Je kunt deze filteren op het soort bestand en op uploaddatum.
Als je op een afbeelding klikt kun je enkele dingen instellen, zoals de alternatieve tekst en het bijschrift. Daarnaast zie je een knop “afbeelding bewerken”. Hier kun je een aantal dingen doen die je ook al via de toolbar kon doen, maar je kunt hier de afbeelding ook handmatig bijsnijden en spiegelen.
Een fotogalerij met meerdere afbeeldingen toevoegen
Als je een eenvoudige fotogalerij wilt toevoegen kun je kiezen voor het galerij blok. Als je dit blok invoegt kun je de gewenste afbeeldingen uploaden of selecteren in de mediabibliotheek. De instellingen voor dit blok in de rechter sidebar zijn het aantal kolommen, welk formaat afbeelding je wilt hebben (thumbnail, medium of volledig), je kunt afbeeldingen automatisch bijsnijden om ze passend te maken (dit zet de schaal op omslagafbeelding), je kunt ze in een willekeurige volgorde weergeven en je kunt de gewenste aspect ratio selecteren.
Onder het stijl tabblad kun je een achtergrondkleur instellen, de afstand tussen de afbeeldingen bepalen en een rand toevoegen (al dan niet met afgeronde hoeken).
De afbeeldingen zelf zijn individuele afbeelding blokken waarmee je alles kunt doen wat hierboven beschreven is. Als je een afbeelding wilt toevoegen, verwijderen of de volgorde wilt aanpassen kun je dus gewoon het structuurpaneel openen en de gewenste afbeelding selecteren.
Er is helaas geen mogelijkheid om alle afbeeldingen automatisch te laten openen in een lightbox als je erop klikt, maar dat kun je dus wel per afbeelding instellen.
Je mag niet zomaar elke afbeelding gebruiken op je website
Je mag niet zomaar elke afbeelding die je op Google of een andere website vindt op je website plaatsen. Als je dat wel doet kan je dat duizenden euro’s kosten. In dit artikel lees je waar je wel afbeeldingen vindt die je veilig kunt gebruiken.
Ga door naar Hoofdstuk 6: ReactiesInhoud van deze WordPress handleiding
Hulp nodig met je WordPress website ?
Huur mij in om een WordPress website voor je te bouwen,
een Training “Werken met WordPress” te verzorgen
of je op een andere manier te helpen.
Heb je een vraag over dit artikel? Stel deze dan in de reacties hieronder.
Een aantal links op deze site zijn affiliate links. Als je via zo’n link een plugin of thema koopt ontvang ik daar een vergoeding voor.
Dat kost jou verder niets extra, maar zorgt er wel voor dat ik dit soort waardevolle content gratis voor je beschikbaar kan maken.
Geef een reactie