Hoe voeg je afbeeldingen of een galerij toe in WordPress, korte handleiding

Logo galerij

Hoe voeg je afbeeldingen toe aan een pagina of bericht in WordPress en hoe maak je daar een mooie galerij van (gallery in het Engels)?

Dit is een korte handleiding, niet alle opties worden besproken, maar wel essentiële stappen. Stap voor stap leg ik uit hoe dit aan te pakken en illustreer dat met een aantal afbeeldingen. 

Welke afbeeldingen kan ik gebruiken?

  • De afbeeldingen moeten het type .jpg, .gif of .png hebben. Dit soort afbeeldingen worden goed op het web getoond. Gebruik hier geen .BMP of Word-bestanden
  • De afbeeldingen moeten niet te groot zijn, liefst niet groter dan 250Kb, meer dan 1Mb is niet aan te raden. Je kunt de grootte van een afbeelding aanpassen in een bewerkingsprogramma zoals Photoshop of Paint, of het online aanpassen op een website zoals Pic Resize, Cropp.me of Fix Picture
  • Gebruik in de naam van de afbeelding geen leestekens of spaties. Alleen letters en cijfers. Gebruik in plaats van spaties een minteken. Dus geen “dit is zo’n mooi plaatje & zo.versie12.jpg” maar bijvoorbeeld “giraffe-met-trap.jpg”. Hou het kort en omschrijvend
  • In WordPress worden, naast het origineel, 3 extra formaten bewaard, een “thumbnail, een middelgrote en een grote afbeelding. Hoe groot deze verschillende afbeeldingen zijn is afhankelijk van de instellingen van je WordPress installatie

Een nieuw bestand toevoegen aan je pagina

Bijlage details

  • Ga naar het bericht of de pagina waar je de afbeelding wilt plaatsen
  • Het is handig om de pagina eerst met tekst te vullen en daarna de afbeeldingen toe te voegen
  • Zet de cursor op de plek waar je de afbeelding wilt plaatsen
  • Klik op “Media toevoegen”
  • Klik op “Bestanden uploaden”
  • Sleep de afbeelding in het venster of klik op “Bestanden selecteren” en kies daarna de afbeelding
  • De afbeelding komt nu in het scherm met een blauw randje eromheen en een een vinkje rechts boven
  • Vul de Titel  bij de bijlage details in, zo kun je later de afbeelding weer terugvinden (hou het kort)
  • Vul de alt-tekst bij de bijlage details in, Google leest dit veld uit en het wordt voorgelezen voor bezoekers die een screen reader gebruiken (hou het kort)
  • Als je dit wilt kun je een onderschrift toevoegen. Deze tekst wordt onder de foto op de pagina getoond
  • Kies bij “Weergaveinstellingen bijlagen” hoe je de afbeelding wilt tonen (je kunt dit later nog wijzigen):
    • uitlijning links/midden/rechts/geen
    • mediabestand:
      • normaal is “geen”, het plaatje is dan geen link
      • aangepaste URL: je kunt hier een link maken naar een andere website of een andere pagina op je site
      • mediabestand: het plaatje is een link naar de oorspronkelijke afbeelding (kies dit als je bijvoorbeeld een plugin voor een lightbox gebruikt)
      • bijlage pagina, de afbeelding wordt getoond in een speciale pagina op je site, afhankelijk van je website
    • Afmeting: kies hoe groot je de afbeelding op je pagina wilt laten zien
  • Klik op “In pagina toevoegen”
  • Sla de pagina op

Een al eerder toegevoegde afbeelding toevoegen aan je pagina

  • Ga naar het bericht of de pagina waar je de afbeelding wilt plaatsen.
  • Zet de cursor op de plek waar je de afbeelding wilt plaatsen.
  • Klik op “Media toevoegen”
  • Klik op “Media bibliotheek”
  • Klik op het gewenste plaatje
  • Controleer de bijlage details en weergave instellingen en pas ze zonodig aan
  • Klik op “in pagina toevoegen”

Een toegevoegde afbeelding op je pagina wijzigen

 

  • Weergave wijzig afbeeldingGa naar het bericht of de pagina waar je de afbeelding wilt wijzigen
  • Klik de afbeelding aan
  • Je ziet boven de afbeelding een balkje met opties voor de uitlijning, het potloodje is om alles te bewerken en met het kruisje kun je de afbeelding verwijderen uit de pagina
  • Klik het potloodje aan
  • Je kunt het volgende wijzigen (je ziet in het voorbeeld meteen hoe de wijziging eruit ziet):
    • Onderschrift: je kunt een onderschrift toevoegen (komt onder het plaatje in de pagina te staan)
    • De alternatieve tekst (alt-tekst)
    • De uitlijning
    • De afmeting, je kunt kiezen uit de beschikbare formaten of een aangepast formaat kiezen
    • Waar de afbeelding naar toe linkt: geen = geen link; Mediabestand = de link naar de grootste versie van de afbeelding; aangepaste URL: de afbeelding wordt getoond in een speciale pagina op je site, afhankelijk van je website
  • Geavanceerde instellingen:
    • Attribuut afbeeldingstitel: Je kunt een zogenaamd title attribute meegeven aan een afbeelding. Dit is een verouderde optie, gebruik deze niet
    • Afbeelding CSS class hier kun je een class opgeven waarmee je de styling van de afbeelding kunt aanpassen. Deze class moet in het stylesheet van de website gedefinieerd zijn.
    • Open link in een nieuw venster
    • Link relatie: hiermee kun je aangeven om wat voor soort link het gaat.
  • Je kunt de afbeelding zelf (origineel) bewerken
  • Met de optie “vervangen’ kun je hier een andere afbeelding selecteren
  • Klik op bijwerken rechts onder om op te slaan of op het kruisje rechtsboven om te annuleren
  • Sla de pagina op

Afbeelding details

 

Meerdere afbeeldingen tegelijk toevoegen

  • Ga naar het bericht of de pagina waar je de afbeelding wilt wijzigen
  • Zet de cursor op de plek waar de de afbeeldingen wilt toevoegen
  • Klik op “Media toevoegen”
  • Voeg zonodig afbeeldingen toe via “Bestanden uploaden”
  • Selecteer de afbeeldingen door ze aan te klikken, hou hierbij de toets “Shift” ingedrukt
  • Rechtsboven de afbeelding komt dan een vinkje te staan
  • Je kunt een afbeelding uit de selectie verwijderen door met de muis op het vinkje te klikken.
  • Per afbeelding kun je de bijlagedetails bijwerken.
  • Je kunt de volgorde van de afbeeldingen wijzigen door onderaan het venster op “Bewerken” te klikken. Versleep de afbeeldingen in de juiste volgorde en klik dan op “Terug naar Mediabibliotheek”
  • Heb je alles geselecteerd en in de goede volgorde? Klik dan op “In pagina toevoegen”.
  • Sla de pagina op

Meerdere afbeeldingen

Een afbeelding bewerken

Het beste is om een afbeelding van te voren op maat en grootte te maken in een programma zoals Photoshop of the Gimp. Maar in WordPres zelf kan het ook.

Om een afbeelding bij te snijden moet je eerst met de muis (houdt linkermuisknop ingedrukt) een rechthoek op de afbeelding selecteren. Laat de muisknop los en selecteer het knopje voor bijsnijden (meest linkse knopje)
Afbeelding bewerken

Een afbeelding van je pagina verwijderen

  • Ga naar het bericht of de pagina waar je de afbeelding wilt wijzigen
  • Klik de afbeelding aan
  • Selecteer uit het balkje boven de foto het kruisje
  • De afbeelding is onmiddellijk verwijderd (alleen van deze pagina, niet uit de mediabibiotheek, je kunt de afbeelding makkelijk opnieuw toevoegen)
  • Sla de pagina op
  • Wil je een afbeelding permanent verwijderen, dus ook uit de Mediabibliotheek, dan dan naar het hoofdmenu “Media” -> Bibliotheek, selecteer de afbeelding en kies “Permanent verwijderen”.

Een galerij aanmaken

  • Ga naar het bericht of de pagina waar je de afbeelding wilt wijzigen
  • Zet de cursor op de plek waar je de afbeelding wilt plaatsen
  • Klik op “Media toevoegen”
  • Klik op “Galerij aanmaken” in het linker menu
  • Selecteer de gewenste afbeeldingen, voeg zonodig afbeeldingen toe via “Bestanden uploaden”
  • Klik op de blauwe knop “Een nieuwe galerij aanmaken”, rechtsonder
  • Versleep de afbeeldingen zonodig in de goede volgorde
  • Voeg zonodig een onderschrift toe
  • Kies de “Galerij instellingen”:
  • Mediabestand: kies deze optie als je werkt met een lightbox (zie “Een galerij met een lightbox aanmaken en wijzigen”)
    Bijlage: de afbeelding wordt getoond in een speciale pagina op je site, afhankelijk van je website
  • Kies hoeveel plaatjes naast elkaar worden  getoond op je pagina
  • Kies de grootte van de aanklikbare afbeeldingen zoals die op de pagina getoond gaan worden
  • Klik op “Galerij invoegen”, rechts onder
  • In de tekst zie je nu de afbeeldingen in een grijs kader staan en je kunt ze tegelijk selecteren
  • Sla de pagina op

Galerij bewerken

 

Een galerij bijwerken

  • Ga naar het bericht of de pagina waar je de afbeelding wilt wijzigen
  • Klik op de grote grijze blok met de afbeeldingen en klik op het potloodje in het balkje boven de galerij
  • Je kunt nu de volgorde wijzigen door met de plaatjes te slepen
  • Je kunt een afbeelding verwijderen door het aan te klikken en op het kruisje rechtsboven te klikken
  • Je kunt onder het plaatje een onderschrift toevoegen
  • Wil je een afbeelding toevoegen, klik dan op “voeg toe aan de galerij” in het linker menu en voeg een afbeelding toe via “bestanden uploaden” of kies een of meerdere uit de mediabibkiotheek en klik op “Aan galerij toevoegen” rechtsonder
  • Sla de pagina op

Een galerij verwijderen

  • Ga naar het bericht of de pagina waar je de afbeelding wilt wijzigen
  • Klik op de grote grijze blok met de afbeeldingen en klik op het kruisje in het balkje boven de galerij
  • De galerij is onmiddellijk verwijderd
  • Sla de pagina op

Een galerij met een lightbox

Een lightbox is een mooie manier om je galerij te tonen, er komt een transparante laag over de pagina en de bezoeker kan op dezelfde pagina blijven en door de foto’s bladeren.

Het aanmaken/toevoegen en verwijderen van een galerij met een lightbox gaat op dezelfde manier als een gewone galerij.
Belangrijk is: zet bij de “Galerij instellingen” de link naar Mediabestand.

Voor webbouwers: Hiervoor is een plugin nodig. Een veel gebruikte WordPress plugin is de Lightbox Plus ColorBox. Ga na installeren naar de instellingen (onder het hoofdmenu Weergave) bij “Primary Lightbox Settings” en vink aan: “Use For WordPress Galleries”.
lightbox

Meer documentatie over WordPress Media

Voorbeeldfoto’s gebruikt met toestemming van Mark Stevenson (MasPix)
Deze pagina is bijgewerkt voor WordPress versie 4.1 op 3 januari 2015

Advertisements

Author: Rian Rietveld

WordPress Engineer focussing on accessibility

4 thoughts on “Hoe voeg je afbeeldingen of een galerij toe in WordPress, korte handleiding”

  1. Wat een fijne en uitgebreide uitleg! Thanks hiervoor. Ik zie wel dat het bericht of in ieder geval de afbeelding van nog een oudere versie van WordPress zijn. Misschien kun je dat nog aanpassen. Fijn weekend

    Like

  2. Kun je ook vertellen hoe ik een afbeelding kan uitlichten? Als ik mijn bericht deel, dan kiest Jetpack een voor de link een afbeelding zonder dat ik daar keuze in kan maken. Als ik meer afbeeldingen heb geplaatst, kiest hij nooit de kopafbeelding maar de onderste. Ik maak de tekeningen zelf, en de bovenste afbeelding is soms nog belangrijker dan de tekst zelf…

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s