如何使用 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];

我只想要图像，我希望它们在新的 window 中打开，但是本教程有

<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>

还有那个 url，当我把它换成我的时，它就是不起作用（显示任何图像）。参见：http://api.tumblr.com/v2/blog/lolsnack.tumblr.com/posts?api_key=sNCvOfqUTzUJzBOViCbYfkaGeQaFAS4Q4XNtHMu8YPo6No3OiY

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

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

Answer 1

您需要定义 post 类型。正如您在示例中提到的，它们针对的是照片集。

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

// 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://

其次，您调用的博客只是 returning 照片 posts，所以您目前的代码工作正常。默认的post个数是20个，但是我设置上限是50个，所有的post实际上还是photo post个。所以我们不能用它来测试我们的代码。参见示例：http://typophile.tumblr.com/archive/filter-by/text

所以我尝试使用自己的博客并将上限设置为 50 posts。

第三，您想将图像包裹在锚点中并让它们在新的 window 中打开？当前，您正在输出带有锚点的图像，并且 link 没有文本。

所以改变这个：

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 输出，您会发现大部分是照片 posts，我们的代码已经考虑到了，现在我已经写了一些语句来允许文本posts 和其他 post 类型（实际上是后备）。如果你想为更多 post 类型指定不同的输出，你必须将它们添加到 if/else if 语句中。

为了进一步测试这一点，我会尝试交换 ajax 调用中的 url 参数，以尝试测试其他博客，这些博客将 return 很多不同的 post 类型.

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

并查看 post 类型 returned。

更适合测试。

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

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

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

javascript

ajax

json

tumblr

问题

背景

代码

Javascript