Adding a Digg style screenshot to Wistie

icon1 Posted by Geoserv in Featured Articles, Hacks on 11 8th, 2009 | Comments | 2,319 views

In this tutorial I will show you how easy it is to add a screenshot to each submission just like Digg.

Digg style screenshot for Pligg

There are only 2 files to edit for this hack, link_summary.tpl and style.css.

Open link_summary.tpl and find:

        <div class="storycontent">
        {checkActionsTpl location="tpl_link_summary_pre_story_content"}
        {if $pagename eq "story"}{checkActionsTpl location="tpl_pligg_story_body_start_full"}{else}{checkActionsTpl location="tpl_pligg_story_body_start"}{/if}

        {if $viewtype neq "short"}
                <span class="news-body-text">
                <span id="ls_contents-{$link_shakebox_index}">
</span></span></div>

change it to:

        <div class="storycontent">
        {checkActionsTpl location="tpl_link_summary_pre_story_content"}
        {if $pagename eq "story"}{checkActionsTpl location="tpl_pligg_story_body_start_full"}{else}{checkActionsTpl location="tpl_pligg_story_body_start"}{/if}

        {if $viewtype neq "short"}
                <span class="news-body-text">

                                <img src="http://images.websnapr.com/?url={$url_short}&size=T" class="storythumb"/>

                        <span id="ls_contents-{$link_shakebox_index}">
</span></span></div>

Save.

Open style.css and add anywhere:


.storythumb {
float:right;
border: 1px solid #b7cce0;
padding: 3px;
}

That’s it, I have websnapr as default screenshot supplier, though I always recommend using Shrink the Web.

You can see a demo over at Web Link Depot.

As always, post your thoughts and questions below.

You can also follow me on Twitter, where I will always help one on one.

If you enjoyed this post, make sure you subscribe to my RSS feed!

  • It's probably being blown up at the base. They might not have it properly simulated yet, since it's a teaser for an unreleased game. It's just a tree being launched. So yeah, rocket-tree.
  • How can i take a screen shot, but make the mouse appear in the picture. Usually the mouse disappears from the screen shot once taken.
  • The ajax tabs in the sidebar add a professional look and feel and take up less valuable space in the sidebar, users can toggle between Sponsors, Popular Stories, and Recent Comments. This is definitely not a standard feature of Pligg or most Pligg powered websites.
  • I have the blog and i will use your script in my blog
  • nice idea. i will try it.....
  • When someone draw the crusher on the button then site image will be pop up u are talking about this. I Will use your code in my blog and will see the effect and could u let me know how we can add the digg button on the blog for better chances to get the index and caching in Google..

    Keep Rocking with Post

    Jacob
  • That really gives a great visual effect to the website! Thanks :)..
  • Wow... really good. thanks for sharing.
  • it looks fancy, is it also possible to get the details of a page like page rank, inbound links etc. etc..
  • That really gives a great visual effect to the website! Thanks :)
blog comments powered by Disqus