How can i display all images from a Tumblr blog on my web page using their API?

Question

Question

what are examples of code that will display images on the page? looking for both the HTML and the javascript

Background

I was following along to a tutorial and was able to replicate their example, but now stuck in implementing for my own website

Code

Demo on Codepen: http://codepen.io/JGallardo/pen/jVRKGP

Javascript

this is what I am having a problem with

$.ajax({
    url: "http://api.tumblr.com/v2/blog/typophile.tumblr.com/posts?api_key=sNCvOfqUTzUJzBOViCbYfkaGeQaFAS4Q4XNtHMu8YPo6No3OiY",
    dataType: 'jsonp',
    success: function(posts){
      var postings = posts.response.posts;
      console.log(postings);
      var text = '';
      for (var i in postings) {
        var p = postings[i];
        text += '<li><img src=' + p.photos[0].original_size.url +'><a href='+p.post_url+'>'+p.source_title+'</a></li>';
      }
      $('ul').append(text);
    }
});

I copied that from a tutorial, so if I understand a few things, I can replicate or improve on for my use, namely

What is var p = postings[i];

I just want the images, and I want them to open in a new window, but this tutorial had

<li><img src=' + p.photos[0].original_size.url +'><a href='+p.post_url+'>'+p.source_title+'</a></li>

so i can clean that up to something like

<li><img src=' + p.photos[0].original_size.url +'><a href='+p.post_url+' target="_blank"></a></li>

Also in that url, when i swap it out with mine, it just does not work (display any images). See: http://api.tumblr.com/v2/blog/lolsnack.tumblr.com/posts?api_key=sNCvOfqUTzUJzBOViCbYfkaGeQaFAS4Q4XNtHMu8YPo6No3OiY

I tried a few random other blogs, and it works. including with fashion.tumblr.com and kanye.tumblr.com

I should also note that I only want single images, i think their method was targeted at photosets?

Answer 1

You need to define the post type. As you mention in the example they are targeting photosets.

This code should work with photo posts (you will need to tinker it slightly):

// already in the for loop
var postings = posts.response.posts;
var type = postings[i].type;
        if(type == 'photo'){
             text += '<li><img src=' + p.photos[0].original_size.url /// etc.
        }else if(type == 'text'){
            // do something different with a text post
        }else{
           console.log('Different post type');
        }

EDIT

OK, you have a few issues which I will try and address.

I have made a jsfiddle and commented my code, but I will try to explain.

Firstly, change your api call from http:// to https://

Secondly the blog you are calling is only returning photo posts, so the code you have so far works fine. The default number of posts is 20 but I set an upper limit of 50, and all posts are still in fact photo posts. So we cannot use it to test our code. See for example: http://typophile.tumblr.com/archive/filter-by/text

So I tried using my own blog and setting an upper limit of 50 posts.

Thirdly you want to wrap your images in an anchor and have them open in a new window? Currently you are outputing the image with an anchor afterwards and no text for the link.

So change this:

text += '<li><img src=' + p.photos[0].original_size.url +'><a href='+p.post_url+'>'+p.source_title+'</a></li>';

To this:

text += '<li><a href='+p.post_url+' target="_blank"><img src=' + p.photos[0].original_size.url +'></a></li>';

This is my code:

$.ajax({
//url: "https://api.tumblr.com/v2/blog/typophile.tumblr.com/posts?limit=50&api_key=sNCvOfqUTzUJzBOViCbYfkaGeQaFAS4Q4XNtHMu8YPo6No3OiY", // this blog only returns photo posts, so we cannot test it, even with a limit of 50. But toggle this to see the contents of a different blog. 
url: "https://api.tumblr.com/v2/blog/slack-wise.tumblr.com/posts?limit=50&api_key=sNCvOfqUTzUJzBOViCbYfkaGeQaFAS4Q4XNtHMu8YPo6No3OiY",
dataType: 'jsonp',
success: function(posts){
  var postings = posts.response.posts;
  var text = '';
  for (var i in postings) {
    var p = postings[i]; // assign all the iterations in the loop to a single variable, which is easier to access
    var type = p.type; // iterate through the diffirent post types
    if(type == 'photo'){ // if the post type is a photo output this html. 
        text += '<li><a href='+p.post_url+' target="_blank"><img src=' + p.photos[0].original_size.url +'></a></li>';
    }else if(type == 'text'){ // if the post type is text, output this html 
            text += '<li>' +p.body+ '</li>';
    }else{ // else if the post type is something else output this html
        text += '<li>Some other post type<li>'; 
    }
    console.log(type); // lets log all the different post types so we can see them. 
  }
  $('ul').append(text); // append everything to the ul container. 
}
});

If you run this from jsfiddle and inspect the console you will currently see the attached image.

And if you look at the html output you can see that the majority are photo posts, which our code already accounts for, and now I have written some statements to allow for text posts, and other post types (a fallback really). If you want to specify different output for more post types you have to add them into the if/else if statement.

To further test this I would try swapping the url parameter in the ajax call to try and test other blogs that will return lots of different post types.

I tried this url: "https://api.tumblr.com/v2/blog/andthentheycalledmetania.tumblr.com/posts?limit=50&api_key=sNCvOfqUTzUJzBOViCbYfkaGeQaFAS4Q4XNtHMu8YPo6No3OiY",

And look at the post types returned.

Much better for testing.

I hope this explains the process better. If you have more questions feel free to ask.