I was originally going to use HTML iframes to embed several pages into one document before I discovered this plugin, which renders a HTML document as a picture with link a to the page.
[browser-shot url="https://www.newburynew.media/" width="600"]
Renders this image:
[browser-shot url=”https://www.newburynew.media/” width=”600″]
Notice that the animation was caught as a still frame, as opposed to the animation still running as it would normally if you were to use an iframe.
Change the url value to render different urls and you can adjust the width value as you please too.
You can download the plugin here, or go to Plugins >> Add New >> and search for ‘Browser Shots’ to download and install it directly to your WordPress blog.
You can further style the rendered images using the css class ‘browser-shot’:
.browser-shot img {
margin: 0px 10px;
background-color: #ffffff;
box-shadow: 3px 4px 3px #bbbbbb;
padding: 10px;
}
.browser-shot img:hover {
background-color: #c9c9c9;
box-shadow: none;
}
Advanced usage
With a bit more knowledge you can add further functionality to the Browser Shots plugin.
To place your browser shots images into templates and themes you will need to fire off the do_shortcode() WordPress function:
$link = 'http://www.website-to-render-as-image.com/';
$code = 'url="'.$link.'" width="300px"';
echo do_shortcode('[browser-shot '.$code.']');
That piece of code will place the browser shots image inside a div with the class ‘browser-shot’ anywhere it is placed in the php of a page template or theme file.
Alternatively you could amend the output at source by editing the browser-shots.php file with the plugins directory.
The output is determined by lines 55 and 56:
$image = '<img src="' . $image_uri . '" alt="' . $alt . '" width="' . $width . '" class="alignnone" />'; return '<div class="browser-shot"><a href="' . $url . '">' . $image . '</a></div>';
The top line creates the HTML to display the image and the bottom line wraps it in a div with a link. So for example you could change the styling or remove the link or strip both and simply return the img tag by itself:
/** remove class="alignnone" from img tag **/ $image = '<img src="' . $image_uri . '" alt="' . $alt . '" width="' . $width . '" />'; return '<div class="browser-shot"><a href="' . $url . '">' . $image . '</a></div>'; /** return just the div and the img **/ $image = '<img src="' . $image_uri . '" alt="' . $alt . '" width="' . $width . '" />'; return '<div class="browser-shot">' . $image . '</div>'; /** return the img and link only **/ $image = '<img src="' . $image_uri . '" alt="' . $alt . '" width="' . $width . '" />'; return '<a href="' . $url . '">' . $image . '</a>'; /** return the img tag by iteslf **/ $image = '<img src="' . $image_uri . '" alt="' . $alt . '" width="' . $width . '" />'; return $image;
N.B. If you decide to edit the code within the plugin file make sure have a backup on hand and expect your amendments to be lost when the plugin next updates.