How to use images in sneak/spy like digg's spy

[kbeeveer46]

I have customized my sneak/spy to use images like digg's spy. Check it out here: http://www.indianaseesee.com/sneak.php

For the time being, I have just used digg's images until I can get some of my own. If you would like this for your site you will need to edit your to_html function in sneak.php. Make sure to change the template if you're not using mollio-beat. Also you will need to change the location of the images to the location of your images.

Replace

PHP Code:

function to_html(data) {
    var ts=new Date(data.ts*1000);
    var timeStr;

    var hours = ts.getHours();
    var minutes = ts.getMinutes();
    var seconds = ts.getSeconds();

    timeStr  = ((hours < 10) ? "0" : "") + hours;
    timeStr  += ((minutes < 10) ? ":0" : ":") + minutes;
    timeStr  += ((seconds < 10) ? ":0" : ":") + seconds;

    html = '<div class="sneaker-ts">'+timeStr+'</div>';

    if (data.type == 'problem')
        html += '<div class="sneaker-type"><span class="sneaker-problem">'+data.type+'</span></div>';
    else if (data.type == 'new' || data.type == 'published')
        html += '<div class="sneaker-type"><strong>'+data.type+'</strong></div>';
    else
        html += '<div class="sneaker-type">'+data.type+'</div>';

    html += '<div class="sneaker-votes">'+data.votes+'</div>';
    html += '<div class="sneaker-story"><a href="<? echo my_base_url.my_pligg_base; ?>/story.php?id='+data.link+'">'+data.title+'</a></div>';
    if (data.type == 'problem')
        html += '<div class="sneaker-who"><span class="sneaker-problem">'+data.who+'</span></div>';
    else if (data.uid > 0) 
        html += '<div class="sneaker-who"><a href="<? echo my_base_url.my_pligg_base; ?>/user.php?login='+data.who+'">'+data.who+'</a></div>';
    else 
        html += '<div class="sneaker-who">'+data.who+'</div>';
    html += '<div class="sneaker-status">'+data.status+'</div>';
    return html;
}

with

PHP Code:

function to_html(data) {
    var ts=new Date(data.ts*1000);
    var timeStr;

    var hours = ts.getHours();
    var minutes = ts.getMinutes();
    var seconds = ts.getSeconds();

    timeStr  = ((hours < 10) ? "0" : "") + hours;
    timeStr  += ((minutes < 10) ? ":0" : ":") + minutes;
    timeStr  += ((seconds < 10) ? ":0" : ":") + seconds;

    html = '<div class="sneaker-ts">'+timeStr+'</div>';

    if (data.type == 'problem')
        html += '<div class="sneaker-type"><span class="sneaker-problem">'+data.type+'</span></div>';
    else if (data.type == 'new' || data.type == 'published')
        html += '<div class="sneaker-type"><img src="templates/mollio-beat/images/spy_new.gif"></div>';            
    else if (data.type == 'comment')
        html += '<div class="sneaker-type"><img src="templates/mollio-beat/images/spy_comment.gif"></div>';
    else if (data.type == 'vote')
        html += '<div class="sneaker-type"><img src="templates/mollio-beat/images/spy_vote2.gif"></div>';    
    else        
        html += '<div class="sneaker-type">'+data.type+'</div>';

    html += '<div class="sneaker-votes">'+data.votes+'</div>';
    html += '<div class="sneaker-story"><a href="story.php?id='+data.link+'">'+data.title+'</a></div>';
    if (data.type == 'problem')
        html += '<div class="sneaker-who"><span class="sneaker-problem">'+data.who+'</span></div>';
    else if (data.uid > 0) 
        html += '<div class="sneaker-who"><a href="user.php?login='+data.who+'">'+data.who+'</a></div>';
    else 
        html += '<div class="sneaker-who">'+data.who+'</div>';
    html += '<div class="sneaker-status">'+data.status+'</div>';
    return html;
} 


[kbeeveer46]

Today I am going to see if I can enable the gravatar in front of the users name in sneak/spy. I'll post the code if I can figure it out.

[louisd]

Originally Posted by kbeeveer46

Today I am going to see if I can enable the gravatar in front of the users name in sneak/spy. I'll post the code if I can figure it out.

..love it, great idea!!!

[kbeeveer46]

Originally Posted by louisd

..love it, great idea!!!

I found out from Ash that it's going to be a much harder task than anticipated.

[williamboliver]

Nice mod.....can you post the code for the legend at the top?

[kbeeveer46]

Originally Posted by williamboliver

Nice mod.....can you post the code for the legend at the top?

You should probably use your own images but here is the code for the legend:

PHP Code:

<p align="left" style="padding-right:10px; font-weight:bold"><img src="templates/mollio-beat/images/spy_new.gif" /> new/published&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="templates/mollio-beat/images/spy_vote2.gif" /> vote&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="templates/mollio-beat/images/spy_comment.gif" /> comment</p> 


[williamboliver]

thanks! I'm looking for some replacement images to match my theme. I agree that we need a good opensource version of the images.

update: I had a link for some GPL icons that I have updated my site with.

http://www.maxpower.ca/free-icons/2006/03/05/

I'm using the mini pack. Attached are the replacement icons I am using:

[nothingman]

Thanks for this mod. But i don't know why my live page looks like this :-/

[tbones]

What´s the difference between this / digg spy and the live view? Kb´s link is password protected meanwhile.

[kbeeveer46]

Man, it was almost a year ago when I made this thread. Can't believe I've stuck around this long

Any ways, the way the images work looks exactly like digg because that's what I based it off of.