tags:

views:

265

answers:

1

Below part of a tumblr theme I'm working on and you will notice that I use the {block:PostType} syntax to declare the opening tag of each post, which is a <li> element in an Ordered List. This allows me to not only dynamicly set the li's class based on the type of post but cuts down on the number of times I'm calling the ShareThis JS which was really bogging down the page. This creates a new issue though which I believe is a flaw in Tumblr's parser. Each post is an ordered list with one <li> element in it. I know I could solve this by having each post as a <div> but I really like the control and semantics of using a list. Tumblr gurus? Suggestions?

Sample of code:

{block:Posts}
<ol class="posts">

    {block:Text}
    <li class="post type_text" id="{PostID}">

        {block:Title}
        <h2><a href="{Permalink}" title="Go to post '{Title}'.">{Title}</a></h2>
        {/block:Title}

        {Body}
    {/block:Text}

    {block:Photo}
    <li class="post type_photo" id="{PostID}">

        <div class="image">
            <a href="{LinkURL}"><img src="{PhotoURL-500}" alt="{PhotoAlt}"></a>
        </div>

        {block:Caption}
        {Caption}
        {/block:Caption}
    {/block:Photo}

    {block:Photoset}
    <li class="post type_photoset" id="{PostID}">

        {Photoset-500}

        {block:Caption}
        {Caption}
        {/block:Caption}
    {/block:Photoset}

    {block:Quote}
    <li class="post type_quote" id="{PostID}">

        <blockquote>
        <div class="quote_symbol">&ldquo;</div>
        {Quote}
        </blockquote>

        {block:Source}
        <div class="quote_source">{Source}</div>
        {/block:Source}
    {/block:Quote}

    {block:Link}
    <li class="post type_link" id="{PostID}">

        <h2><a href="{URL}" {Target} title="Go to {Name}.">{Name}</a></h2>

        {block:Description}
        {Description}
        {/block:Description}
    {/block:Link}

    {block:Chat}
    <li class="post type_chat" id="{PostID}">

        {block:Title}
        <h2><a href="{Permalink}" title="Go to post {PostID} '{Title}'.">{Title}</a></h2>
        {/block:Title}

        <table class="chat_log">

            {block:Lines}
            <tr class="{Alt} user_{UserNumber}">

                <td class="person">{block:Label}{Label}{/block:Label}</td>
                <td class="message">{Line}</td>

            </tr>
            {/block:Lines}

        </table>
    {/block:Chat}

    {block:Video}
    <li class="post type_video" id="{PostID}">

        {Video-500}

        {block:Caption}
        {Caption}
        {/block:Caption}
    {/block:Video}

    {block:Audio}
    <li class="post type_audio" id="{PostID}">

        {AudioPlayerWhite}

        {block:Caption}
        {Caption}
        {/block:Caption}

        {block:ExternalAudio}
        <p><a href="{ExternalAudioURL}" title="Download '{ExternalAudioURL}'">Download</a></p>
        {/block:ExternalAudio}
    {/block:Audio}

        <div class="post_footer">

            <p class="post_date">Posted on {ShortMonth} {DayOfMonth}, {Year} at {12hour}:{Minutes} {AmPm}</p>

            <ul>
                <li><a class="comment_link" href="{Permalink}#disqus_thread">Comments</a></li>
                <li><script type="text/javascript" src="http://w.sharethis.com/button/sharethis.js#publisher=722e181d-1d8a-4363-9ebe-82d5263aea94&amp;amp;type=website"&gt;&lt;/script&gt;&lt;/li&gt;
            </ul>

            {block:PermalinkPage}
            <div id="disqus_thread"></div>

            <script type="text/javascript" src="http://disqus.com/forums/kyleetilley/embed.js"&gt;&lt;/script&gt;

            <noscript><a href="http://disqus.com/forums/kyleetilley/?url=ref"&gt;View the discussion thread.</a></noscript>
            {/block:PermalinkPage}

        </div>

    </li>

</ol>
{/block:Posts}
+1  A: 

The Posts block is executed once for each post, thus the markup for the container should go outside this block.

Just put the <ol> right before {block:Posts} and the </ol> directly after the {/block:Posts}

fonetik