Question

你好 - 我一直在玩tumblr photosets，目前我正在使用基于砖石的主题。使用照片集，我希望只在索引页面上显示照片集的第一张图像，但在永久链接页面上我希望显示照片集的所有图像。感谢

Answer 1

我发现最简单有效的方法是在第一张照片后打开评论标记，并在添加完所有照片后关闭它。

{block:Photoset}
    {block:Photos}
        <img src="{PhotoURL-HighRes}" class="highres">
        <!--
    {/block:Photos}
    -->
{/block:Photoset}

这会将所有后续照片注释掉。这样做的好处是它不需要任何CSS或JS，而且它不会通过加载photoset中的所有图像来浪费带宽。

Answer 2

可悲的是，由于Tumblr缺乏模板逻辑，因此无论如何都无法在索引页面上显示照片集的第一张图像。

然而，有两种可能的解决方案：

使用CSS隐藏索引页面上照片集的第一张图片以外的所有内容。（请注意，无论如何都会下载所有图像。）
不要在索引页面上包含photoset的任何图像，而是使用Tumblr API（http://www.tumblr.com/docs/en/api/v2）请求第一张图像。

AFAIK没有其他方法可以实现这一目标。

Answer 3

您只需调整显示方式，具体取决于您是在索引还是固定链接上。在索引上，您将遍历所有照片并通过CSS隐藏所有照片，除了第一张照片。

首先，你将添加一个CSS钩子，这样你就知道你在索引页面上（无论如何应该这样做）：

<body class="{block:IndexPage}index-page{/block:IndexPage}">

Photoset Block：

{block:Photoset}
    {block:IndexPage}
        <div class="photos">
        {block:Photos}
            <img alt="" src="{PhotoURL-500}">
        {/block:Photos}
        </div>
    {/block:IndexPage}

    {block:PermalinkPage}
        {Photoset-500}
    {/block:PermalinkPage}
{/block:Photoset}

CSS：

.index-page .photos img {
    display: none;
}

.index-page .photos img:first-child {
    display: block;
}

Answer 4

我来到这里寻找答案并自己找到答案。我所做的是将图像上传到imgur。然后我在Tumblr中添加了一个picturepost，并在描述的HTML中添加了剩下的图像。

希望它有助于下一个寻找答案。

第一张图片仅来自indexpage上的photoset，然后全部是永久链接页面

4 个答案: