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 phot

Answer 1

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}
    

        {block:Photos}
            

        {/block:Photos}
    
{block:Photoset}

javascript (simplified):

$(document).ready(function() {
    $(".photoset .photoPlaceholder").first().each(function (i) {
        var src = $(this).attr("imgsrc");
        $(this).html('');
    });
});

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