Use Flickr as a media manager
The problem
I was building a website using Netlify CMS. However, Git is not really a great tool when it comes to manage a lot of images. I had to find a simple image management tool, so they're not stored directly in the Git repository.
Then I thought about Flickr and how I could use their API to fetch images from a user or an album.
Endpoints
Now we have to check the available endpoints of the Flickr API to find the ones we're interested in. For my case, I needed the flickr.people.getPhotos
endpoint to fetch the list of images fo a specific user, and then for each image the flickr.photos.getSizes
endpoint since I needed exact sizes for the layout library I used.
Fetch images
In the page component, I used the asyncData
method. First, let's get the images:
async asyncData({ $axios, $config: { apiKey, userId, flickrUrl } }) {
const params = {
api_key: apiKey,
user_id: userId,
format: 'json',
nojsoncallback: true
}
let { data: flickrPhotos } = await $axios.get(flickrUrl, {
params: {
...params,
method: 'flickr.people.getPhotos'
}
})
flickrPhotos = flickrPhotos.photos.photo
...
}
apiKey
,userId
andflickrUrl
are environments variables defined in theprivateRuntimeConfig
option of the nuxt.config.ts file. They are then available through the$config
attribute of thecontext
object.
Then get their sizes:
let photos = []
for (const photo in flickrPhotos) {
const { data: flickrSizes } = await $axios.get(flickrUrl, {
params: {
...params,
method: 'flickr.photos.getSizes',
photo_id: flickrPhotos[photo].id
}
})
const sizes = flickrSizes.sizes.size
photos.push({
id: flickrPhotos[photo].id,
title: flickrPhotos[photo].title,
meta: sizes
})
}
return {
photos
}
The images will be available through the photos
object, and can be passed to any desired component.