woman holding a camera to her eye in front of a white and yellow background

Adding a Website Snapshot Shortcode to WordPress

There isn’t any­thing quite so bor­ing as view­ing web­sites full of links. Link. Descrip­tion. Link. Descrip­tion. Link. Descr— Well, you get the idea. If you have such a list on your web­site, you might seek to spice them up with screen­shots to give a bit of pop to fur­ther encour­age your users to fol­low the links.

But it can be a has­sle to cre­ate, resize, and upload the screen­shots that you need. It is an even big­ger has­sle to keep those screen­shots up-to-date with how those web­sites might look over time.

What if there was a bet­ter way?

What if, with a sim­ple short­code, you could include with­in your con­tent an auto­mat­i­cal­ly gen­er­at­ed snap­shot of a web­site which will stay rea­son­ably up-to-date as the web­site changes?

screenshot of the original 'snap' shortcode at Geekeries That is exact­ly what [snap] is! Inspired by code at Geek­eries, the [snap] short­code is pre­sent­ed below with improved error-proof­ing and the option to spec­i­fy a class attribute for the snap­shot. I think you’re gonna love it!

Installation

There are mul­ti­ple ways in which you can add this short­code to your Word­Press instal­la­tion, among them:

  • Add the fol­low­ing code block to your theme’s functions.php file.
  • If you’re using The­sis 1.8.5, add the fol­low­ing code block to your theme’s custom_functions.php file.
  • If you’re using a cus­tom plu­g­in to hold your site’s cus­tomiza­tions, add the code block to it.
  • Last, you can ignore the code block alto­geth­er by down­load­ing this code block as a Word­Press plu­g­in, which can then be uploaded via your site admin panel’s Plu­g­ins → Add New page.

The Code (v2.0.0)

/**
 * [snap] - Website snapshot shortcode
 *
 * @via https://www.rickbeckman.org/
 * @inspiredby http://www.geekeries.fr/snippet/creer-automatiquement-miniatures-sites-wordpress/
 */
function custom_snapshot_shortcode( $atts, $content = null ) {
	# Default values
	$defaults = [
		'url'   => 'https://www.example.com/', # URL to be snapshotted
		'alt'   => __( 'Website Snapshot', 'snap' ), # Alt text for snapshot image
		'w'     => 400, # Width of snapshot
		'h'     => 300, # Height of snapshot
		'class' => '', # CSS class(es), space separated
	];

	# Parse attributes
	$atts = shortcode_atts( $defaults, $atts, 'snap' ); # @filter: shortcode_atts_snap

	# Sanity checks to ensure proper variables
	$url = urlencode( wp_http_validate_url( $atts['url'] ) ?: $defaults['url'] );
	$alt = esc_attr( $atts['alt'] );
	$w = absint( $atts['w'] ) ?: $defaults['w'];
	$h = absint( $atts['h'] ) ?: $defaults['h'];
	$class = ! empty( $atts['class'] ) ? esc_attr( $atts['class'] ) . ' website_snapshot' : 'website_snapshot';

	# Put together our IMG tag to be output, with final data sanitation
	$img = '<img src="https://s.wordpress.com/mshots/v1/' . $url . '?w=' . $w . '&h=' . $h . '" alt="' . $alt . '" class="' . $class . '">';

	return $img;
}
add_shortcode( 'snap', 'custom_snapshot_shortcode' );

Usage

At its most sim­ple, you can insert [snap] any­where with­in your posts to see how it behaves. By default, you’ll be shown a screen­shot of the Google homepage.

But that isn’t very fun, is it?

Here is a ful­ly formed [snap] exam­ple, fol­lowed by an expla­na­tion of what each option­al attribute controls:

[snap url="https://rickbeckman.org/" alt="screenshot of my homepage" w=200 h=200 class="aligncenter mine"]

That exam­ple will look like this: screenshot of my homepage

If this short­code is use­ful to you, I hope you’ll check out my oth­er Word­Press thinga­ma­jigs, and please don’t for­get to like and share this page!

Attributes

The [snap] short­code can be con­trolled using sev­er­al attrib­ut­es. They are as follows:

url
The full address of the site for which you want a snap­shot. Defaults to https://www.wordpress.org/ in case you give it an invalid address or none at all.
alt
For acces­si­bil­i­ty and SEO rea­sons, you’ll want to pro­vide a rel­e­vant alt text for your snap­shot. This text should serve to describe the snap­shot, and it defaults to “Web­site Snapshot.”
w and h
The width and height of your snap­shot, respec­tive­ly, as mea­sured in pix­els. Any pos­i­tive inte­ger can be used here, and both should be spec­i­fied. Width defaults to 400 while height defaults to 300.
class

In order to pro­vide seam­less inte­gra­tion of the snap­shots into your design, you can pro­vide class­es with which to tar­get it in your styles or JavaScript. Every snap­shot will be giv­en a website_snapshot class, even if you add your own. Valid class­es must start with an under­score (_), a hyphen (-), or a let­ter (a–z), fol­lowed by any num­bers, hyphens, under­scores, or let­ters. Class names must be at least two char­ac­ters long, and you can add more than one by sep­a­rat­ing them with a space in your shortcode.

Most Word­Press instal­la­tions should have a few basic image styling class­es which you can use to posi­tion your snap­shots in your con­tent: alignleft, alignright, and aligncenter.

Disclaimer

When you pre­view a post using the [snap] short­code on a new site, you may notice that it does­n’t show a screen­shot but instead shows a place­hold­er image. This is because the Word­Press snap­shot ser­vice takes a few moments to fetch and cache a screen­shot once it is first request­ed. Sub­se­quent vis­its to the page using the [snap] short­code should dis­play the expect­ed screenshot.

Changelog

2.0.0 — July 13, 2019

  • Replaced URL val­i­da­tion func­tion with a Word­Press native function
  • Minor code cleanup and updat­ing to take advan­tage of new­er PHP features

1.0.0 — August 30, 2011

  • Ini­tial version

Leave a Comment

Your email address will not be published.

Use your Gravatar-enabled email address while commenting to automatically enhance your comment with some of Gravatar's open profile data.

Comments must be made in accordance with the comment policy. This site uses Akismet to reduce spam; learn how your comment data is processed.

You may use Markdown to format your comments; additionally, these HTML tags and attributes may be used: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Rick Beckman