0

I hate to keep asking basic questions and looking like a complete idiot, but until I can sit down and master Javascript and jQuery, I have to rely on you kind and generous folks here.

I'm calling Tumblr posts tagged "_featured" and showing them in the sidebar along with an image if it's a text post with an included image. The only problem is that the image itself isn't linked. Not a big deal, but a little unintuitive. How would I fix that?

And the code:

/*
    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).append($(p['regular-body']).find('img')[0])
            .append('<div class="featurelink"><a class="'+p.type+'" href="'+p["url-with-slug"]+'">'+titlestr+Featured.linkAppend+'</a></div>');
            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();
});

As always, any help receives my undying gratitude.

1 Answer 1

0

Your problem is that you're appending the image to the <li> when you want it inside the <a> that will be inside that <li>. Changing your list item builder from this:

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

to something like this:

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

should do the trick. The changes build the <a> inside the <li> and then put the image at the front (i.e. prepends) of the <a>. You'll probably have to adjust the CSS a little bit to get the layout you want, probably something like:

a     { display: block; }
a img { display: block; }

with the appropriate CSS selectors to localize them.

3
  • Hey, thanks for the quick reply. That does the trick. One (more) question though: what would the "proper" way be to put a div around the link text so I can style it independently of the image? I know I could do it solely with CSS, but the code would end up redundant. Something I like to avoid.
    – Andrew
    Apr 17, 2011 at 3:15
  • You'd probably want to put a span around the text: ><span>' + titlestr + Featured.linkAppend + '</span></a>. Then you can select the span with .featureImage a span or give the the span a class if you want a simpler selector. Apr 17, 2011 at 3:26
  • Perfect. I have to say, more than anything, it's the little formatting issues that end up getting me. The power of a properly placed comma, eh? Thanks again, you've saved me a lot of time.
    – Andrew
    Apr 17, 2011 at 5:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.