Search code examples
javascriptjqueryrestflickr

How to get pictures from the flickr API


My goal is to bring in photos based on a search of 5 different words; 5 photos each word. I need to bring the pictures back into my site; preferably smaller versions as I will bring many files in.

I am new to rest services in general. I saw this option:

https://www.flickr.com/services/api/flickr.photos.search.html

and I go to the API explorer link at the bottom:

https://www.flickr.com/services/api/explore/flickr.photos.search

and put in 猫 (meaning cat) for the text field and number of pictures per page at 5 and pages 1, so I would only get back 5 images. This gives me this XML link:

https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=4aa062c1cd2da6075e27b599f583665a&text=%E7%8C%AB&per_page=5&page=1&format=rest&api_sig=9f1beab3f0da8f620e197104eb81aa2a

My question would be what would I do with this request? It looks like it is giving ample information to be able to locate each image, but how would I use this XML to pull the images directly into my site?


Solution

  • shellwe --

    After making the request, you'll need to use the information returned to you and build the 'Photo Source URL' (see: https://www.flickr.com/services/api/misc.urls.html)

    In essence, you'll want to loop through the response and build the photo url.

    As an example, using the first line item provided in your link:

    https://farm{farm-id}.staticflickr.com/{server-id}/{id}_{secret}.jpg
    

    would be:

    https://farm5.staticflickr.com/4218/35419029800_7a39f756be.jpg
    

    How you incorporate the final photo urls into your website ultimately depends on how you've got things set up.

    Hope this helps some.