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">“</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&type=website"></script></li>
</ul>
{block:PermalinkPage}
<div id="disqus_thread"></div>
<script type="text/javascript" src="http://disqus.com/forums/kyleetilley/embed.js"></script>
<noscript><a href="http://disqus.com/forums/kyleetilley/?url=ref">View the discussion thread.</a></noscript>
{/block:PermalinkPage}
</div>
</li>
</ol>
{/block:Posts}
