+1-888-365-2779
Try Now
More in this section

Forums / Designing with Sitefinity / Controlling compression for the image gallery thumbnails

Controlling compression for the image gallery thumbnails

6 posts, 0 answered
  1. Kris Marissens
    Kris Marissens avatar
    4 posts
    Registered:
    06 May 2010
    29 Jul 2010
    Link to this post
    Hello,

    Is there any (easy) way to control the quality of (and scaling algorithm for) the thumbnails generated by the image gallery control? Unless I overlooked this there isn't any property available in the admin control panel.

    Regards,
    Kris
  2. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    29 Jul 2010
    Link to this post
    Hi Kris Marissens,

    We use the best graphics device interface in ASP.NET to draw the image - GDI+. We use HighQualityBicubic Interpolation mode. The mode specifies high-quality, bicubic interpolation. Prefiltering is performed to ensure high-quality shrinking. This mode produces the highest quality transformed images. Having that said I am not able to suggest other methods to generate better quality of the thumbs, since this is what the ASP.NET Framework expose.

    The thumbs that are generated during upload. When you upload an image through the backend UI we generate the thumbnail at run time.You can add a thumbnailResizeSettings configuration element to the cmsEngine configuration settings to set the settings which will be taken when the ImagesHelper class generates thumbnails for your images uploaded. Sample bellow:

    <cmsEngine  defaultProvider="Generic_Content"  >
    <thumbnailResizeSettings compositingQuality="HighQuality" interpolationMode="HighQualityBicubic" smoothingMode="HighQuality">
    </thumbnailResizeSettings>
          <providers>
              <clear/>

    The default values for the attributes in thumbnailResizeSettings are

    CompositingQualityThumbnail = HighQuality
    SmoothingModeThumbnail = HighQuality
    InterpolationModeThumbnail = Bicubic

    Regards,
    Ivan Dimitrov
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. Kris Marissens
    Kris Marissens avatar
    4 posts
    Registered:
    06 May 2010
    29 Jul 2010
    Link to this post
    Thank you Ivan,

    To get an idea about the issue regarding quality I am having right now, please find below a link to a composition of 3 images. The first 2 images are the result of using Photoshop's bicubic interpolation modes ('best for smooth gradients' and 'best for reduction') and the third one is Sitefinity's generated thumbnail which appears way too sharpened.

  4. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    29 Jul 2010
    Link to this post
    Hi Kris Marissens,

    The Photoshop is a separate software that is especially created for image manipulation and it uses different algorithm and methods for generating images. Have you tried to use ASP.NET classes with GDI + and  standard ASP.NET classes as System.Drawing.Graphics, System.Drawing.Image, Bitmap.Bitmap to see whether there will be a difference, because you are making a comparison regarding the quality  of the generated images with a professional software.

    Since you use Photoshop you can crate images with a certain size and high quality that will act as thumbs, then upload the images to Sitefinity. Create a custom control that inherits ImageGallery and use these images instead of the thumbs.

    Below is a sample code

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using Telerik.Libraries.WebControls;
    using System.Web.UI.WebControls;
     
    /// <summary>
    /// Summary description for ImageGalleryCustom
    /// </summary>
    public class ImageGalleryCustom : ImageGallery
    {
        public ImageGalleryCustom()
        {
        }
     
        // YOU NEED TO OVERRY TEMPLATE PROPERTIES TO SET YOUR TEMPLATE
     
        protected override void SetListMetadata(System.Web.UI.Control itemContainer, Telerik.Cms.Engine.IContent contentItem)
        {
            base.SetListMetadata(itemContainer, contentItem);
     
            switch(galleryViewMode)
            {
                case GalleryViewMode.Lightbox:
                case GalleryViewMode.BigImageAndList:
                case GalleryViewMode.ListDetails:
                    HyperLink downloadLink = itemContainer.FindControl("DownloadLink") as HyperLink;
     
                    if (downloadLink != null)
                    {
                        if (this.galleryViewMode != GalleryViewMode.Lightbox)
                            this.AddPersistenceToLink(downloadLink);
     
                        string url = contentItem.UrlWithExtension;//"Path to your i content item"
                      
                        downloadLink.ImageUrl = ResolveUrl(url);
                        downloadLink.Text = contentItem.GetMetaData("AlternateText") as string;
                        if (this.galleryViewMode == GalleryViewMode.ListDetails)
                        {
                            downloadLink.NavigateUrl = GetItemUrl(contentItem, this.SingleItemUrl);
     
                            HyperLink titleLink = itemContainer.FindControl("Title") as HyperLink;
                            if (titleLink != null)
                            {
                                titleLink.NavigateUrl = downloadLink.NavigateUrl;
                                titleLink.Text = contentItem.GetMetaData("Name") as string;
                                this.AddPersistenceToLink(titleLink);
                            }
                        }
                        else if (this.galleryViewMode == GalleryViewMode.Lightbox || this.galleryViewMode == GalleryViewMode.BigImageAndList)
                        {
                            downloadLink.NavigateUrl = base.GetItemUrl(contentItem, null);
                            HyperLink titleLink = itemContainer.FindControl("Title") as HyperLink;
                            if (titleLink != null)
                            {
                                titleLink.NavigateUrl = downloadLink.NavigateUrl;
                                titleLink.Text = contentItem.GetMetaData("Name") as string;
                            }
                            downloadLink.ToolTip = contentItem.GetMetaData("Name") as string;
                        }
                    }
     
                    break;
            }
     
          
        }
     
        void AddPersistenceToLink(HyperLink ctrl)
        {
     
            if (ContentItemKeyPersistance == ItemKeyPersistanceMode.Cookie)
            {
                string script = String.Format("document.cookie = '{0}={1};expires={2};path=/'", ProviderNameImpl,
                                              ContentItemKey, DateTime.Now.AddMinutes(1).ToUniversalTime());
                ctrl.Attributes["onclick"] = script;
            }
     
            if (ReturnUrlPersistance == ItemKeyPersistanceMode.Cookie)
            {
                string script = String.Format("document.cookie = '{0}={1};expires={2};path=/'", "ReturnUrl",
                                              Context.Server.UrlEncode(Context.Request.RawUrl), DateTime.Now.AddMinutes(1).ToUniversalTime());
                ctrl.Attributes["onclick"] = script;
            }
        }
     
        private ImageGallery.GalleryViewMode galleryViewMode = GalleryViewMode.ListDetails;
    }


    Regards,
    Ivan Dimitrov
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  5. Amier
    Amier avatar
    8 posts
    Registered:
    14 Sep 2010
    27 Sep 2010
    Link to this post
    For me, the defaults were not what Ivan suggested, but adding the thumbnailResizeSettings tag, with the appropriate values, to the web.config improved the quality of the thumbnails substantially.
  6. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    27 Sep 2010
    Link to this post
    Hello Amier,

    This tag  thumbnailResizeSettings accepts standard ASP.NET properties of Graphics class. Here is the MSDN reference. My code outlines the default configuration. This tag thumbnailResizeSettings is not required and by default you have these settings

    CompositingQualityThumbnail = HighQuality
    SmoothingModeThumbnail = HighQuality
    InterpolationModeThumbnail = Bicubic

    The values of CompositingQualityThumbnail and SmoothingModeThumbnail are optimal. For  InterpolationModeThumbnail you can change the value to HighQualityBicubic because the value Bicubic is not appropriate for shrinking below 25 percent and method of constructing new data points within the range of a given set does not give desired results. Generally Bicubic interpolation is better than the standard linear algorithm. There are negative lobes on the kernel which could cause haloing and clipping and is an artifact. This increased the sharpness of the image

    Kind regards,
    Ivan Dimitrov
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
Register for webinar
6 posts, 0 answered