Categories
Bloggers
Blogs RSS feed

Changing thumbnail size in Image Gallery

by Boyan Barnev

As with most of our blog posts this one is also a result of constructive client feedback, submitted through the support channel.

The following post will briefly demonstrate the ability to modify the default thumbnail size in Image gallery frontend widget, without affecting the image quality.

 By default the logic that concerns thumbnail generation is implemented in the ConfigureDetailLink() method of Telerik.Sitefinity.Modules.Libraries.Web.UI.BaseMasterThumbnailView<T>. As you have probably guessed already, inheritors of this class are the MasterThumbnailView classes used in Images, Videos and Documents for displaying the thumbnails mode of the respective ContentView controls.

This makes our task very easy, as we can inherit from the desired MasterThumbnailView, and override the ConfigureDetailLink, where we can pass a custom thumbnail size.

In our case we'll be modifying the Image Gallery's thumbnail view, so our class of interest is Telerik.Sitefinity.Modules.Libraries.Web.UI.Images.MasterThumbnailView, so we can say:

using System;
using System.Linq;
using Telerik.Sitefinity.Modules.Libraries;
using Telerik.Sitefinity.Modules.Libraries.Web.UI.Images;
  
namespace SitefinityWebApp
{
    public class MTVCustom : MasterThumbnailView
    {
        protected override void ConfigureDetailLink(System.Web.UI.WebControls.HyperLink singleItemLink, Telerik.Sitefinity.Libraries.Model.Image dataItem, Telerik.Web.UI.RadListViewItem item)
        {
            int tmbSize = 400;
            singleItemLink.ImageUrl = dataItem.ResolveThumbnailUrl(size: tmbSize);
            singleItemLink.Text = dataItem.AlternativeText;
            singleItemLink.ToolTip = dataItem.Description;
        }
    }
}

and then configure Sitefinity to use this view in Administration->Settings->Advanced->ContentView->Controls->Images Frontend->Views->ImagesFrontendThumbnailsListBasic->ViewType where you can type the CLR type of your new view.

Please keep in mind that the default CSS applied to the thumbnails corresponds to the 120px size, so you might need to adjust it additionally, for example:

.sfimagesTmbList .sfimagesTmb {
  width: 200px;
  height: 200px;
}
  
.sfimagesTmbList a {
   width: 200px;
  height: 200px;
}
 

For your convenience please find attached the above sample here, and feel free to modify it as per your desired use case scenario.

3 comments

Leave a comment
  1. Denny May 05, 2013
    Do you know that your "here.zip" is actually a search control... not the one from this article?
  2. Denny May 07, 2013
    Also, I have added this same logic to the Lightbox view, but obviously inheriting from its base class (MasterThumbnailLightBoxView) instead, and to no avail.   When I open the page editor the "More" links on all of the controls don't work and in f12 console I see jQuery has crashed with error "SCRIPT5009: 'SitefinityWebApp' is undefined " (which is the namespace, and is the exact same as the namespace in the MasterThumbnailView version which works fine).

    Any clues? 
  3. Nauman Jul 25, 2013
    Sitefinity support team really think how they are providing support to there clients and still i did not understand the common features that should be there are not available in the cms :( . Like the above request it is supper common and so my threads and questions in the sitefinity asking the same question again and again and there is no single point to get all the info.

    Leave a comment