Loading...
Logo
Processing Forum
The XML file for Flickr search results doesn't actually display the url with the .jpg name in it - so I'm a little confused at how to get the image to display in Processing. Usually you can just get.Children but again the XML doesn't display the full url for an image. Here's my code so far...

PImage img;
String api  = "http://api.flickr.com/services/rest/?method=flickr.tags.getClusterPhotos&";

HashMap<String, Integer> count = new HashMap();
void setup() {
  size(800, 800);
 
  //text - Free text search. Searches the title, description or tags that contain this text.
  //page - Which page of results you want returned
  //per_page - Number of photos to return per page
  //api_key - Required to access API
 
  String query = api + "text=cat&per_page=50&api_key=bd7435660785b923332b224789d33c93";
  println("Our final query URL:" + query);
  println("**********************");
 
  XMLElement xml = new XMLElement(this, query);
  XMLElement displayPhoto = xml.getChild("photos/photo");
 
  PImage photo = loadImage( displayPhoto.getContent() );
   image(photo, 0, 0, width, height);
  println(xml);
 
}

Can anyone help me out? I'm not interested in using a library I'd just like to keep it simple. Thanks.

Replies(8)

It's possible to reconstruct the url from indirect information like the farm (server) and the id etc. However I find it easier to just add the following exta request to the query. This way the full url of the original image is included in the xml results.
Copy code
  1. &extras=url_o
Talking about xml results, your api + search query are not correct, so they will give an empty xml. The getClusterPhotos search method requires a tag (not text) and a cluster id. So you need something like this to get any results:

http://api.flickr.com/services/rest/?method=flickr.tags.getClusterPhotos&api_key=77530794245b498f9353abe6c5176fe5&tag=cat&cluster_id=1&format=rest&extras=url_o

You can test the correctness of queries in your browser. Knowing how the xml is structured, will make it easier to write the correct Processing code to gather the information you want from it.
That was incredibly helpful. Thank you very much! And sorry for the mix up with the getClusterPhotos it was originally the photos.search but I forgot to change it before posting that was probably confusing...

Thanks again!
Updated code. I got an email earlier with a response I didn't quite understand. I think the user name was Phi.lo? But for some reason now I can't find it.

Here is what my code looks like now:
// The base URL for Twitter's Search API
PImage img;
String api  = "http://api.flickr.com/services/rest/?method=flickr.tags.getClusterPhotos&";


void setup() {
  size(800, 800);
 
  //text - Free text search. Searches the title, description or tags that contain this text.
  //page - Which page of results you want returned
  //per_page - Number of photos to return per page
  //api_key - Required to access API
 
  String query = api + "tag=cat&cluster_id=1&format=rest&extras=url_o&api_key=bd7435660785b923332b224789d33c93";
  println("Our final query URL:" + query);
  println("**********************");
 
  XMLElement xml = new XMLElement(this, query);
  XMLElement displayPhoto = xml.getChild("photos/photo/url_o=");
 
  PImage photo = loadImage( displayPhoto.getContent() );
   image(photo, 0, 0, width, height);
  println(xml);
 
}

I get a NullPointerException error when it's run though. I'm not quite sure how to access the information within a child in the XML document. Still trying to figure that one out.. I also need to have one photo show at a time and then switch to the next one
I posted an answer before seeing the one by amnon.owed and since it was much less helpful, I just deleted it.
I've been meaning to work on a simple way to return flickr images to use with various sketches I am working on so I wrote the following which you could easily adapt. It returns a string which you can simply use in an image method:

Copy code
  1. void setup() {
  2.   size(400, 400);
  3.   PImage img = loadImage(getFlickrImageUrlFromTag("boat", "your_api_key"));
  4.   image(img, 0, 0);
  5. }

  6. String getFlickrImageUrlFromTag(String _tag, String _apiKey) {
  7.   int pageNumber = int(random(2000));
  8.   // build url
  9.   String rest =  "http://api.flickr.com/services/rest/?method=flickr.photos.search";
  10.   rest += "&api_key=" + _apiKey;
  11.   rest += "&tags=" + _tag;
  12.   rest += "&per_page="+1;
  13.   rest += "&page="+ pageNumber;
  14.   rest += "&tag_mode=all&safe_search=3&sort=interestingness-desc";

  15.   // get payload
  16.   XMLElement xml = new XMLElement(this, rest);

  17.   // parse XML results
  18.   XMLElement e = xml.getChild(0).getChild(0);  
  19.   String fm = e.getStringAttribute("farm");
  20.   String sv = e.getStringAttribute("server");
  21.   String id  = e.getStringAttribute("id");
  22.   String sc = e.getStringAttribute("secret");
  23.   // build http string
  24.   String url = "http://farm"+fm+".static.flickr.com/"+ sv + "/" + id + "_" + sc + "_z.jpg";

  25.   return url;
  26. }
Thanks for posting your code. I seem to get this error when I run it though "The file http://farmnull.static.flickr.com/null/null_null_z.jpg contains bad image data, or may not be an image."
I had a problem a long time ago where processing wasn't able to connect to the web because the network I was on required a web proxy server to access the web, and it was screwing up the flickr lookups. Maybe that's the problem. 

I've made some progress over the last few days and I have a code that will display the last image in an array of images. See below:
           

Copy code
  1. String api  = "http://api.flickr.com/services/rest/?method=flickr.tags.getClusterPhotos&";


    void setup() {
      size(800, 800);

      //text - Free text search. Searches the title, description or tags that contain this text.
      //page - Which page of results you want returned
      //per_page - Number of photos to return per page
      //api_key - Required to access API

      String query = api + "tag=cat&cluster_id=1&format=rest&extras=url_o&api_key=YOURAPIKEY";
      println("Our final query URL:" + query);
      println("**********************");

      XMLElement xml = new XMLElement(this, query);
      println(xml);

      XMLElement[] photoTag = xml.getChildren("photos/photo");
      for (int i = 0; i < photoTag.length; i++) {
    //println(displayPhoto);

      String farm = photoTag[i].getString("farm");
      String server = photoTag[i].getString("server");
      String id = photoTag[i].getString("id");
      String secret = photoTag[i].getString("secret"); 
      String img = "http://farm"+farm+".static.flickr.com/"+server+"/"+id+"_"+secret+".jpg";
      println(img);
      PImage photo = loadImage( img );
      image(photo, 0, 0, width, height);
      }
    }
But I need something that displays each image in the array one by one, this code counts through the 24 images in the array but then displays them all at once on top of one another... I know it's probably a stupid easy fix that I'm just not seeing after staring at it for hours. Any suggestions? You guys are awesome so far and super helpful!

Copy code
  1. int maxImages = 24;
    int imageIndex = 0;
    PImage[] photo = new PImage[maxImages];

    String api  = "http://api.flickr.com/services/rest/?method=flickr.tags.getClusterPhotos&";


    void setup() {
      size(500, 500);

      //text - Free text search. Searches the title, description or tags that contain this text.
      //page - Which page of results you want returned
      //per_page - Number of photos to return per page
      //api_key - Required to access API

      String query = api + "tag=cat&cluster_id=1&format=rest&extras=url_o&api_key=YOURAPIKEY";
      println("Our final query URL:" + query);
      println("**********************");

      XMLElement xml = new XMLElement(this, query);
      println(xml);

      XMLElement[] photoTag = xml.getChildren("photos/photo");
      for (int i = 0; i < photoTag.length; i++) {
    //println(displayPhoto);

      String farm = photoTag[i].getString("farm");
      String server = photoTag[i].getString("server");
      String id = photoTag[i].getString("id");
      String secret = photoTag[i].getString("secret"); 
      String img = "http://farm"+farm+".static.flickr.com/"+server+"/"+id+"_"+secret+".jpg";
      println(photo);
      photo[i] = loadImage( img );
      image(photo[imageIndex], 0, 0);
      imageIndex = (imageIndex + 1) % photo.length;
      }
      frameRate(5);
    }