Thumbnails

For each image in a library, you can generate thumbnails with different sizes and then choose which size to display on the website. For example, you can have an image with original size 400x400 px uploaded in a library. You can generate one thumbnail 200x200 px and another 100x100 px. On one page you can display the small thumbnail and on another – the larger, and whenever the image is clicked, you can display the original size.

Additionally, you can resolve the thumbnail URLs in your code and load a thumbnail instead of the actual image for use case scenarios where this behavior is desired. For more information see Retrieve media content thumbnail URLs.

You first set the predefined thumbnail sizes, then for each root library you choose what type of thumbnails to generate, and, finally, when configuring the widgets, you choose which thumbnails to display.

To configure the image thumbnail sizes, perform the following:

1. In the main menu, click Administration» Settings.
   The Basic settings page appears.
2. Click Thumbnails.
   All definedImage thumbnails appear.
   For each thumbnail size, you can see its size and how many libraries it is applied to.
3. To create a new thumbnail size, click Add image thumbnail size.
4. Enter a name for the thumbnail size.
5. In Resize image thumbnail dropdown box, you can choose whether you want to crop or resize the images in the library to fit the predefined size.
   Select one of the following:
   • Resize to fit area
     Enter in pixels the dimensions of the predefined thumbnail, by filling out Max width and Max height input fields.
     When the proportion of the original image dimensions is different from this of the predefined thumbnail, the images are resized so that the longer side of the image fits the respective side of the thumbnail. Images are aligned up and to the left of the predefined thumbnail.
   • Crop to area
     Enter the dimensions of the cropped area in Widthand Heightfields.
     The original image is cropped from all sides evenly, so that it fits the thumbnail size.
6. If you want original images that are smaller than the predefined thumbnail to be resized to fit the thumbnail, select Resize smaller images to bigger dimensions checkbox.
7. Choose the Qualityof the image thumbnail that you want to generate.
8. If you want to use this thumbnail size as a default when you create an image library, select When creating an image library select this size by default checkbox.
9. Click Done.
   You can select more than one thumbnail size as a default.
10. If required, enter a name for developer that will be used in code and for generating the URL of the thumbnail. 
    The name must be unique.

Regenerate thumbnails

In certain scenarios you might want to regenerate the thumbnails of an image or video in Sitefinity. You can do that on an item or image/video library level. Follow the instructions below:

1. In the main menu, click Content » Images
2. Navigate to the desired image library
3. Click on Actions » Regenerate Thumbnails

Alternatively, if you re-publish a single image, its thumbnail gets re-generated

Add thumbnail profiles styles to your theme

In case you are not using the Basic theme but still want to leverage thumbnail profiles styles, you need to add manually the CSS to your custom theme file. The following example demonstrates how you add styling to a custom theme:

/*Product details*/

.sfproductMainImgWrp .sfProductTmbWrpSys img
{
   max-width:200px;
   max-height:200px;
}

.sfproductMainImgWrp .sfProductTmbWrpSys 
{
   width:200px;
}

/*Buy now widget*/

.sfproductImgsList .sfProductTmbWrpSys img
{
   max-height: 80px;
   max-width:80px;
}

.sfproductImgsList .sfProductTmbWrpSys
{
   width:80px;
}

/*All widgets*/

.sfProductTmbWrpthumbnail img
{
  max-width:120px;
  max-height:120px;
}

.sfProductTmbWrpthumbnail 
{
   width: 120px;
}

.sfProductTmbWrpsmall img
{
   max-width:240px;
}

.sfProductTmbWrpsmall 
{
   width: 240px;
}

.sfProductTmbWrpmedium img
{
   max-width:240px;
   max-height:300px;
}

.sfProductTmbWrpmedium 
{
   width:240px;
}

.sfProductTmbWrpthumb200 img
{
   max-width:200px;
   max-height:200px;
}

.sfProductTmbWrpthumb200
{
   width:200px;
}

.sfProductTmbWrpthumb160 img
{
   max-width:160px;
   max-height:160px;
}

.sfProductTmbWrpthumb160
{
   width:160px;
}

.sfProductTmbWrpthumb80 img
{
   max-width:80px;
   max-height:80px;
}

.sfProductTmbWrpthumb80
{
   width:80px;
}

.sfProductTmbWrpthumb36 img
{
   max-width:36px;
   max-height:36px;
}

.sfProductTmbWrpthumb36
{
   width:36px;
}

/*Shopping cart*/

.sfshoppingCartWrp .sfProductTmbWrpSys
{
   width:80px;
}

.sfshoppingCartWrp .sfProductTmbWrpSys img
{
   max-width: 80px;
   max-height: 80px;
}

/* Shopping cart summary block */

.sfcartSummaryBlockWrp .sfProductTmbWrpSys img
{
   max-width: 36px;
   max-height: 36px;
}

.sfcartSummaryBlockWrp .sfProductTmbWrpSys
{
   width: 36px;
}

/*Expandable shopping cart*/

.sfcartSummaryExpandableWrp .sfProductTmbWrpSys img
{
   max-width: 36px;
   max-height: 36px;
}

.sfcartSummaryExpandableWrp .sfProductTmbWrpSys
{
   width: 36px;
}

/*Orders list*/

.sfordersListWrp  .sfProductTmbWrpSys,
.sforderDetailsWrp  .sfProductTmbWrpSys
{
   width:60px;
}

.sfordersListWrp  .sfProductTmbWrpSys img,
.sforderDetailsWrp  .sfProductTmbWrpSys img
{
   max-width: 60px;
}

/*Wish list*/

.sfwishListWrp .sfProductTmbWrpSys
{
   width:80px;
}

.sfwishListWrp .sfProductTmbWrpSys img
{
   max-width: 80px;
   max-height: 80px;
}

Limit the visibility of thumbnail profiles

You can choose which thumbnails to hide or display in specific widgets. For example, when you configure the Imagewidget, you can have different choices of thumbnail sizes from the choices you have when you configure the Image gallery widgets.

To do this, you use thumbnail tags. You tag thumbnail profiles then you tag widgets where you want these thumbnails to be available with the same tags.

For more information, see Limit the visibility of thumbnail profiles.