Website Portfolio Gallery Screenshot Shortcode for WordPress

This WordPress shortcode allows you to create quick and simple screenshots using WordPress.com’s hosted screenshot script.

By Nathan Ingram   |  November 2, 2011

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 ?>.

//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');

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:

WordPress
WordPress
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:

WordPress
WordPress
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.

.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;
}

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.

Related posts:

Comments

  1. I implemented this and it works fine.

    I’m trying to built on it and have said websites open in a lightbox iframe using lightbox evolution. Not sure if you have any experience with that… It uses shortcodes to display the content and I can’t seem to get the script to output the shortcodes in a way that works. I’m pretty good at stringing code together and I *think* it has something to do with the square brackets not converting correctly. I tried using their ascii equivalents and had no joy there. Do we escape those in php?

    Probably more technical than appropriate to bring up here, but what the heck?

    • You should be able to modify the code to open the link in an iframe with the Lightbox Evolution class on it per the LBE docs.

Leave a Reply