In the head put the links for your css and scripts:
<head>
<link href="/media/css/tweeeter.css" rel="stylesheet" media="screen">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="/media/js/jquery.masonry.min.js" type="text/javascript"></script>
</head>
We are going to need a container div with an id that will be the columns and within that div we will need another div with a class. The 2nd div with the class is going to be each individual element inside the columns. I named my id container and the individual tweets class 'tweeeter'. My template body now looks like this(I keep losing my spacing in blogger but you get the picture):
<div id="container">
{% if latest_python_tweets %}
{% for ptweet in latest_python_tweets%}
<div class="tweeeter">
<div class="tweetUsr">
{{ptweet.tweetUsr}} <br />
</div> <!--End of tweetUsr-->
<div class ="tweetText">
<a href="{{ ptweet.tweetUrl }}/">{{ ptweet.tweetText}}</a>
</div> <!--End of tweetText-->
</div> <!--End of tweeeter-->
{% endfor %}
{% else %}
<p>No Tweets Available</p>
{% endif %}
</div> <!--End of container-->
Now we have one last step and that is to create the script to use masonry. We will need the id and the classes we defined in the template.
<script>
$(function()
{
$('#container').masonry(
{
itemSelector: '.tweeeter',
columnWidth : 340
});
});
</script>
There really wasn't much to it and this was a fun little project. I plan on launching this on RonaldSnyder.net within the next couple of days and will try to remember to put a link into this blog post.
No comments:
Post a Comment