Asset library (bestandenbibliotheek) in Craft: hoe bestanden toevoegen, opzoeken en bewerken?

Elke Craft website heeft een asset library. Dit is een plaats waar alle bestanden (afbeeldingen, pdf’s, logo’s, iconen, enz...) bewaard en aangepast kunnen worden.

Je vindt deze bibliotheek terug in het linkermenu van de backend onder 'assets', bestanden of files (afhankelijk van je taal en van de website instellingen). Ieder bestand dat je toevoegt aan een pagina of in een entry, ga je hier opslaan.

Bestanden toevoegen in de asset library

Bestanden toevoegen doe je door rechts bovenaan op de knop “upload files” te klikken: er opent dan automatisch een venster met de inhoud van je harde schijf op je computer. Hierin kan je bestanden selecteren die je wil toevoegen aan je website.

Tip: maximale bestandsgrootte

Beperk liefst de bestandsgrootte van je assets tot max. 2 MB (~voor afbeeldingen is bvb. 2000 px breedte meer dan genoeg).

Je kan bestanden ook in bulk toevoegen door er meerdere aan te duiden. Hiervoor kun je de command⌘-toets (apple) of control-toets (windows) gebruiken. Hou deze ingedrukt en klik vervolgens alle bestanden aan die je wil toevoegen. Deze moeten niet opeenvolgend worden weergegeven in het venster, je kunt dus willekeurig alle items selecteren in het open venster.

Wil je net wel een opeenvolgende reeks items selecteren dan kun je gebruikmaken van de shift⇧-toets. Klik het eerste onderdeel in de reeks aan en druk de shift⇧-toets in terwijl je op het laatste onderdeel klikt van de reeks. Onmiddellijk zullen alle tussenliggende items geselecteerd worden. Vervolgens bevestig je je selectie door 'open' te klikken. Je bestanden worden toegevoegd aan je asset library en je kan deze dus nu gaan toevoegen of linken aan een entry of pagina.

Tip: benaming van je bestanden

We raden steeds aan om je afbeeldingen een relevante naam te geven. Gebruik bvb. niet ‘DSC01223.jpg’, maar geef het bestand een relevante naam met mogelijke zoekwoorden in het achterhoofd.

Dit is niet enkel handig om achteraf je afbeeldingen makkelijk terug te vinden, integendeel. Zoekmachines en gebruikers met een visuele beperking ‘lezen’ namelijk ook de titel van je afbeelding om te ontdekken wat het onderwerp van een afbeelding is.

Structuur aanbrengen in de asset library

In de asset library kan je aan de hand van folders en subfolders een structuur maken om al je bestanden overzichtelijk te ordenen en dus snel terug te vinden.

Een submap maak je aan door met je rechtermuisknop op ‘Files’ te klikken. Je klikt op “New subfolder”, geeft je map een naam (bv: blog) en kan in deze nieuwe subfolder bv alle afbeeldingen en pdf’s die je voor je blogberichten wilt gebruiken, opslaan.

Soms zie je niet meteen alle subfolders (de structuur is dan dichtgeklapt): door op het pijltje te klikken voor ‘Files’ klapt de structuur open en krijg je de submappen te zien.

Je kan bij wijze van spreken tot in het oneindige subfolders toevoegen en deze via drag and drop een andere plaats geven in je mappenstructuur.

Via drag and drop kan je toegevoegde bestanden ook heel makkelijk verplaatsen van de ene naar de andere folder, zonder dat dit invloed gaat hebben op de content van je pagina, je gaat dus geen broken images krijgen.

NB. Standaard voegt Craft een map ‘Temporary uploads’ toe, deze map heeft het systeem nodig, maar je gaat daar als contentmanager nooit gebruik van maken.

Tip: list view vs grid view

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

Zoeken en sorteren in de asset library

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

Bestanden toevoegen vanuit een entry

Zoals hier uitgelegd, gaan we ervan uit dat je bestanden altijd eerst in je asset library zet, en dan pas gaat gebruiken. Dat hoeft echter niet. Je kan er immers ook voor kiezen om vanuit een specifieke entry (bvb. een nieuwe blogpost) de asset library open te klikken en van daaruit een bestand toe te voegen.

Je kan vanuit een entry of een pagina in de WYSIWYG ook steeds een link leggen naar een bestand dat in deze bestandsbibliotheek werd opgeslagen.

Bestanden bewerken, vervangen en downloaden in de asset library

Je hebt heel wat mogelijkheden om bestanden te bewerken. Je kan de mogelijkheden bekijken door een bestand aan te vinken in de lijst en vervolgens op het tandwieltje bovenaan te klikken.

Preview file

Hiermee kan je de afbeelding in het groot bekijken. Er opent dan een pop-up met de afbeelding in detail.

Download file

Hiermee kan je het bestand opslaan op je eigen harde schijf. Kan handig zijn als een afbeelding die jij wil gebruiken in bvb. een presentatie, niet door jou maar door een collega werd toegevoegd. Je kan dan die afbeelding gemakkelijk via deze weg downloaden.

Edit asset

Hier kan je de titel en bestandsnaam aanpassen. Zoals hierboven vermeld, is een goede benaming van de gebruikte bestanden belangrijk.

Als je met je muis over de afbeelding beweegt of het zwarte gedeelte er rond, verschijnt er een knop “edit”. Als je daarop klikt, kan je je afbeelding bewerken (roteren, croppen of focuspunt bewerken).

Je kan een afbeelding recht of links roteren, spiegelen of zelf kantelen met de schaal onderaan de pagina. Via de crop functie (links in het menu) kan je een bepaald stuk van je afbeelding uitsnijden.

Via het focal point stel je in waar de focus van de afbeelding ligt, bv je kan het focuspoint van de afbeelding op het gezicht van een persoon zetten zodat deze op de front-end nooit afgekapt wordt weergegeven.

In het voorbeeld hierboven, is er een foto in portrait (staand formaat) opgeladen, maar deze wordt als landscape (liggend formaat) weergegeven in de front-end. Het focuspunt ligt standaard in het midden van de foto, waardoor de bovenkant van het gezicht wordt afgesneden.

Als we het focuspunt aanpassen van het midden van de afbeelding naar de ogen, zien we dat de afbeelding op de front-end nu beter wordt weergegeven.

Je aanpassingen (roteren, croppen of focuspunt aanpassen) sla je op door rechts onderaan op de save button te klikken. Je kan ervoor kiezen om de afbeelding als nieuw bestand op te slaan (zodat de niet bewerkte versie blijft bestaan) -> “save as a new asset” of de huidige afbeelding te vervangen -> “save”

Rename file

Hier kan je de naam van het bestand aanpassen. (kon je ook al hierboven bij 'edit asset').

Replace file

Via 'replace file' kan je het bestand vervangen door een andere bestand dat op je harde schijf staat. Belangrijk om te weten is dat je op deze manier alle plaatsen waar dit bestand staat, gaat aanpassen. Dat is heel handig als je bijvoorbeeld op meerdere plaatsen linkt naar één pdf en deze aangepast moet worden. Je past die in de asset library aan en alle pagina’s bevatten meteen de laatste versie.

Je gebruikt deze manier niet als je de pdf op slechts één plaats wilt aanpassen, dan laad je de nieuwe pdf op en past enkel die ene link aan.

Copy reference tag

Dit gaan jullie als contentmanager niet nodig hebben. Dit is de ID van een bestand waar onze developers bij het coderen gebruik van kunnen maken

Edit image

Door hier op te klikken, kom je meteen in de aanpassingsmodus van een afbeelding uit, waarvan hierboven bij “edit asset” alle functionaliteiten zijn toegelicht.

Clear image transforms

We zorgen voor een aantal transformaties op een afbeelding. Hier kan je deze verwijderen, maar je gaat daar als contentmanager nooit gebruik van maken.

Delete

Zo verwijder je een bestand uit de asset library.

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