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

我正在爲想要使用Tumblr的Photoset功能創建投資組合網站的婚禮攝影師設計主題。從Tumblr photoset中拉出第一張圖片？

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

感謝，帕裏

2012-02-08 Parri

您可能想查看效應器主題的源代碼。它會從第一張圖像開始創建一個來自照片的幻燈片。 [鏈接]（http://pastie.org/1497762） – Ally 2012-02-12 23:39:54

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

來源

2012-07-18 03:35:34

+1的答案，但我試圖添加鏈接後發生問題 – 2012-11-27 11:47:54

@SaqibSaud詳細描述你的問題 – 2012-11-27 11:54:45

其在上述情況下工作。但不適合這個工作的一個 ' {塊：Photoset}

{block:Photos}

{/block:Photos}

{/塊：Photoset} ' – 2012-11-27 11:55:36

爲用戶下載，即使只有第一個被顯示，而不是我用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。

希望幫助

來源

2012-12-14 14:20:16 LittleBigTank

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

請參閱關閉評論。完成後，第一張照片中的所有圖像將被隱藏。

來源

2014-11-26 19:13:53

非常好！此解決方案解決了上述兩個問題：第一張照片後不加載任何內容，並且不需要JavaScript。另外它的實現更簡單。 – Marquizzo 2015-01-22 00:47:30

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

回答

相關問題