Adding a Digg style screenshot to Wistie

icon1 Posted by Geoserv in Featured Articles, Hacks on 11 8th, 2009 | View Comments | 4,503 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!

  • dokancan
  • dokancan
  • you really made easy screen shot integration like digg style, Appreciative !!!
  • Wow, great tutorial! I can’t believe how amazing my screenshots come out now that I’ve got a handle on your process. They look incredible.thanks..
  • dokancan
    sdfsdfsdf dsfsdfsdfsdfsdfsdfsd
  • On the 2-column tutorial, I can't find the code in my pligg.tpl. There aren't any <div> tags in it at all. I haven't modified that file at all myself. Am I missing something? Thanks!</div>
  • It seriously is most likely staying blown up in the base. They may effectively not have it properly simulated yet, offered that it's a teaser for an unreleased game.
  • It truly is likely staying blown up in the base. They may well properly not have it properly simulated yet, granted that it can be a teaser for an unreleased game. It is just a tree growing to be launched. So yeah, rocket-tree.
  • i think you are saying little bit right
  • It truly is most likely staying blown up inside the base. They may possibly effectively not have it properly simulated yet, offered that it can be a teaser for an unreleased game. It's just a tree getting launched. So yeah, rocket-tree.
blog comments powered by Disqus