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
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:
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
Really simple.
Yes, please tell us.Waiting for some time now.
Is there a...
will a stable version 2.0 ever be published? really appreciate...
Great article and one of best tutorials I have read...
would version 2 support using a CDN for say the...
Comment Link
Are you using the “http://s.wordpress.com/mshots/v1/URL” for this?
Comment Link
Yeah.
Comment Link
Thanks for this tip,
will this work for self hosted wp domains.
Comment Link
Yeah, right now there is no restriction from WP.org, and Matt said that for now, anyone can use it.
Comment Link
Thanks.
will this work in other themes as well.
I tried but didn’t work
Can you help
Comment Link
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.
Comment Link
Where are image stored?
Comment Link
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.
Comment Link
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.
Comment Link
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.
Comment Link
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)
Comment Link
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.