从Tumblr相册中提取第一张图片？

Question

我正在为一位婚礼摄影师设计主题，他想使用Tumblr的Photoset功能创建一个作品集网站。

我该如何从Photoset中提取第一张图片，以便创建一个主页，其中包含一个缩略图预览（大小由我选择），并链接到每个作品集？

谢谢， Parri

- Parri

---

你可能想要查看Effector主题的源代码。它可以从第一张图片开始创建幻灯片。链接 - Ally

Answer 1

似乎没有办法限制它们，但是您可以将它们注释掉。这种解决方案的优点是隐藏的图像根本不会被加载，也不需要任何 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注释，所以循环中的其余图片将被隐藏在注释中无法显示。 循环结束后，我们使用-->关闭注释。 完成，相册中第一张图片后的所有图片都将被隐藏。

- fregante

---

非常好！这个解决方案解决了你之前两个答案的问题：它不会在第一张照片后加载任何内容，也不需要 JavaScript。此外，它实现起来更加简单。 - M -

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

这样可以确保只加载第一张图片...如果他们关闭了JavaScript，您始终可以在noscript标签中包含上面的其他CSS示例。

希望这有所帮助。

- LittleBigTank

Answer 3

Tumblr标记语言：

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

注意: 你可能需要使用{PhotoURL-75sq}来输出正方形预览图，而不是500px的图像；

CSS：

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

- Vladimir Starkov

---

但是我在尝试添加帖子链接时遇到了问题。 - Saqib Saud

@SaqibSaud 请详细描述您的问题。 - Vladimir Starkov

在上述情况下它能工作，但在这种情况下无法工作 ` {block:Photoset} <div class="photoset-wrap"> {block:Photos} {/block:Photos}

{/block:Photoset}` - Saqib Saud

@SaqibSaud 你想将整个带有大量图像的照片集转换为链接吗？在单独的照片帖子中，使用<a/>标签是被接受的（因为链接中只有一个元素），但对于照片集则不是。 - Vladimir Starkov

谢谢@vladimir-starkov，我明白你的意思了。那么如何在仅显示单个图像的情况下添加到照片集的链接呢？ - Saqib Saud

@SaqibSaud 这是另一个问题，请创建新的问题；评论并不是找到解决方案的舒适方式。 - Vladimir Starkov