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

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

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

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

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

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

источник

2016-04-28 youpielove

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

Для начала вам необходимо зарегистрировать свое приложение и получить ключ API here.

Как только у вас есть ключ 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); 
     }); 
});

источник

2016-04-28 18:37:01 plr108

Спасибо! Отличный ответ для меня с тех пор, как я в настоящее время изучаю jquery, поэтому я могу войти в этот код и внести изменения ... угадайте, что другой ответ действительно, но я пока не знаю php. Удивительно! – youpielove

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

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

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

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

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

источник

2016-04-28 17:55:51

ответ

Смежные вопросы