Cycling through CSS Post classes in Tumblr

Question

I am trying to style my {block:Photo} styles in Tumblr, so that each time a photo is posted, it will cycle through a selection of, for instance, 5 slightly different classes for displaying the picture.

An example of such can be found here (where each photo table has a unique max-width property): http://www.nontemporary.com/

The code I've come up with so far, having made ample use of the Chrome inspector is thus:

            {block:Posts}

            {block:Photo}

                <li class="post photo">

                    <table width="100%" align="left" valign="top" cellpadding="0" cellspacing="0">
                        <tbody>
                            <tr class="postspace">
                                <td></td>
                            </tr>
                            <tr class="postrow">
                                <td class="postdistrict">
                                 <img src="{PhotoURL-HighRes}" alt="{PhotoAlt}" align="left" valign="top" class="post1">
                                <td>
                                 <td class="postdistrict">
                                 <img src="{PhotoURL-HighRes}" alt="{PhotoAlt}" align="left" valign="top" class="post1">
                                <td>
                            </tr>

                        </tbody>
                     </table>

                </li>
            {/block:Photo}


        {/block:Posts}

Naturally, I think I'll have to create some custom classes for the widths, but my main question is really how I should go about getting Tumblr to cycle through those widths, as can be seen in the example.

Thanks!

Answer 1

If you want them to cycle through the classes in order (like the example does) you can utilise the fact that tumblr lets you style each number of post.

Here is an example of what you would do:

<li class="post-{block:Post1}1{/block:Post1}{block:Post2}2{/block:Post2}[...]{block:Post15}15{/block:Post15}">

This would render as

<li class="post-1">

with the 1 depending on what number post it is.

From here you can easily make classes for .post-1 through to .post-15.

If you would like something random instead, javascript/jquery will be needed.