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

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

Answer 2

the above example is flawed as the user has to download all the images even though only the first is shown so instead I've used jquery to inject only the first image.

HTML (simplified):

{block:Photoset}
    <div class="photoset">
        {block:Photos}
            <div class="photoPlaceholder" imgsrc="{PhotoURL-500}"></div>
        {/block:Photos}
    </div>
{block:Photoset}

javascript (simplified):

$(document).ready(function() {
    $(".photoset .photoPlaceholder").first().each(function (i) {
        var src = $(this).attr("imgsrc");
        $(this).html('<a href="#"><img src="'+ src +'" /></a>');
    });
});

This ensures only the first image is loaded... you can always have the other css example above in a noscript tag incase they have javascript turned off.

Hope that helps

Answer 3

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.