從Tumblr photoset中拉出第一張圖片？

Question

我正在爲想要使用Tumblr的Photoset功能創建投資組合網站的婚禮攝影師設計主題。

如何從照片集中拉出第一張圖片，以便創建一個鏈接到每個集合的單個縮略圖預覽（根據我選擇的大小）創建主頁？

感謝， 帕裏

Answer 1

的tumblr標記：

{block:Photoset} 
    <div class="photoset-wrap"> 
    {block:Photos} 
     <img src="{PhotoURL-500}" /> 
    {/block:Photos} 
    </div> 
{/block:Photoset} 

注：可能是你需要{PhotoURL-75sq}輸出方預覽，而不是500像素圖像;

CSS：

.photoset-wrap img { display: none; } 
.photoset-wrap img:first-child { display: block; } 

Answer 2

爲用戶下載，即使只有第一個被顯示，而不是我用jQuery來僅注入第一圖像的所有圖像上面的例子是有缺陷的。

HTML（簡化）：

{block:Photoset} 
    <div class="photoset"> 
     {block:Photos} 
      <div class="photoPlaceholder" imgsrc="{PhotoURL-500}"></div> 
     {/block:Photos} 
    </div> 
{block:Photoset} 

JavaScript的（簡化的）：

$(document).ready(function() { 
    $(".photoset .photoPlaceholder").first().each(function (i) { 
     var src = $(this).attr("imgsrc"); 
     $(this).html('<a href="#"><img src="'+ src +'" /></a>'); 
    }); 
}); 

這確保只有被加載第一圖像......你總是可以有上述的其他例子的CSS noscript標籤，因爲他們已關閉了JavaScript。

希望幫助

Answer 3

似乎有沒有一種方法來限制他們，但你可以評出來。該解決方案具有隱藏的圖像將不會在所有加載和它不需要任何JavaScript

{block:Photoset} 
    <!-- Go through each Photo in the Photoset --> 
    {block:Photos} 
     <img src="{PhotoURL-HighRes}" class="highres"> 
     <!-- 
    {/block:Photos} 
    --> 

    {block:Caption} 
     <p>{Caption}</p> 
    {/block:Caption} 
{/block:Photoset} 

請參閱<!--之前{/block:Photos}的優勢在哪裏？這會在第一張圖片之後打開HTML註釋，因此循環中的其餘圖片將在評論中隱藏。循環結束後，我們用-->關閉評論。完成後，第一張照片中的所有圖像將被隱藏。