RBA Cash Rate: 4.35% · 1AUD = 0.67 USD · Inflation: 4.1%  
Leading Digital Marketing Experts | 1300 235 433 | Aggregation Enquires Welcome | Book Appointment
Example Interest Rates: Home Loan Variable: 5.20% (5.24%*) • Home Loan Fixed: 5.48% (6.24%*) • Fixed: 5.48% (6.24%*) • Variable: 5.20% (5.24%*) • Investment IO: 5.78% (6.81%*) • Investment PI: 5.49% (6.32%*)

How to Embed a Website Screenshot in a Page With Shortcode

The Screenshots shortcode will embed a screenshot of a remote webpage into your own website. Initially created for the Shor.tt module well over 10-years ago, the tool has since created millions of screenshots reliably and almost without error.

Screenshots isn't one of those features you'll use every day, but like a lot of what you'll find in Yabber, when you require it, it's nice to know it's available.

  Screenshot Shortcode

The most common method of returning a screenshot to a page is with shortcode. As an example, the shortcode of [screenshot url="https://www.anz.com.au"] returns the following image.

Updated Website Screenshot API and WordPress Shortcode

  Pictured: ANZ website, anz.com.au, captured at 2355 on the 2nd April 2023. Interestingly, and slightly off-topic, in the course of writing this article that I noticed ANZ split test their front  page  in various ways to assess better performing assets. Clever... but expected (high-trafficked broker websites should do the same). Note that the image served on your website is appropriately scaled and optimised, and the website title is applied as the title and alt tags.

Note that the image is scaled to 1920x1080 pixels by default when it's created, so we import the image into your screenshot cache, import it into your image library, and then apply our image shortcode which scales and optimises the image according to Yabber options, so the image renders in the same way as every other image on your website.

In the next example, we'll create a square image of 1920px x 1920px. Shortcode of [screenshot url="https://www.nab.com.au" w="1920" h="1920"] returns the following (the image returned via our function will scale down to 560px but quality is available up to the requested resolution):

Updated Website Screenshot API and WordPress Shortcode

  Pictured: NAB website, nab.com.au, captured at 0036 on the 3rd April 2023. It's possible that we'll include a screenshot of lender websites in lender archive pages - TBA. Note that because the Chrome developer tools allow the full manipulation of a page via automation (clicks, form submissions, altering of HTML etc.), many financial provides detect automated actions and prevent any action from taking place. This barrier rarely applies outside the financial space.

The shortcode presents a number of options that alter the image returned to your page. The following attributes apply.

url

This url is the fully-qualified URL to any page. A check if made that the page exists before the screenshot is rendered, and if a 404 (Not Found) error is returned that same error is applied as the error code when returned. The URL is base64url encoded as the filename. A png, jpg, or json extension is requried. Images are created as jpg files by default. The handling of 'everything' is obviously managed by the shortcode function.

w & h

The width and height of the created image. The default of 1920 x 1080 should normally be left as is because it returns a good quality image that can be scaled down for use on your website. TO emulate a mobile screenshot you might use a width or around 800 pixels.

x & y

If you would like to screenshot a specific portion of a page, the x and y attributes are used to define the top left corner (x is lateral and y is vertical). Both positive integers, and used in company with the height attribute, you may capture a specific portion of a page.

q

The q attribute is the quality of the resulting jpg image. The value is required in all cases but ignored when rendering png images.

f

To render a full page beyond the defined viewport, use f="1". This will capture an entire page from top to bottom.

rh & new

The rh attribute is the 'Refresh Hash' and it can be ignored in most cases. It is used to reference a specific screenshot when multiple screenshots exist. The new attribute may be used to force the creation of a new screenshot regardless of the cache interval applied.

import

The import attribute is used to ensure backwards compatibility with the previous versions of the API, so it can generally be ignored. In previous versions, importing your image into the WP Media Library was an option - it is now used by default as best practice.

cache

The resulting screenshot copied from Yabber, and a cache file of the rendered HTML, is cached for what is essentially 'forever'. To alter the cache interval (for those cases where you might need to screenshot a page every day), set the cache interval as required.

Various other attributes apply for native scaling (not required since this is handled by the WP media library), effects (rarely used), and creating size libraries (for testing appearance across a range of devices), but it's highly unlikely any of these options will be used on client websites.

Note that generation of an image for the first time can take a couple of seconds, but once created it is obviously returned quickly. Any created image belongs to you, and no image is recycled to other users. If accessing via the server, a rh (Refresh Hash) parameter should be applied as a URL parameter to ensure that the same image isn’t repeatedly generated… although this can be excluded if you wish to regenerate the image after a certain time period.

Once an image is created, it is assigned to your Yabber library, and a full record of each image is returned to you via Yabber’s Screenshot panel.

  Screenshots in Yabber

You may create screenshots directly in Yabber via the Image Factory module. For default usage, simply enter a URL and submit. For advanced usage, select the 'Advanced Options' text to return the available options.

Yabber Screenshots

  Pictured: Creating a screenshot in Yabber. Enter a URL and submit. For advanced usage, select the 'Advanced Options' text to return the available options. A textbox with the full archived image is returned.

Select the 'Review' panel to show all screenshots created via any means.

  Screenshot API

For those that are interested, a RESTful API is provided that returns high-quality and immediate results back via a standard request. The feature is available with your standard client API Key. Make contact with us for details.

  Related FAQs

Share this FAQ

Share on Facebook
Share on Twitter
Share on Linkdin
Share on Pinterest