Tag: WordPress

There isn’t anything quite so boring as viewing websites full of links. Link. Description. Link. Description. Link. Descr— Well, you get the idea. If you have such a list on your website, you might seek to spice them up with screenshots to give a bit of pop to further encourage your users to follow the links.

But it can be a hassle to create, resize, and upload the screenshots that you need. It is an even bigger hassle to keep those screenshots up-to-date with how those websites might look over time.

What if there was a better way?

What if, with a simple shortcode, you could include within your content an automatically generated snapshot of a website which will stay reasonably up-to-date as the website changes?

That is exactly what [snap] is! Inspired by code at Geekeries, the [snap] shortcode is presented below with improved error-proofing and the option to specify a class attribute for the snapshot. I think you’re gonna love it!

Installation

There are multiple ways in which you can add this shortcode to your WordPress installation, among them:

• Add the following code block to your theme’s functions.php file.
• If you’re using Thesis 1.8.5, add the following code block to your theme’s custom_functions.php file.
• If you’re using a custom plugin to hold your site’s customizations, add the code block to it.
• Last, you can ignore the code block altogether by downloading this code block as a WordPress plugin, which can then be uploaded via your site admin panel’s Plugins → 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 simple, you can insert [snap] anywhere within your posts to see how it behaves. By default, you’ll be shown a screenshot of the Google homepage.

But that isn’t very fun, is it?

Here is a fully formed [snap] example, followed by an explanation of what each optional attribute controls:

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

That example will look like this:

If this shortcode is useful to you, I hope you’ll check out my other WordPress thingamajigs, and please don’t forget to like and share this page!

Attributes

The [snap] shortcode can be controlled using several attributes. They are as follows:

url

The full address of the site for which you want a snapshot. Defaults to https://www.wordpress.org/ in case you give it an invalid address or none at all.

alt

For accessibility and SEO reasons, you’ll want to provide a relevant alt text for your snapshot. This text should serve to describe the snapshot, and it defaults to “Website Snapshot.”

w and h

The width and height of your snapshot, respectively, as measured in pixels. Any positive integer can be used here, and both should be specified. Width defaults to 400 while height defaults to 300.

class

In order to provide seamless integration of the snapshots into your design, you can provide classes with which to target it in your styles or JavaScript. Every snapshot will be given a website_snapshot class, even if you add your own. Valid classes must start with an underscore (_), a hyphen (-), or a letter (a–z), followed by any numbers, hyphens, underscores, or letters. Class names must be at least two characters long, and you can add more than one by separating them with a space in your shortcode.

Most WordPress installations should have a few basic image styling classes which you can use to position your snapshots in your content: alignleft, alignright, and aligncenter.

Disclaimer

When you preview a post using the [snap] shortcode on a new site, you may notice that it doesn’t show a screenshot but instead shows a placeholder image. This is because the WordPress snapshot service takes a few moments to fetch and cache a screenshot once it is first requested. Subsequent visits to the page using the [snap] shortcode should display the expected screenshot.

Changelog

2.0.0 — July 13, 2019

• Replaced URL validation function with a WordPress native function
• Minor code cleanup and updating to take advantage of newer PHP features

1.0.0 — August 30, 2011

• Initial version

This post was originally published on 2011-08-30. It has been updated for republication. Comments below may reflect the original version of this content.