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:
- In de media browser via admin dashboard > media > bibliotheek
- Met google photo’s account van de harmonie via admin dashboard > media > google photo’s
- Via de front end, als je je pagina aan het bewerken bent
- Het bestandsformaat & de foto verhoudingen
- 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:
- Ga naar het admin dashboard > media > google photo’s
- Selecteer de gewenste foto’s
- Klik op ‘importeer’
- 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
- 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
Foto carousel
Gebruik in elementer het ‘media carousel’ element.
Ook hier dien je onder ‘link’ ‘mediabestand’ te kiezen.
Foto albums
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
cepi-consulting
