CODEWITHSUNDEEP
javascriptphpflickrphpflickr
youpielove
youpielove

Reputation: 41

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

Upvotes: 1

Views: 1294

Answers (2)

plr108
plr108

Reputation: 1205

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);
        });
});

Upvotes: 0

mister martin
mister martin

Reputation: 6252

First of all, you need to get a secret developer key from the App Garden

Next, since you've stated you're interested in performing a search, look at the API documentation. You will see several "kits" on the left, and "API methods" on the right. Under the photos method you can see flickr.photos.search, which explains the arguments you can pass to the API, what type of response to expect, etc... Great, so now we just need some example code.

I searched Google for "flickr search php example" and came across this tutorial. The code from this page is provided below for your convenience, and I tested locally to confirm it actually works:

<?php

$api_key = 'your api secret key';

$tag = 'flower,bird,peacock';
$perPage = 25;
$url = 'https://api.flickr.com/services/rest/?method=flickr.photos.search';
$url.= '&api_key='.$api_key;
$url.= '&tags='.$tag;
$url.= '&per_page='.$perPage;
$url.= '&format=json';
$url.= '&nojsoncallback=1';

$response = json_decode(file_get_contents($url));
$photo_array = $response->photos->photo;

foreach ($photo_array as $single_photo) {
    $farm_id = $single_photo->farm;
    $server_id = $single_photo->server;
    $photo_id = $single_photo->id;
    $secret_id = $single_photo->secret;
    $size = 'm';
    $title = $single_photo->title;
    $photo_url = 'http://farm'.$farm_id.'.staticflickr.com/'.$server_id.'/'.$photo_id.'_'.$secret_id.'_'.$size.'.'.'jpg';
    print "<img title='".$title."' src='".$photo_url."' />";
}

Hopefully this helps you get started. Alternatively, you can grab one of the kits mentioned above and use that to see further examples.

Upvotes: 1

Related Questions