What is a thumbnail preview?

Thumbnail-preview or preview picture is an image that characterizes a specific page of the site. Like the main header, which is usually the only one on the page, the thumbnail preview is also set once, but it is not visible on the site at the same time.

How to setup the code of the thumbnail to the website?

The preview thumbnail link is placed with a special tag that is part of the OpenGraph document markup .
Into the <head> all pages of your site you need to insert the following code:
The first meta tag is responsible for the title of the page that will be displayed in social networks / instant messengers when someone sends a link to the site page. Setting this tag is a prerequisite for the sent link to be displayed as a beautiful preview block.
The second meta tag with the value summary_large_image is part of the standard developed by Twitter and makes the block preview appear with a big thumbnail. If you do not set this tag, then the thumbnail image will be generated as a small square.
And the last, third tag meta contains a direct link to the thumbnail image. In order for the thumbnail to be generated according to the template you chose in the Thumber.ru interface, you need to set a special URL displayed in your personal account for each prototype.

Installing thumbnail previews for different frameworks and CMS

After creating a prototype in the constructor and automatically checking it, PHP code for different frameworks will be available.

For CMS Wordpress, special plugin has been created that allows you to set thumbnail previews on post pages without programming knowledge.< /p>


What is a «prototype»? Glossary.

Prototype - is a dynamic preview thumbnail layout for your site created in the Thumber.ru site builder based on one of the available templates.
Depending on the plan chosen, the number of available websites to connect to and prototypes allowed for each website may vary.
Label - part of the preview thumbnail full address within Thumber.ru, responsible for collecting statistics.
Within one prototype, you can connect several tags in order, for example, to separate statistics on the use of thumbs for different categories of the site (if the thumb is placed on a news site or a blog with categories).

Can the thumbnail be used to display on the site as a simple image?

Yes, you can. In this case, the insert format is slightly different from the meta:content tag.
The URI of the current page where the thumbnail is located is removed from the link, but the <img> the referrerpolicy attribute is added so that when the thumbnail is requested, the browser itself passes the URI of the current page of your site.
It is also not necessary to specify the protocol for thumbnail requests, because if it is used as an image, the browser will make a request with the same protocol that opens your site.

How to generate thumbnails with Thumber.ru?

You need to register on the service, then add the website in your personal account and confirm it. After the confirmation procedure, it will be possible to create a prototype for the cabinet within a specific website.
In the Prototype Builder, you can select the general parameters of thumbs - background type, black and white and transparency effects, rounding corners. Then a template for the cabinet is selected - there are several of them and they differ in the arrangement of elements, the style of displaying the page title, and additional text.
At the end, you can see how the cabinet will look like in real life by clicking the "preview" button. It will also help you check if there are any errors in the designer form and tell you in detail if something is wrong.
After the prototype is saved, it gets tested. It is carried out automatically. At this moment, the thumbnail code is not yet issued and it does not need to be put on the site.
As part of this check, the robot Thumber.ru will make sure that the combination "your site + prototype" has enough data to create a thumbnail. Required are a logo (if supported by the prototype template) and a background image if that type of background is selected, not a gradient.

What data is required for correct work of the prototype?

Thumbnail background - if you select the "image" background type in the constructor (there is also the "gradient" option), then the prototype will try to take the background image from the page of the site where the thumbnail is installed, from the data-tmb-image attribute of any tag.
For example, such code will be correctly found by the robot Thumber.ru
<div data-tmb-image="http://mysite.com /background.jpg"></div>
and the image URL http://mysite.com/background.jpg will go into the prototype.
And from here
<img src="http://mysite.com/background.jpg" />
or from here
background image address will not be retrieved.
If the background image for all pages is the same, then the URL can be specified directly in the prototype constructor. It is used as a safety net, because first, in any case, the presence of a special background mark on the site page is checked.
Site logo - if the template used for the prototype supports the placement of the website logo on the thumb, then the logic of its work is completely similar to the background image.
Label used for logo is data-tmb-logo.

How does the prototype work after installing of the thumbnail code on the website?

After creating a prototype in the constructor and automatically checking it, you will have access to the code for installation on the pages of the site. Then it's up to the Thumber.ru service!
When someone shares a page of your site in social networks or messengers, the robot of this social network or messenger goes to the specified page in the background and parses data from there in a special way. Namely, it takes the page title, descriptive text and... right! thumbnail preview. And as the URL of this cabinet, a special unique address is set specifically for your prototype.
The robot, among other things, requests the thumbnail image itself. Thumber.ru, upon receiving a request for a preview thumbnail, uses internal algorithms to determine whether a thumbnail has been requested earlier for each specific page, and either generates it from a prototype or returns the previously created one. In the case of generating a new thumbnail, it is uploaded to the fast content delivery network (CDN) in order to be served almost instantly in the future (option depends on tariff).
At the first generation of the cabinet, all components are checked, similar to the check when creating a prototype. If the check fails, you will immediately receive an email message to your mailbox indicating the detected error.
After 3 errors in a row, the prototype will be disabled, and its owner will need to fix generation problems and submit it again for automatic verification. Instead of new thumbs, it will show the default thumbnail image from the Thumber.ru service. At the same time, cabinets that were previously successfully generated using this prototype will continue to work properly.

Texts rendering on the thumbnail

Most templates available for prototypes use 3 types of text. The scheme of their work is similar to the scheme of the background image and logo.
The difference is that the text is not taken from the value of the attribute, but from the content of the tag to which the label attribute is set.
For each type of text, there is a field in the template where you can enter the default text. It will be displayed on the thumb if there is no block with the corresponding label on the page.
This functionality can be checked using the thumbnail preview in the constructor, if you add the necessary tags to the site in advance.

Main text - the name of the page where the thumbnail is installed. Label data-tmb-big_text.

This label can be set to the main title of the page <h1> and then this text will be taken from it.

If the label is not found on the page, then the text will be taken from the first <h1> heading, if present.

Description text - secondary (smaller) text with a brief description of the page. Label data-tmb-small_text.

You can, for example, set this label to the tag of the first paragraph of text on the page, if you have one.

If the label is not found on the page, then the text will be taken from the first paragraph <p> or the first level 2 heading <h2> if present.

Slogan - an analogue of a site's signature or some slogan that can be displayed on all thumbs generated for the site.

Label for the slogan on the site pages - data-tmb-motto.

Unlike the two previous types of text, which are displayed mandatory (search on the site => text from the prototype => text by default), the text for the slogan is not displayed if it is not found on the site and is not set in the prototype.

Life-time of the prototype

All prototypes run for the full time billed. If the tariff has expired and the next period has not been paid, then the prototypes that are not included in the free tariff quota are deactivated.
Inactive (deactivated) prototypes stay like this for 7 days. After this period, the prototype is permanently deleted along with all previously generated thumbs.
If during this period you pay a tariff, the quota (limits) of which include the prototype, it will be automatically activated back and start working again. All previously generated thumbs will become available instantly.