javascriptphpflickrphpflickr

flickr equivalent to source.unsplash.com

My problem is that I need to get a random image from a flickr search (tag, color, licence). I spent a day trying to get how the flickr api is working but with my basic skills with html, css and js I'm lost with this thing.

For my last project I used the unsplash api which is super easy, an url gets you an image. For example. If I want to embed a dog picture in my website, I just have to do that:

<img src="https://source.unsplash.com/featured/?{dog}">

Is there a way to do that with flickr? Maybe with php, have an url that generate the image? Could anyone point me to a very simple tutorial of how to work with flickr api?

Thanks in advance

Solution

  • I would query flickr.photos.search and use the returned JSON to build the URL that would be the src value of the img tag. Here is an example if how to do that using jQuery.getJSON().

    First you will need to register your app and get an API Key here.

    Once you have an API key, here is a basic demo of how to search the API, return one result, and display the result in an img tag. To keep things simple the only error handling present is for a failure to get a JSON. Please note that the demo requires jQuery:

    HTML

    <!DOCTYPE html>
<html lang="en">

<head>
    <title>Basic Flickr Image Search</title>
</head>

<body>
    <label for="query">Search Flickr:</label>
        <input id="query" type="text" placeholder="Dog">
        <input id="submit" type="submit">

    <div id="container"></div>
    <script src="jquery.min.js"></script>
    <script src="app.js"></script>
</body>

</html>

    JavaScript (app.js)

    var query = $('#query');
var submit = $('#submit');
var container = $('#container');

submit.click(function() {

    // Clear the previously displayed pic (if any)
    container.empty();

    // build URL for the Flickr API request
    var requestString = "https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=";

    // Replace XXXXXXXX with your API Key
    requestString += "XXXXXXXX";

    requestString += "&text=";

    requestString += encodeURIComponent(query.val());

    requestString += "&sort=relevance&media=photos&content_type=1&format=json&nojsoncallback=1&page=1&per_page=1";

    // make API request and receive a JSON as a response
    $.getJSON(requestString)
        .done(function(json) {

            // build URL based on returned JSON
            // See this site for JSON format info: https://www.flickr.com/services/api/flickr.photos.search.html
            var URL = "https://farm" + json.photos.photo[0].farm + ".staticflickr.com/" + json.photos.photo[0].server;
            URL += "/" + json.photos.photo[0].id + "_" + json.photos.photo[0].secret + ".jpg";

            // build the img tag
            var imgTag = '<img id="pic" src="' + URL + '">';

            // display the img tag
            container.append(imgTag);
        })
        .fail(function(jqxhr) {
            alert("Sorry, there was an error getting pictures from Flickr.");
            console.log("Error getting pictures from Flickr");
            //write the returned object to console
            console.log(jqxhr);
        });
});