第一张图片仅来自 indexpage 上的 photoset，然后全部在 permalinkpage答案

【问题标题】：First image only from photoset on indexpage, then all on permalinkpage第一张图片仅来自 indexpage 上的 photoset，然后全部在 permalinkpage
【发布时间】：2013-04-30 09:09:37
【问题描述】：

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

【问题讨论】：

标签： image indexing tumblr permalinks

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

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

但是有两种可能的解决方案：

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

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

【讨论】：

【解决方案3】：

您只需要根据您是在索引还是永久链接上调整显示方式。在索引上，您将遍历所有照片并通过 CSS 隐藏除第一张以外的所有照片。

首先，您将添加一个 CSS 挂钩，以便您知道自己在索引页面上（无论如何都应该这样做）：

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

照片集块：

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

【讨论】：

【解决方案4】：

我来到这里搜索答案并自己找到了答案。我所做的是将图像上传到 imgur。然后我在 Tumblr 中添加了一个图片帖子，并在描述的 HTML 中添加了其余图片。

希望它可以帮助下一个寻找答案的人。

【讨论】：