Adding a Digg style screenshot to Wistie

Posted In Hacks - By Geoserv On Sunday, November 8th, 2009 With 106 Comments

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.

Incredible online credit card training programs & 70-662 help you in pass 646-046 exam regarding cisco training. We offer best quality pass4sure mcitp training tools for your success.

Related Search:

  • pliggs screenshot
  • tpl_pligg_story_body_start

About - Geoserv has been working with the Pligg CMS for 2+ years.

  • http://www.hairup.gen.tr sac cikarici

    Shoulders, extend your hair down, cleverly cut your hair thicker layers showing the move saves. Also a good idea to a suitable fringe of your face. Bop to the hair-cutting model, revaşta which is a cut and the option to create a fine image can be from.

  • Stuffenjames

    nice post

  • Pingback: Adding a Digg style screenshot to Wistie – UPDATED « Pliggs

  • http://www.websiteseoprofessionals.com SEO Professionals

    With digg you can not only make a strong communication base but at the same time you can even share various informative videos, articles, news and pictures also. You can upload this informative matter from external links and can get the proper feedback, and also you can hold a proper discussion about these matters.

  • Metropolitantiledepot

    M luking for such type of design…thanks for sharing the code 

  • http://www.professionalbloggingtips.com/ Blogging Tips

    great for sharing
    but i having error while adding this below code
    can u help me in this.