I'm attempting to style a generated feed from the Tumblr API. My testing page is here:
http://www.nevermorestudiosonline.com/youtubetest
Feel free to ignore the URL. I did a YouTube thing and didn't bother to change the file name when I started testing with Tumblr. I can't figure out what I'm doing wrong with the background color of my divs. I want the "Posted By" section to fill downwards, and the post content background to fill to the right. (Colors are simply placeholders for the time being. I plan to adjust when I get things actually live on my front page.)
Here's the script I'm running to pull my posts, and subsequently create them within various divs.
jQuery.ajax({url: "http://api.tumblr.com/v2/blog/nevermorestudiosonline.tumblr.com/posts?api_key={api_key}&limit=5&jsonp=log_me", dataType: "jsonp"});
function log_me(data){
console.log(data); //So I can keep an eye on how things are coming in. Will be removed in live version.
for(i=0; (i < data.response.total_posts) && (i < 5); i++){
if (data.response.posts[i].type == "text"){
if (data.response.posts[i].hasOwnProperty('body_abstract')){
$('<div class="blogpost"></div>').append(
'<div class="blogtitle"><h2>' + data.response.posts[i].title + '</h2></div>' +
'<div class="postedby"><img class="avatar" src="http://api.tumblr.com/v2/blog/' + data.response.posts[i].post_author + '.tumblr.com/avatar" alt="Avatar" height="64" width="64" /><p>Posted By ' + data.response.posts[i].post_author + '</p></div>' +
'<div class="postbody">' + data.response.posts[i].body_abstract + '<p>Read More...</p></div>'
).appendTo('#blogblock');
}
else {
$('<div class="blogpost"></div>').append(
'<div class="blogtitle"><h2>' + data.response.posts[i].title + '</h2></div>' +
'<div class="postedby"><img class="avatar" src="http://api.tumblr.com/v2/blog/' + data.response.posts[i].post_author + '.tumblr.com/avatar" alt="Avatar" height="64" width="64" /><p>Posted By ' + data.response.posts[i].post_author + '</p></div>' +
'<div class="postbody">' + data.response.posts[i].body + '</div>'
).appendTo('#blogblock');
};
}
else if (data.response.posts[i].type == "photo"){
$('<div class="blogpost"></div>').append(
'<div class="blogtitle"><h2>Photos and Images</h2></div>' +
'<div class="postedby"><img class="avatar" src="http://api.tumblr.com/v2/blog/' + data.response.posts[i].post_author + '.tumblr.com/avatar" alt="Avatar" height="64" width="64" /><p>Posted By ' + data.response.posts[i].post_author + '</p></div>' +
'<div class="postbody">' + data.response.posts[i].caption + '</div>'
).appendTo('#blogblock');
}
else if (data.response.posts[i].type == "quote"){
$('<div class="blogpost"></div>').append(
'<div class="blogtitle"><h2>Words of Wisdom</h2></div>' +
'<div class="postedby"><img class="avatar" src="http://api.tumblr.com/v2/blog/' + data.response.posts[i].post_author + '.tumblr.com/avatar" alt="Avatar" height="64" width="64" /><p>Posted By ' + data.response.posts[i].post_author + '</p></div>' +
'<div class="postbody"><p>“' + data.response.posts[i].text + '” --' + data.response.posts[i].source + '</p></div>'
).appendTo('#blogblock');
}
else if (data.response.posts[i].type == "link"){
$('<div class="blogpost"></div>').append(
'<div class="blogtitle"><h2>Check this link out!</h2></div>' +
'<div class="postedby"><img class="avatar" src="http://api.tumblr.com/v2/blog/' + data.response.posts[i].post_author + '.tumblr.com/avatar" alt="Avatar" height="64" width="64" /><p>Posted By ' + data.response.posts[i].post_author + '</p></div>' +
'<div class="postbody"><p>' + data.response.posts[i].url + '</p></div>'
).appendTo('#blogblock');
}
else if (data.response.posts[i].type == "chat"){
$('<div class="blogpost"></div>').append(
'<div class="blogtitle"><h2>' + data.response.posts[i].title + '</h2></div>' +
'<div class="postedby"><img class="avatar" src="http://api.tumblr.com/v2/blog/' + data.response.posts[i].post_author + '.tumblr.com/avatar" alt="Avatar" height="64" width="64" /><p>Posted By ' + data.response.posts[i].post_author + '</p></div>' +
'<div class="postbody"><p>' + data.response.posts[i].body + '</p></div>'
).appendTo('#blogblock');
}
else if (data.response.posts[i].type == "audio"){
$('<div class="blogpost"></div>').append(
'<div class="blogtitle"><h2>Listen to this!</h2></div>' +
'<div class="postedby"><img class="avatar" src="http://api.tumblr.com/v2/blog/' + data.response.posts[i].post_author + '.tumblr.com/avatar" alt="Avatar" height="64" width="64" /><p>Posted By ' + data.response.posts[i].post_author + '</p></div>' +
'<div class="postbody">' + data.response.posts[i].player + '<p>' + data.response.posts[i].caption + '</p></div>'
).appendTo('#blogblock');
}
else if (data.response.posts[i].type == "video"){
$('<div class="blogpost"></div>').append(
'<div class="blogtitle"><h2>Watch this!</h2></div>' +
'<div class="postedby"><img class="avatar" src="http://api.tumblr.com/v2/blog/' + data.response.posts[i].post_author + '.tumblr.com/avatar" alt="Avatar" height="64" width="64" /><p>Posted By ' + data.response.posts[i].post_author + '</p></div>' +
'<div class="postbody">' + data.response.posts[i].player[1].embed_code + '<p>' + data.response.posts[i].caption + '</p></div>'
).appendTo('#blogblock');
}
else {
$('<div class="blogpost"></div>').append(
'<div class="blogtitle"><h2>This post type is broken!</h2></div>' +
'<div class="postedby"><img class="avatar" src="http://api.tumblr.com/v2/blog/' + data.response.posts[i].post_author + '.tumblr.com/avatar" alt="Avatar" height="64" width="64" /><p>Posted By ' + data.response.posts[i].post_author + '</p></div>' +
'<div class="postbody"><p>Please contact the webmaster to add support for displaying this post!</p></div>'
).appendTo('#blogblock');
};
};
};
Script is working great. I plan to optimize after I get this all working the right way. Here's the CSS that I'm (currently) applying to the posts:
.blogpost {
clear: both;
}
.blogtitle {
background: -webkit-linear-gradient(left, #444444 , black); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(right, #444444 , black); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(right, #444444 , black); /* For Firefox 3.6 to 15 */
background: linear-gradient(to right, #444444 , black); /* Standard syntax */
width: 968px;
height: 40px;
}
.blogtitle h2 {
padding: 5px;
}
.postedby {
text-align: center;
width: 100px;
float: left;
background: #888888;
}
.postedby p {
margin-top: 5px;
}
.postedby img {
margin-top: 5px;
}
.postbody {
float: left;
background: #bbbbbb;
padding: 5px;
}
.postbody p{
margin: 5px 0px 5px 0px;
}
I'm just not sure what to put where to get the color to fill the spaces. That's all I'm looking for, but I provided the script and such in case adjustments to the construction of each post needs to be made.
As far as the post body goes, as soon as you float:left the div, it stops taking up 100% of the width and only goes as wide as the content. You need to remove the float on post body. You will notice when you do that it expands to the width of the whole page. You need to put ALL of the posts inside a container div to stop this from happening.
As far as the posted by taking up the full height, there are several things you can do, but I will outline my favorite.
First we set a min-height for the blog post and postion:relative (I will explain that)
.blogpost {
clear: both;
position: relative;
min-height: 165px;
}
Then we need to position the posted by to be absolute. This is IMO the best way to make it be 100% of the post height. We made the blog post be position relative so that the absolute positioning of posted by is relative to the blog post.
.postedby {
text-align: center;
width: 100px;
background: #888888;
bottom: 0;
top: 40px;
position: absolute;
}
Then you need to make your post body have a margin to compensate for the position absolute of the posted by section.
.postbody {
background: #bbbbbb;
padding: 5px;
margin-left: 100px;
}
These things should make it all look good!
EDIT: There are a couple of other edits if you want it to look like this: https://i.sstatic.net/4kFU2.png
Please advise :)
