Search code examples
imageindexingtumblrpermalinks

First image only from photoset on indexpage, then all on permalinkpage

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

Solution

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