flickr эквивалентно source.unsplash.com

Моя проблема в том, что мне нужно получить случайное изображение из поиска Flickr (тег, цвет, лицензия). Я потратил день, пытаясь понять, как работает flickr api, но с моими базовыми навыками работы с html, css и js я потерял эту вещь.

Для моего последнего проекта я использовал API-интерфейс unsplash, который очень прост, URL дает вам изображение. Например. Если я хочу разместить фотографию собаки на своем веб-сайте, я просто должен сделать это:

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

Есть ли способ сделать это с помощью Flickr? Может быть, с php, есть URL, который генерирует изображение? Может ли кто-нибудь указать мне на очень простое руководство по работе с flickr api?

заранее спасибо

Источник

2 ответа

Решение

Я бы запросил flickr.photos.search и использовал возвращенный JSON для построения URL, который был бы значением src тега img. Вот пример, если как сделать это с помощью jQuery.getJSON().

Сначала вам нужно зарегистрировать свое приложение и получить ключ API здесь.

После того, как у вас есть ключ API, вот основная демонстрация того, как искать API, возвращать один результат и отображать результат в теге img. Для простоты единственной существующей обработкой ошибок является невозможность получить JSON. Обратите внимание, что для демонстрации требуется 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);
        });
});
Источник

Прежде всего, вам нужно получить секретный ключ разработчика из App Garden.

Далее, поскольку вы заявили, что заинтересованы в выполнении поиска, посмотрите документацию по API. Вы увидите несколько "наборов" слева и "методы API" справа. В методе photos вы можете увидеть flickr.photos.search, который объясняет аргументы, которые вы можете передать API, какой тип ответа ожидать и т. Д. Отлично, так что теперь нам просто нужен пример кода.

Я искал в Google "пример flickr search php" и наткнулся на этот урок. Код для этой страницы приведен ниже для вашего удобства, и я проверил локально, чтобы убедиться, что он действительно работает:

<?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."' />";
}

Надеюсь, это поможет вам начать. Кроме того, вы можете взять один из упомянутых выше наборов и использовать его, чтобы увидеть дополнительные примеры.

Источник
Другие вопросы по тегам