如何使用他们的API在我的网页上显示Tumblr博客的所有图像？

Question

问题

在页面上显示图像的代码示例是什么？寻找HTML和javascript

背景

我正在跟进一个教程并且能够复制他们的示例，但现在仍然坚持为我自己的网站实现

代码

Codepen上的演示：http://codepen.io/JGallardo/pen/jVRKGP

的Javascript

这就是我遇到的问题

$.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);
    }
});

我从教程中复制了它，所以如果我理解了一些内容，我可以复制或改进以供我使用，即

什么是var p = postings[i];

我只是想要这些图片，我想让它们在新窗口中打开，但本教程有

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

所以我可以将其清理到像

这样的东西

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

同样在那个网址中，当我与我交换时，它只是不起作用（显示任何图像）。请参阅：http://api.tumblr.com/v2/blog/lolsnack.tumblr.com/posts?api_key=sNCvOfqUTzUJzBOViCbYfkaGeQaFAS4Q4XNtHMu8YPo6No3OiY

我尝试了几个随机的其他博客，它的确有效。包括fashion.tumblr.com和kanye.tumblr.com

我还应该注意，我只想要单张图片，我认为他们的方法是针对照片的吗？

Answer 1

您需要定义帖子类型。正如您在示例中提到的那样，他们的目标是照片集。

此代码适用于照片帖子（您需要稍微修改一下）：

// 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');
        }

修改

好的，你有一些我会尝试和解决的问题。

我已经制作了jsfiddle并评论了我的代码，但我会尝试解释。

首先，将您的api通话从http://更改为https://

其次，你打电话的博客只返回照片帖子，所以你到目前为止的代码工作得很好。默认的帖子数是20，但我设置了50的上限，所有帖子实际上仍然是照片帖子。所以我们不能用它来测试我们的代码。例如，请参阅：http://typophile.tumblr.com/archive/filter-by/text

所以我尝试使用自己的博客并设置50个帖子的上限。

第三，您想将图像包装在一个锚中并在新窗口中打开它们吗？目前，您正在输出带有锚点的图像，并且没有链接的文本。

所以改变这个：

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

对此：

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

这是我的代码：

$.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. 
}
});

如果您从jsfiddle运行并检查控制台，您将看到附加的图像。

如果你查看html输出，你可以看到大多数是我们的代码已经考虑的照片帖子，现在我已经写了一些语句以允许文本帖子和其他帖子类型（真的是后备） 。如果要为更多帖子类型指定不同的输出，则必须将它们添加到if/else if语句中。

为了进一步测试这个，我会尝试在ajax调用中交换url参数，尝试测试其他会返回大量不同帖子类型的博客。

我试过这个url: "https://api.tumblr.com/v2/blog/andthentheycalledmetania.tumblr.com/posts?limit=50&api_key=sNCvOfqUTzUJzBOViCbYfkaGeQaFAS4Q4XNtHMu8YPo6No3OiY",

查看返回的帖子类型。

更适合测试。

我希望这能更好地解释这个过程。如果您有更多问题，请随时提出。