How can we help you today?
< Alle onderwerpen
Afdrukken

Foto’s toevoegen en weergeven

Intro

Om foto’s te kunnen weergeven op de website moeten deze eerst in de media folder van de website gezet worden. Van hieruit kunnen deze dan opgeroepen worden in de elementor front-end editor.

Het toevoegen van  foto’s op de website kan op 3 manieren en wordt verder hieronder uitgelegd:

  1. In de media browser via admin dashboard > media > bibliotheek
  2. Met google photo’s account van de harmonie via admin dashboard > media > google photo’s
  3. Via de front end, als je je pagina aan het bewerken bent
Voor we dieper ingaan op de manier waarop je foto’s kan toevoegen, eerst nog een aantal aandachtpunten waar je rekening mee moet houden.
  1.  Het bestandsformaat & de foto verhoudingen
  2. Meta-data die je goed moet zetten als je de foto oplaadt

Bestandsformaten & afbeelding grootte

Niet alle bestandsformaten worden ondersteund in wordpress. Je gebruikt best 1 van volgende 2 formaten:

  • JPG (omwille van geringe grootte)
  • PNG (wanneer je met transparante foto’s werkt)

Om de website ook performant te houden, slaag je best je foto gecomprimeerd op. Hoge resolutie foto’s zijn zeker niet nodig. Als regel probeer je best foto’s onder de 200 kB te houden en zeker onder de 0,5 MB!

Indien de foto in een fout formaat staat of heel groot is, kan je dit vaak met een online tool aanpassen. Google gewoon op ‘foto compressie’ of ‘convert formaat_x to JPG’

Daarnaast is het ook handig dat je rekening houdt met de afmetingingen van de foto afhankelijk waar hij gebruikt moet worden. Hierover later nog meer.

Beste foto afmetingen

Nog uit te schrijven

Meta-data goed zetten

Wanneer je een foto oplaadt, is het belangrijk dat je die onmiddellijk een goede titel geeft en eventueel ook een alternatieve tekst.
De titel is initieel de bestandsnaam van de foto, maar kan na upload boven de foto bewerkt worden.
De alternatieve tekst moet je zelf invullen. Dit is de tekst die weergegeven wordt als de foto niet kan laden en omschrijft dus kort wat je gaat zien.

De andere velden mogen optioneel ingevuld worden: beschrijving & onderschrift.

Om een overzicht te bewaren werken we ook met een folderstructuur.

Foto’s aan back-end toevoegen

Via media bibliotheek

Je geraakt hier via het admin dashboard  > media > bibliotheek

Je kan hier foto’s in bulk opladen en door de folders van de folders zoeken.

Om foto’s rechstreeks in de juiste folder te steken, ga je gewoon op de juiste folder en dan op ‘nieuw bestand’.

Je kan foto’s ook van folder verplaatsen door deze te selecteren en dan deze te verslepen naar de juiste foldermap.

Google Photo’s

Indien je foto’s van afgelopen evenementen wil gebruiken die al op onze googlle photo’s account gezet zijn, kan je deze gemakkellijk inladen op volgende manier:

  1. Ga naar het admin dashboard > media > google photo’s
  2. Selecteer de gewenste foto’s
  3. Klik op ‘importeer’
  4. Kies de juiste folder bestemming

Via front-end

Wanneer je een pagina/bericht aan het bewerken bent, en je de juiste foto’s niet vindt, kan je deze ook rechtstreeks importeren.

Het enige probleem hierbij is dat deze dan vaak niet in de juiste folder gezet worden. Vergeet ook niet de meta-data goed te zetten.

Visualisatie foto’s in elementor visuele editor

Er zijn verschillende elementen in elementor die je kan gebruiken om foto’s weer te geven.
 
  • Individuele foto’s: wanneer je ter illustratie 1 foto tegelijk wil tonen
  • Foto carousel: wanneer je enkele foto’s ter illustratie will tonen
  • Foto album: wanneer je een groot album wil weergeven

Individuele foto’s

Gebruik in elementor het ‘Afbeelding’ element.
Kies bij ‘Link’ altijd mediabestand zodat de afbeellding vergroot als je hier op klikt.
Ten sllotte kan je ook met de afbeedingsgrootte spelen.

Foto carousel

Gebruik in elementer het ‘media carousel’ element.

Ook hier dien je onder ‘link’ ‘mediabestand’ te kiezen.

Foto albums

Om foto albums toe te kunnen voegen dien je deze eerst nog apart aan te maken en in de back-end.
Ga hiervoor naar het admin dashboard > media > Media Folder Galleries.
Je selecteert best enkel foto’s van wordpress. Want de andere methodes, zoals eigen bestanden opladen en van google photo’s, zullen deze eerst in wordpress opladen en dan moet je deze achteraf nog in de juiste folders zetten.
Vervolgens kan je met de instellingen spelen en de invloed hiervan ook telkens weergeven.
 

Als je album klaar is, voeg je deze toe aan elementor via het ‘wp folder media gallery addon’ element. Sommige instellingen zal je hier opnieuw moeten goedzetten.

Enkele settings die je best hanteert:

  • Gallery navigation uitzetten
  • Theme: ‘Slider’ & ‘flow slider’ kunnen gemakkelijk in een bericht/pagina toegoevoegd worden. De andere zet je afhankelijk van de grootte beter op een apart bericht. Je kan dan een link naar dit bericht toevoegen.
  •  Choose Gallery: als je album niet zichtbaar is, even je huidige werk opslaan en vervolgens de pagina refreshen
element 'wp media gallery addon'
Vorige De basis-structuur van een pagina/bericht
Volgende Pagina’s/berichten zichtbaarheid
Inhoudsopgave

Leden gedeelte

De muziek zit niet in de noten, maar in de stiltes ertussen

    Inschrijven voor nieuwsbrief

    E-mail

    bestuur@harmoniebierbeek.be

    E-mail

    bestuur@harmoniebierbeek.be

    Rekening

    BE39 3300 1211 1819 BIC: BBRUBEBB

    bellen?

    ( +32) 495 70 38 66

    contact

    Neem contact op om je foto’s te kunnen delen

    logo