Running in to some issues with Tumblr's Theme Parser
Posted
by Kylee
on Stack Overflow
See other posts from Stack Overflow
or by Kylee
Published on 2009-10-19T00:04:44Z
Indexed on
2010/03/19
4:01 UTC
Read the original article
Hit count: 555
tumblr
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}
© Stack Overflow or respective owner