2014-05-07 37 views
2

我使用Instafeed.js(http://instafeedjs.com)從Instagram收集圖像並在我的網站上顯示它們。但是,如何控制每張圖片的大小,並控制它是低分辨率還是標準分辨率?Instafeedjs - 如何給每個圖片不同的大小

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

回答

2

有點晚了,我知道,但有一個簡單的和可擴展的方式來處理這一問題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

相關問題