javascript - Instafeed Js - 如何给每张图片不同的尺寸

Question

我正在使用 Instafeed.js ( http://instafeedjs.com ) 从 Instagram 收集图像并将它们显示在我的网站上。但是如何控制每张图片的大小，控制是低分辨率还是标准分辨率呢？

<script type="text/javascript">
    var userFeed = new Instafeed({
        get: 'user',
        userId: userID,
        accessToken: 'accessToken',
        resolution: 'standard_resolution',
        template: '<a href="{{image}}"><img src="{{image}}" /></a>'
        });
    userFeed.run();
</script>

我以前用过这段代码，但是现在不行了:

<?php
// Supply a user id and an access token
$userid = "userID";
$accessToken = "acessToken";

// Gets our data
function fetchData($url){
    $ch = curl_init();
    curl_setopt($ch, CURLOPT_URL, $url);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
    curl_setopt($ch, CURLOPT_TIMEOUT, 20);
    $result = curl_exec($ch);
    curl_close($ch); 
     return $result;
}

// Pulls and parses data.
$result = fetchData("https://api.instagram.com/v1/users/2254178/media/recent/?access_token=2254178.467ede5.4cf795f92f0a49b68724a782e706f6b5");
$result = json_decode($result);
?>

<?php $x = 1; ?>
if($x == 1) { 
    echo'<a class="group left big" rel="group1" href="'.$post->images->standard_resolution->url.'"><img src="'.$post->images->standard_resolution->url.'"></a>';
    $x = 2; 
}

else if($x == 2) {
    echo'<a class="group left small" rel="group1" href="'.$post->images->standard_resolution->url.'"><img src="'.$post->images->low_resolution->url.'"></a>';
    $x = 3; 
}

Answer 1

我知道有点晚了，但是有一种简单且可扩展的方法可以使用 instafeed.js 来处理这个问题。

当您创建 Instafeed 实例时，您应该在模板中引用模型变量。例如:

<script type="text/javascript">
    var userFeed = new Instafeed({
        get: 'user',
        userId: userID,
        accessToken: 'accessToken',
        resolution: 'standard_resolution',
        template: '<a href="{{model.images.low_resolution.url}}"><img src="{{image}}" /></a>'
        });
    userFeed.run();
</script>

将为您提供链接到较低分辨率图像的标准分辨率图像。通过允许访问整个 JSON 模型，Instafeed 为您提供了对如何使用图像的大量控制。

Stephen Schobert(instafeed 作者)在此处提供了关于模型包含内容的一个很好的示例:https://github.com/stevenschobert/instafeed.js/issues/21