Safari Top Sites Preview

javascript, safari

Solution

Here's how it's done on iCloud to show a Top Sites specific preview: (edited for formatting)

if (window.navigator && window.navigator.loadPurpose === "preview") {
    window.location.href = "http://www.icloud.com/topsites_preview/";
};

Source: http://blog.raffael.me/post/18565169038/defining-how-your-website-looks-like-in-safari-topsites

Problem

In the Top Sites section of Safari, the iCloud.com image shows the logo instead of the login screen as you can see below. Normally, the Top Sites just shows a picture of the loaded web page (and the loaded page does not look like this). Do you have any idea how they accomplished this? I couldn't find anything in Apple's documentation. Thanks for your help.

Original source