Vorige week heb ik in korte tijd mooie achtergronden toegevoegd aan Timesheetr, een visuele time tracking applicatie. In deze post leg ik uit hoe je dat zelf ook kan doen voor je eigen website of app.
Time tracking (bijhouden waar je mee bezig bent) is meestal niet het meest sexy gedeelte van je dag en daarom is een timesheet met een achtergrond inspirerender. Bijvoorbeeld een prachtige foto van een tropisch strand of besneeuwde bergen… Begint het al te kriebelen?
Dat kun jij ook heel gemakkelijk zelf met Unsplash. Een initiatief van Crew.
Fotografen zetten foto’s op Unsplash, maar voordat je deze kunt zien, worden ze eerst goedgekeurd (max. 10 stuks per 10 dagen van alles dat wordt aangeboden), dus de kwaliteit is erg goed. Je kunt alle foto’s zien om dat te beoordelen.
Voor elke foto die ze uploaden doet de fotograaf afstand van de rechten, oftewel iedereen mag de foto voor wat dan ook gebruiken. Lees hier meer over de Creative Commons Zero license.
Je kunt dus een mooie foto uitzoeken en gebruiken voor jezelf, maar het wordt nog leuker.
Er zijn 2 API’s: een makkelijke en moeilijkere methode om foto’s op een nog leukere manier te gebruiken. Ik beperk me hier tot de makkelijke methode: Unsplash Source API. Als je een klein beetje bekend met html dan weet je hoe je een plaatje aan een website toevoegd:
<img src=”http://example.org/path/to/img” />
Je kan dus een leuke foto uitzoeken en deze opslaan op je website en dan de URL van de foto in het src=”” attribuut van de img tag zetten.
Maar met de simpele API kan je ook een willekeurig plaatje opvragen uit een bepaalde categorie. Of met een bepaalde tag.
Bijvoorbeeld:
<img src=”https://source.unsplash.com/category/technology” />
<img src=”https://source.unsplash.com/1600×900/?beach” />
Kies de tag alleen als je zeker weet dat er flink wat van zijn. Met een van deze URL’s krijg je elke keer een ander willekeurig plaatje. Als je dat maar een keer per dag of een keer per week wilt laten wijzigen dan kan je dat zo regelen:
<img src=”https://source.unsplash.com/category/technology/weekly” />
Wil je een bepaalde grootte? Geen probleem, vul de afmetingen zo in:
<img src=”https://source.unsplash.com/category/technology/1600×900/weekly” />
Overwegingen voor apps
Voor Timesheetr heb ik eerst overwogen om alle foto’s met tag beach te laten kiezen. Maar omdat je dan toch allerlei verschillende beach foto’s krijgt en niet precies de allergaafste foto’s, koos ik er voor om een paar geweldige foto’s uit te zoeken en die aan te bieden. Daarnaast heb ik nog een helemaal willekeurige foto als optie:
<img src=”https://source.unsplash.com/random/1600×900″ />
Wat trouwens ook nog een leuke manier is, is om een willekeurige foto te tonen van een gebruikers favorieten (likes). Je hebt dan niet de keuze om deze slechts een keer per dag of week te wijzigen, maar je houd wel de keuze van foto’s beperkt tot die favorieten. Maak dan een account aan en markeer de foto’s van je keuze als favoriet. Om een willekeurige foto uit je collectie van favorieten te tonen doe je:
<img src=”https://source.unsplash.com/user/rutger/likes/1600×900″ />
Overwegingen voor websites
Voor een website wil je graag de controle houden op de foto’s, sla dan ook je favoriete foto’s op of kies een foto uit een specifieke selectie.
Het voordeel van hun link gebruiken ipv de foto op je eigen website te zetten is dat ze gebruik maken van een CDN (Content Delivery Network). Een CDN levert foto’s, maar ook javascript en css bestanden via een netwerk aan de eindgebruiker, die hierdoor korte laadtijden ervaart, wat weer voor een betere website ervaring zorgt (en dus meer omzet etc.) Het nadeel is dat het buiten je controle valt als je het op hun CDN laat staan en als hun CDN het niet zou doen, dan heb je een kapotte app of website. Dus het kan geen kwaad om de foto te downloaden en je eigen CDN te gebruiken, maar tot nog toe heb ik zelf geen problemen ondervonden.
Indien je zelf een CDN wil hebben waar je deze foto’s in eigen beheer wilt gebruiken, dan kun je ook bij je host navragen of zij deze technologie al aanbieden. Wij hebben zo’n hosting pakket, waarbij je inclusief gebruik kunt maken van een CDN. Lees meer over het WordPress premium pakket met CDN hier.
Conclusie
Unsplash is een geweldige bron van mooie foto’s; helemaal gratis te gebruiken en op een makkelijke manier. Geen wonder dat er veel gebruik van gemaakt wordt. Je hoeft niet eens naar ze te linken, maar dat wordt uiteraard wel gewaardeerd.
