Assets

Ga in de backend via de navigatie aan de linkerkant naar Assets.

Dit is de asset library of bestandenbibliotheek waarin alle bestanden zoals afbeeldingen, pdf’s, logo’s en iconen bewaard en aangepast kunnen worden.

Bestanden toevoegen aan de asset library

Je kan bestanden hier uploaden via de knop Upload files rechtsbovenaan. Er opent dan automatisch een venster met de inhoud van je harde schijf op je computer. Of je kan ook bestanden rechtstreeks op een pagina inladen via een Image veld. Elk bestand dat je daar upload wordt automatisch in de library opgeslagen.

Vergeet niet dat wanneer je een nieuwe afbeelding aan een pagina toevoegt, dat het enkele minuten kan duren voor deze verschijnt.

Bestandsgrootte

Probeer voordat je bestanden en afbeeldingen oplaadt goed na te denken of je het ook effectief zal gebruiken op de website. Want elk bestand dat je oplaadt, neemt opslagcapaciteit in beslag op de server waar je website gehost wordt. Daarom is het ook belangrijk om geen te grote bestanden op te laden. Voor afbeeldingen geldt over het algemeen “groter is beter”, maar dit moet wel binnen de perken blijven. Voor de meeste afbeeldingen is een breedte van 2000px meer dan groot genoeg.

Tip voor afbeeldingen:

Maak gebruik van een image optimizer zoals bijvoorbeeld tinypng om afbeeldingen op voorhand te verkleinen. Op deze manier wordt wel de kwaliteit van je afbeeldingen behouden, maar zijn ze minder groot om op te laden zodat je asset library niet te snel vol zit. Grote beelden vertragen de website niet, maar gaan er wel voor zorgen dat jullie hosting sterk gaat oplopen. Een goede richtlijn is een maximum bestandsgrootte van 2 MB voor afbeeldingen.

Afbeeldingen aanpassen, replacen en deleten

Je kan een bestand aanpassen door het bestand aan te vinken en vervolgens op het tandwiel onderaan te klikken. Je kan kiezen uit volgende mogelijkheden:

  • Edit asset: Hier kan je de titel, caption en copyright onmiddellijk aanpassen. De overige velden zijn enkel nodig voor onze developers. Een laatste veld is het ‘usage’ veld dit toont waar de asset wordt gebruikt in de website.
  • Preview file: Hiermee kan je het bestand in het groot bekijken. Er opent dan een pop-up met de afbeelding in detail.
  • Download file: Een bestand downloaden kan handig zijn wanneer een collega een bestand heeft toegevoegd dat je wil aanpassen.
  • Rename file: In de popup bovenaan kan je de filename veranderen.
  • Replace file: Je vervangt hierbij een bestaand bestand op alle plaatsen waar dit bestand gebruikt wordt op de website. Dit is handig wanneer bijvoorbeeld een pdf op meerdere plaatsen staat, zo moet je deze maar één keer aanpassen. Wil je het bestand maar op 1 plaats aanpassen? Laad dan een nieuw, aangepast bestand op onder een andere naam.
  • Copy URL: In de popup verschijnt een deelbare link naar dit bestand in de bestandenbibliotheek.
  • Copy reference tag: Dit is enkel nodig voor onze developers.
  • Edit image: Via Edit image kan je een afbeelding draaien, croppen of kan je het focuspunt, of het belangrijkste punt van een afbeelding, verleggen. Klik hiervoor op Focal point. Centraal op de afbeelding zal een focuspunt verschijnen. Versleep dit bolletje via het drag and drop principe naar het belangrijkste punt, vb. het gezicht. Zo zal dit punt steeds centraal geplaatst worden wanneer een afbeelding niet volledig getoond kan worden (bijvoorbeeld in een overviewblokje).
    Je kan hierna je aangepaste afbeelding rechtsonderaan gewoon saven of ook saven als new asset. Zo blijft ook je oorspronkelijke bestand bestaan.
  • Move: Daarnaast kan je via de ‘Move’ optie van hieruit je asset verplaatsen naar een andere map. Deze opent een pop up waar je zoals op je eigen computer bestanden kunt verplaatsen. Als je tevreden bent met de locatie klik je rechtsonderaan op ‘Move’.
  • Delete: Je kan een bestand deleten, maar let er op dat dit bestand nergens op de website gebruikt wordt, anders zal je broken images veroorzaken.

Afbeeldingen aanpassen vanop een pagina

Je kan afbeeldingen ook aanpassen vanop een pagina of in een overview blokje waarin deze afbeelding gebruikt wordt, door te dubbelklikken op de afbeelding. Hier kan je de titel en image caption rechtstreeks aanpassen. Door één keer te klikken op de afbeelding, kan je in de popup ook het focuspunt aanpassen door met de muis over de afbeelding te gaan en te klikken op Enable focal point of Edit.

Weergegeven grootte van een afbeelding

Zoals eerder gezegd zal een afbeelding niet altijd op volledige grootte getoond worden. Afhankelijk van op welke plaats een afbeelding gebruikt wordt, zal deze automatisch de ingestelde ruimte innemen. Zo zal een hero afbeelding (deze bevindt zich helemaal bovenaan een pagina) soms over de volledige breedte van het scherm gaan, onafhankelijk van hoe groot je scherm is. Andere afbeeldingen passen zich dan weer aan aan de voorziene ruimte, zoals in overviewblokjes. Daarom is het goed om je focuspunt steeds op het meest interessante punt van elke afbeelding te zetten.

Structuur aanbrengen in de asset library

We raden aan om structuur aan te brengen in je asset library. Dit kan je doen aan de hand van folders en subfolders. Bovenaan de mappen structuur zie je een balk met een huis icoontje hier wordt een pad getoond van waarin je je op dat moment bevindt.

Als je een nieuwe map wilt aanmaken, klik dan met je rechtermuisknop op het pijltje naast het huis icoontje of naast de huidige naam van de map waar je in zit, kies voor New subfolder en geef je nieuwe map een naam (vb. events).

Via het drag and drop principe kan je de folders en assets in een andere map verplaatsen. Dit heeft geen invloed op de assets die in deze mappen zitten, je zal geen broken images krijgen. Standaard voegt Craft ook een map Temporary Uploads toe. Deze map heeft het systeem nodig maar hier ga je zelf nooit gebruik van maken.

Daarnaast raden we ook aan om elke afbeelding een relevante naam te geven, dus niet DSC0123.jpg maar kantoor-leuven.jpg. Dit is niet alleen gemakkelijk om je afbeeldingen achteraf gemakkelijk terug te vinden, maar ook zoekmachines en personen met een visuele beperking maken gebruik van deze titel door deze te laten “voorlezen” door het systeem.

Assets sorteren

Je kan binnen de asset library heel makkelijk zoeken op de naam van een bestand. Dat doe je via het grote zoekveld bovenaan. Belangrijk is dat je ook ‘search in subfolders’ aanvinkt bij het zoeken.

Als je snel wilt zoeken welke assets worden gebruikt op een bepaald element, pagina of zijn geüpload door een bepaalde gebruiker, kan je dit doen met de filter ‘related to’ en kies je hier voor het soort element.

Tip: List view versus grid view

Vind je de afbeeldingen in je overzicht te klein, dan kan je rechtsbovenaan switchen van view of weergave. Hierdoor worden de afbeeldingen naast elkaar weergegeven (maar zie je dan weer minder informatie over je bestand, zoals de grootte).

Tips

  • Rechtenvrije afbeeldingen: Zijn jullie nog op zoek naar goede, rechtenvrije beelden, dan kunnen we jullie hier enkele websites aanraden.
  • Videos: We raden af om videos op te laden in de asset library. Maak hiervoor steeds gebruik van een YouTube of Vimeo link en kopieer deze in een video blok van de contentbuilder.

Enkele FAQ's bij deze video

Was dit een antwoord op je vraag of gevonden wat je zocht?

Gerelateerde artikels