Question

I’m using the Featured Posts Plugin created by Bandit Design (http://blog.bandit.co.nz/post/87511743/tumblr-featured-posts-javascript-plugin) and I’d like to include the images from text posts in the list of featured posts (which will actually just be a single post, the image with the post title below it, if you were wondering). The problem is that the Tumblr API doesn’t include a parameter for photos within text posts (you can call the entire body of the post, but that’s not ideal here). The depth of my Javascript knowledge could be described as “enough to somehow get things to work, but more likely just break things”, so the solution is probably fairly obvious here and I’m just missing it.

The code I have right now:

/*
TUMBLR FEATURED POSTS SCRIPT
Automatically gets all posts tagged with "featured" and lists them
REQUIRES JQUERY!
--------------------------------------
Created by james <at> bandit.co.nz
http://blog.bandit.co.nz

Some code borrowed from Jacob DeHart's AJAX Search:
http://blog.bandit.co.nz/post/80415548/tumblr-ajax-inline-search
    */
    Featured = {
'apiNum' : 50, // how many posts to read
'listId' : '_featured', // the id of the ul to write to
'tagName' : '_featured', // the name of the tag we're searching for
'linkAppend' : '', // html to append to the end of each linked post

'postDB' : [],
'listPos' : 0,
'doList' : function (where) {
    var li; var ul = $('#'+where);
    var titles = {"link":"link-text", "photo":"photo-caption", "quote":"quote-text", "regular":"regular-title", "video":"video-caption"}

    // cycle through post database
    pcount = Featured.postDB.length;
    for(i=Featured.listPos;i<pcount;i++) {
        p = Featured.postDB[i];
        if(p[titles[p.type]] != '') titlestr = p[titles[p.type]].replace(/<\/?[^>]+>/gi, '');
        else titlestr = p['url'];

        li = document.createElement('li');
        $(li).html('<a class="'+p.type+'" href="'+p["url-with-slug"]+'">'+p["regular-body"]+titlestr+Featured.linkAppend+'</a>');
        ul.append(li);

        Featured.listPos = pcount;
    }
},

'getData' : function() {
    $.get('/api/read/json?num='+Featured.apiNum+'&tagged='+Featured.tagName,
        function(data) {
            eval(data);
            for(i=0;i<tumblr_api_read.posts.length;i++) {
                Featured.postDB.push(tumblr_api_read.posts[i]);
                Featured.doList(Featured.listId);
            }
        }
    );
}
    };

    $(document).ready(function(){
Featured.getData();
    });

Any help would be much appreciated.

Answer 1

You can change the line where you create the li to

$(li).append($(p['regular-body']).find('img')[0])
     .append('<a class="'+p.type+'" href="'+p["url-with-slug"]+'">'+titlestr+Featured.linkAppend+'</a>');

This will find the first image the post’s body, and add it right before the title in the list.