Wednesday 5 September 2007

Peek-A-Boo Posts from Labels (from my inbox)

I feel a little guilty trying to take you up on an offer of help you made so long ago, but it seems like Ramani has not answered questions about this in a while and I thought perhaps you would have a sense of what's going on. I really would like to get this hack operational on my blog, but I cannot make it work. I keep getting a message about b:includable elements not being permitted in widget 1. I've checked and rechecked and re-re-checked that I'm putting everything in the correct place. Any other thoughts about what might be wrong here?
Thanks very much,
Emilie


Emilie, I think Ramani probably is busy with his new baby. If I remember right, they had a baby not long ago. So, I took a look at Ramani's post and tried it in a practice blog. I got the same message as you. I played with it a bit and was able to make it work. With only one change. I will outline the steps here.

Open your Dashboard | Template | Edit HTML | and check Expand Widget Templates. After the <head> tag place the following code:

<script type='text/javascript'>
function toggleIt(id) {
post = document.getElementById(id);
if (post.style.display != 'none') {
post.style.display = 'none';
} else {
post.style.display = '';
}
}
</script>
That was the change I made from Ramani's code. I don't understand it so much, but it works. The rest is the same. You can read the rest on Hackosphere or expand this post for the second part of the instructions.

+/-

Your widgets are expanded from the instructions above. Now look for blog-posts and add the code in red.
<b:includable id='PeekABooPost' var='post'>
<div class='post uncustomized-post-template'>
<table><tr>
<td width='40px'>
<a href='javascript:void(0)' title='Expand/collapse this post' style='text-decoration:none' expr:onclick='"javascript:toggleIt(\"" + data:post.id + "\");"'>[+/-]</a>
</td>
<td>
<h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3>
</td>
</tr></table>
<div class='post-body' expr:id='data:post.id' style='display:none'>
<p><data:post.body/></p>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
</div>
</b:includable>


<b:includable id='main' var='top'>
<!-- posts -->
<div id='blog-posts'>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType != "item"'>
<b:include data='post' name='PeekABooPost'/>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>

<b:include data='post' name='post'/>

</b:if>

<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:post.allowComments'>
<b:include data='post' name='comments'/>
</b:if>
</b:if>
</b:loop>
</div>

post signature

No comments:

Post a Comment