Website screenshots as images for posts

WordPress.org offers interesting and not officially documented feature allowing you to get screenshots from any URL. There are not many options available, but for most things it will work just fine and save you a lot of time to make such sreenshots yourself. So, here is how to use it with xScape theme.

Through Interface

Here is the screenshot of the image box for the post from post edit page. We have screenshot of the www.google.com website:

Screenshot from URL
Screenshot from URL

As you can see, it’s easy to add it. In the field you enter screenshot, add one empty space and than URL from which to get the screenshot. For most uses, xScape will use appropriate width for the screenshot, but you can also specify the width and it will be used always. To do that, after word screenshot add width like this: screenshot:600. Maximum allowed width is 1024, and it’s limit of the WordPress screenshot service. All images are in 4:3 format, with maximum image size allowed 1024×768. Height can’t be specified. Returned image will be JPEG.

But, sometimes WordPress.org can need some time to make screenshot, so you will need to wait a bit before image appears for the first time. Until they make screenshot, a black animated GIF will be returned. Images are cached for a period of few days, and that will ensure that you always see current (or almost current) version of the screenshot.

Shortcode

You can also use a shortcode for this anywhere in the post content. Parameters for the shortcode are in the documentation. Here are few examples on how to use it. First example will add Google screenshot, 320px wide, alight to right:

[xss_webshot url="http://www.google.com/" width=320 align="right"]

Same thing, but with the caption text and link for the image:

[xss_webshot url="http://www.google.com/" width=320 align="right" link=true]Google Search[/xss_webshot]

Really simple.

12 Comments

  1. JohnnyPea says:

    Are you using the “http://s.wordpress.com/mshots/v1/URL” for this?

  2. Infoman says:

    Thanks for this tip,
    will this work for self hosted wp domains.

  3. MillaN says:

    Yeah, right now there is no restriction from WP.org, and Matt said that for now, anyone can use it.

  4. Where are image stored?

  5. MillaN says:

    They are not stored at all, link always points to screenshots API so that images will get updated every few days reflecting changes of the URL.

  6. Infoman says:

    Thanks.
    will this work in other themes as well.
    I tried but didn’t work
    Can you help

  7. MillaN says:

    This is built in into my xScape Theme Framework and works with all my themes. I am not aware of any other theme apart from mine that use this.

  8. ePromote says:

    Hi MilaN,

    I import the and URL from a form into my postings (gravity forms)
    With the shortcode i can get the image to appear in the post.

    However, I cannot get it to appear as preview thumbnail.

    I have tried several options but no luck.
    With Gravity forms i could also automatically post the URL (or screenshot domain.com) to a custom field.
    Do you think it would be possible and what is the name of the custom fields?

    I have tried the xScape tools, but I don’t seem to be able to select any custom field, so this might be a way to work around this issue.

  9. MillaN says:

    I don’t quite understand exactly what the problem is and what it has to do with GravityForms. Meta box created by xScape allows you to specify the screenshot URL. But, layout in xScape must be made aware to use that meta box. Maybe post wasn’t clear enough on that point, so I will prepare a video tutorial on the subject so that you can see whole process of adding screenshot and making layout use it.

  10. ePromote says:

    Hi Milan,

    I am sorry for the confusement.

    Let me rephrase. Does the Meta Box make use of custom fields? And what is the custom field exact name?
    (so i can insert a value with Gravity forms)

  11. MillaN says:

    Ah, sorry. Well, it is custom field but you can’t use it, since it’s not simple custom field with a normal value, it’s storing the serialized object, so you can’t just get it and print it. To get actual value, it has to be deserialized into object and use that object to get the value.

Leave a Reply