Pull the first image from a Tumblr photoset?

Question

I'm designing a theme for a wedding photographer who wants to use Tumblr's Photoset functionality to create a portfolio site.

How do I pull the first image from a photoset so I can create a home page with a single thumbnail preview (sized to my choosing) that links to each set?

Thanks, Parri

Answer 1

There doesn't seem to be a way to limit them, but you can comment them out. This solution has the advantage that the hidden images won't be loaded at all and it doesn't need any 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}

See that <!-- before {/block:Photos}? That opens an HTML comment right after the first image, so the rest of the images in the loop will be in a comment, invisible. After the loop we close the comment with -->. Done, all the images in the photoset after the first one will be hidden.

Answer 2

Tumblr markup:

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

Note: may be you need {PhotoURL-75sq} to output square preview instead of 500px image;

CSS:

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