The basis for this code was presented by Benjamin Bradley in a WebDesign.com Member’s Only Chat. It will allow you to create quick and simple screenshots using WordPress.com’s screenshot script to add a screenshot to a single page or make a automatically updating portfolio. I tweaked the code a bit from what was presented in class to allow for hyperlinking, and the display of title and description.

First, the Functions.php Code

Add this to your functions.php before the last ?>.

[sourcecode language=”css”]
//Screenshot Snap Shortcode

function snap_my_web($atts, $content = null) {
extract(shortcode_atts(array(
"snap" => ‘http://s.wordpress.com/mshots/v1/’,
"url" => ‘https://nathaningram.com’,
"link" => ‘https://nathaningram.com’,
"w" => ‘400’,
"h" => ‘300’,
"title" => ‘Site Title’,
"descr" => ‘Site Descrition ‘
), $atts));
$img = ‘<div class="snap"><a href="’ . $link. ‘" target="_blank" rel="nofollow">
<img src="’ . $snap . ” . urlencode($url) . ‘?w=’ . $w . ‘&h=’ . $h . ‘"
alt="’ . $title . ‘" / class="snap-image"</a>
<div class="snap-title">’ . $title . ‘</div>
<div class="snap-descr">’ . $descr . ‘ </div></div>’;
return $img;
}
add_shortcode(‘snap’, ‘snap_my_web’);
[/sourcecode]

Now, let’s walk through the things you need to edit.

• Do not edit the “snap” URL. This is the location of the WordPress script that will be doing the work for us.
• “url” is the site for which you want to create a thumbnail. NOTE: if you find the image generated is something screwy, try putting index.php at the end… like http://wordpress.com/index.php. Redirects really mess with the screen capture code, and the index.php seems to help.
• “link” is the web site where you want the screenshot to link to when clicked (different from the URL in case you want a screenshot of a specific URL or for affiliate sites that do forwarding).
• “rel=nofollow” is code that will keep Google’s Penguin update from dinging you if you use the code for affiliate links.
• “w” is the width of the thumbnail you want to create.
• “h” is, you guessed it,  the height of the thumbnail you want to create.
• “title” is the title you want to display under the site thumbnail… it also gets put in the image’s alt tag.
• “descr” is a short description for the site that will appear under the title.

The Shortcode

The code above creates a shortcode called “snap.” Here’s an example of how to use it…

The shortcode above automatically creates the image below:
[snap3 url=”http://wordpress.org” alt=”WordPress” w=”400″ h=”300″ title=”WordPress” descr=’WordPress is Awesome!’]

Now try editing a couple of the variables in the shortcode…

Notice the changes in height and width above easily resize your screenshot to half the previous size very easily:[snap3 url=”http://wordpress.org” alt=”WordPress” w=”200″ h=”150″ title=”WordPress” descr=”WordPress is Awesome!”]

Styling the Output

You may notice in the code you entered in the functions.php that there are classes placed on the image, title, description and on the entire entity. I added those to give you maximum control on what’s being displayed. Below are the styles I use in my styles.css for the snap images. You can, of course, edit these to your preferences.

[sourcecode language=”css”]
.snap {
text-align: center;
}
.snap-image {
border: 1px solid black;
}

.snap-title {
font-size: 1.1em;
font-weight: bold;
}

.snap-descr {
font-size: .9em;
font-style: italic;
}[/sourcecode]

To get the portfolio/gallery effect like I have on my web design and affiliate pages, just add a left float and 25px padding to the bottom and right of the snap class.