可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

Hello - I've been playing around with tumblr photosets and currently i'm using a masonry based theme. With the photosets, i wish to just show the first image of the photoset on the index page but on the permalink page i wish for all the images of the photoset to be shown. Thanks

回答1:

You just need to adjust how you display it depending on if you're on the Index or Permalink. On the index, you'll loop through all of the photos and hide all of them except the first one via CSS.

First, you'll add in a CSS hook so you know you're on the Index page (should do this anyways):

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

回答2:

The simplest and most efficient way I've found is to open a comment tag after the first photo, and close it after all photos have been added.

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

This will have all subsequent photos commented out. The benefit of this is that it doesn't require any CSS, or JS, plus it doesn't waste bandwidth by loading all the images in the photoset.

回答3:

Sadly, due to Tumblr's lack of template logic, its not possible to display the first image of a photoset on the index page, in a pure sense anyway.

However there are two possible solutions:

Use CSS to hide everything but the first image for a photoset on the index page. (Note all images will be downloaded regardless).
Don't include any of the images for a photoset on the index page, but request the first image using the Tumblr API (http://www.tumblr.com/docs/en/api/v2).

AFAIK there isn't another way to achieve this.

回答4:

I came here googeling for an answer and found an answer myself. What I did was upload the images to imgur. I then added a picturepost in Tumblr and in the HTML of the description I put the rest of the images.

Hope it helps the next one looking for an answer.