flickr entspricht source.unsplash.com

Mein Problem ist, dass ich ein zufälliges Bild von einer Flickr-Suche (Tag, Farbe, Lizenz) bekommen muss. Ich habe einen Tag damit verbracht, herauszufinden, wie die flickr api funktioniert, aber mit meinen grundlegenden Fähigkeiten mit html, css und js bin ich mit dieser Sache verloren.flickr entspricht source.unsplash.com

Für mein letztes Projekt habe ich die unsplash api benutzt, die super einfach ist, eine URL bekommt man ein Bild. Beispielsweise. Wenn ich einen Hund Bild in meiner Website einbetten möchte, muß er genau das tun:

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

Gibt es eine Möglichkeit mit flickr zu tun? Vielleicht mit PHP, eine URL, die das Bild erzeugen? Könnte mir jemand auf ein sehr einfaches Tutorial hinweisen, wie man mit flickr api arbeitet?

Vielen Dank im Voraus

Quelle

2016-04-28 youpielove

Ich würde flickr.photos.search abfragen und den zurückgegebenen JSON verwenden, um die URL zu erstellen, die der src-Wert des img-Tags wäre. Hier ist ein Beispiel, wie man das mit jQuery.getJSON() macht.

Zuerst müssen Sie Ihre App registrieren und erhalten einen API-Schlüssel here.

Sobald Sie einen API-Schlüssel haben, ist hier eine grundlegende Demo, wie Sie die API durchsuchen, ein Ergebnis zurückgeben und das Ergebnis in einem img-Tag anzeigen. Um die Dinge einfach zu halten, besteht die einzige verfügbare Fehlerbehandlung darin, dass ein JSON nicht erhalten wird. Bitte beachten Sie, dass die Demo erfordert 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); 
     }); 
});

Quelle

2016-04-28 18:37:01 plr108

Dank! Große Antwort für mich, da ich gerade jQuery lerne, damit ich in diesen Code einsteigen und Änderungen vornehmen kann ... denke, dass die andere Antwort auch gültig ist, aber ich PHP für jetzt nicht kenne. Tolle! – youpielove

Zunächst einmal müssen Sie aus dem App Garden

nächstes an einen geheimen Entwicklerschlüssel bekommen, da Sie angegeben haben Sie eine Suche bei der Durchführung interessiert sind, sehen Sie die API documentation . Auf der linken Seite sehen Sie mehrere "Kits" und auf der rechten Seite "API-Methoden". Unter der Methode Fotos können Sie sehen , die die Argumente erläutert, die Sie an die API übergeben können, welche Art von Antwort zu erwarten, etc ... Großartig, so dass wir jetzt nur einige Beispielcode benötigen.

Ich suchte Google nach "flickr Suche PHP-Beispiel" und stieß auf this tutorial. Der Code auf dieser Seite ist für Ihre Bequemlichkeit zur Verfügung gestellt unten, und ich getestet lokal bestätigen es tatsächlich funktioniert:

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

Hoffentlich hilft Ihnen den Einstieg. Alternativ können Sie auch einen der oben genannten Kits verwenden, um weitere Beispiele zu sehen.

Quelle

2016-04-28 17:55:51

Antwort

Verwandte Themen