Screenshot/preview


(Jumpjack) #1

How can I share a screenshot of a model as a permanent link to an online image?


Creating Browser Bookmarklets
(Jumpjack) #2

no ideas?


(Bart) #3

I’m not entirely sure what you’re asking, but maybe this helps: we have a screenshot tool that you can use to generate hi-res renders of Sketchfab models. You can then upload this image anywhere, like on https://imgur.com/ and use it any way you like.

Does that help? If not, please explain what you’re trying to achieve and I’ll see what I can do.


(Jumpjack) #4

no, I know how to create a screenshot by myself; but it would be very useful if sketchfab site provided this sharing method: a button which creates a link to the screenshot which already exists on sketchfab server!
Even better, a button which creates the code to share on forums, i.e. which creates this code (replace round brackets by square brackets):

(url=“http://sketchfab.com/model_link”)(img)http://sketchfab.com/model_screenshot.png(/img)(/url)

This code would result in a clickable screenshot which leads to the model page.


(Bart) #5

Ah I see. This is not on our short term roadmap.

Most forums now support Sketchfab embeds directly too, so you can also just drop the Sketchfab link in there to embed the viewer?


(Shaderbytes) #6

while an embed with autoload not set on is cool sometimes a thumb/ icon only is a much better option in regards to page load times. I personally just opted for this route using codepen while creating some document pages. They also had a embed that was click to play but it still is not as fast as just loading a codepen svg icon that is click to play. I engineered it myself so that when that is clicked it injects the player with autoplay etc… anyway +1 from this feature request


(Bart) #7

Added two +1’s!


(Dark Minaz) #8

+1 from me as well
facebook often does mess up the embeds (not your fault i get that) so having a simple image that links to sketchfab would probably solve that in a lot of cases and would get more people to actually go to sketchfab’s page (i.e see the rest of the works)


#9

You can do it with the oEmbed endpoint


(Shaderbytes) #10

for developers this would be easy then to set up a thumb and redirect but not sure if this meets the OP , as they suggest a button on your domain too generate such types of code code :wink:


#11

I’ve made a bookmarklet for you to do this.

You can find instructions for creating and using bookmarklets in the thread:

Creating Browser Bookmarklets

Raw base code, for anyone interested:

// Declare variables
var modelUID = window.location.pathname.replace('/models/','');
var modelData = window.prefetchedData['/i/models/' + modelUID];
var modelURL = modelData.viewerUrl;
var modelName = modelData.name;
var thumbnailURL;
var thumbnailLinkHTMLCode;
var thumbnailLinkBBCode;

modelData.thumbnails.images.every(function(e){
    // Thumbnails are automatically generated in a number of sizes,
    // but their sort order in the array may not be consistent.
    // Find the 1080 × 1920 px version if it exists.
    if (e.height == 1080) {
        thumbnailURL = e.url;
        // If we find it, break the loop
        return false;
    }
});

// Very old models (and maybe other edge cases) may not have a
// 1080 × 1920 px version, so fallback on the first image.
if (!thumbnailURL) {
    thumbnailURL = modelData.thumbnails.images[0].url;
}

// Generate link code
thumbnailLinkHTMLCode = '<a href="' + modelURL + '"><img src="' + thumbnailURL + '" alt="' + modelName + '" title="' + modelName + '"></a>';
thumbnailLinkBBCode = '[url=' + modelURL + '][img alt="' + modelName + '" title="' + modelName + '"]' + thumbnailURL + '[/img][/url]';

// Prompt link code to copy
window.prompt('Thumbnail Link HTML:', thumbnailLinkHTMLCode);
window.prompt('Thumbnail Link BBCode:', thumbnailLinkBBCode);

Bookmarklet minified version for HTML code:

javascript:(function(){var thumbnailURL,thumbnailLinkHTMLCode,modelUID=window.location.pathname.replace("/models/",""),modelData=window.prefetchedData["/i/models/"+modelUID],modelURL=modelData.viewerUrl,modelName=modelData.name;modelData.thumbnails.images.every(function(a){if(1080==a.height)return thumbnailURL=a.url,!1}),thumbnailURL||(thumbnailURL=modelData.thumbnails.images[0].url),thumbnailLinkHTMLCode='<a href="'+modelURL+'"><img src="'+thumbnailURL+'" alt="'+modelName+'" title="'+modelName+'"></a>',window.prompt("Thumbnail Link HTML:",thumbnailLinkHTMLCode);}());

Bookmarklet minified version for BBCode:

javascript:(function(){var thumbnailURL,thumbnailLinkBBCode,modelUID=window.location.pathname.replace("/models/",""),modelData=window.prefetchedData["/i/models/"+modelUID],modelURL=modelData.viewerUrl,modelName=modelData.name;modelData.thumbnails.images.every(function(e){if(1080==e.height)return thumbnailURL=e.url,!1}),thumbnailURL||(thumbnailURL=modelData.thumbnails.images[0].url),thumbnailLinkBBCode="[url="+modelURL+'][img alt="'+modelName+'" title="'+modelName+'"]'+thumbnailURL+"[/img][/url]",window.prompt("Thumbnail Link BBCode:",thumbnailLinkBBCode);}());

(Shaderbytes) #12

@james you are a champion , i just tested it and it worked great , didnt test the bbcode version but the html version and all was great , im sure both versions work as intended. A perfect solution for the OP :wink: Also I didnt know about the bookmarklet functionality so learnt something new as well , thanks a million


#13

@shaderbytes :bowing_man: :blush: Thanks! And thanks for testing. I’m a huge fan of bookmarklets for repetitive tasks that I don’t think need to go into user scripts.

If you come up with anything interesting or have ideas you think I can help with, feel free to contribute to the new Creating Browser Bookmarklets thread. Always happy to reduce monkey work :slight_smile:

If it catches on, maybe we can convert it to a forum wiki.


(Mariamorain) #14

I just know this tool and is great, however I think you can improve this a little with some options, like the possibility to add the Sketchfab logo (I have to add the logo in photoshop) and wireframe wight, and should be awesome if you can use this option in the 3D properties editor.


(Vr Go) #15

i make model with material list by viewer.js, can i use the tool screen shot