从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中拉出第一张图片？

回答

相关问题