Incorporating slideshow / carousel into custom tumblr theme

Question

Got a very particular problem here:

I've been developing a tumblr-hosted site locally, using the API to pull in posts without having to copy and paste the project into tumblr a million times. I decided I liked the API better and would just use that in production, but now that it's time to deploy I realize that I have to go back to the custom theme, {block:Posts} method.

I have the post feeding into a Cycle2 slideshow, with 3 slides containing 3 posts each for a total of 9 playlists viewable without going back to the archive. This method works perfectly with the api, but is getting messed up in the custom theme. Here's my current code:

<div class="cycle-slideshow">
    {block:Posts}
    {block:Text}

    <div class="slide-wrapper">
        <div class="post">
            {block:Post1}
            {block:Title}<a href="{Permalink}"><h2>{Title}</h2></a>{/block:Title}
            <div class="blog_item">
                {Body}
            </div>

            {/block:Post1}
        </div>  
        <!--two more posts before end of slide... -->
    </div>

    {/block:Text}
    {/block:Posts}
    </div> <!--end of slide wrapper - 2 more of these before end of slideshow div..

I also tried scrapping the post numbers, but still no dice. In tumblr's docs, they say that

Example: {block:Post5}I'm the fifth post!{/block:Post5} will only be rendered on the fifth post being displayed.

I'm wondering if "being displayed" refers to the html visibility of the post, and if so, if that's interfering with the cycle plugin? The results are one ill-formatted post per slide, and then after cycling through 2 blank slides, the next oldest post takes its place. I'll be pleasantly surprised if anybody has ever had a similar problem but I would kill for some advice. Here's the development site for reference (and the second carousel is working because it's still hooked up to the api). thanks!!

I can tell right off the bat why this isn't going to work like you want it to: Post are not numbered by their type. Therefore, with this code, {block:Post1} is only going to show up if the first post happens to be a text post. Actually, it's probably confusing the heck out of the rendering engine that you have a numbered post inside of a post type and not the other way around. — Ally

Ally Ally · Accepted Answer · 2013-10-07T16:47:37

Generally speaking, the following code is what you'd want to have 3 slideshows with 3 posts each.

Note that in the Additional Settings on the Customize screen, you'd have to set the post count to 9 per page in order for this to work properly. I wrapped it in an Index Page block, otherwise this is going to look nasty on a Permalink Page.

{block:IndexPage}
{block:Posts}
    {block:Post1}<div class="cycle-slideshow">{/block:Post1}
    {block:Post4}<div class="cycle-slideshow">{/block:Post4}
    {block:Post7}<div class="cycle-slideshow">{/block:Post7}

    <div class="slide-wrapper">

         {block:Text}
         <div class="post">
           {block:Title}<a href="{Permalink}"><h2>{Title}</h2></a>{/block:Title}
           <div class="blog_item">
               {Body}
           </div>
         </div>  
         {/block:Text}

        {block:Photo}
             ...
        {/block:Photo}

        ...

    </div>

    {block:Post3}</div>{/block:Post3}
    {block:Post6}</div>{/block:Post6}
    {block:Post9}</div>{/block:Post9}
{/block:Posts}
{/block:IndexPage}

However, if you're wanting 3 slideshows with the post types split between the slideshows, the code would look more like the following.

Note that in this scenario, if you were to have 4 texts posts out of 9, all 4 text posts would end up in the Text slideshow. You'd have to use Javascript or CSS to remove or hide the additional posts if you're very strict about your 3.

{block:IndexPage}
    <div class="cycle-slideshow">
    {block:Posts}
         {block:Text}
         <div class="slide-wrapper">
         <div class="post">
           {block:Title}<a href="{Permalink}"><h2>{Title}</h2></a>{/block:Title}
           <div class="blog_item">
               {Body}
           </div>
         </div>  
         </div>
         {/block:Text}
    {/block:Posts}
    </div>

    <div class="cycle-slideshow">
    {block:Posts}
         {block:Photo}
         <div class="slide-wrapper">
             ...
         </div>
         {/block:Photo}
    {/block:Posts}
    </div>
{/block:IndexPage}

If you need me to clarify anything, let me know.

Incorporating slideshow / carousel into custom tumblr theme

1 Answers