The content you're reading is getting on in years
This post is on the older side and its content may be out of date.
Be sure to visit our blogs homepage for our latest news, updates and information.
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.
View all posts from The Progress Team on the Progress blog. Connect with us about all things application development and deployment, data integration and digital business.
Let our experts teach you how to use Sitefinity's best-in-class features to deliver compelling digital experiences.
Learn MoreSubscribe to get all the news, info and tutorials you need to build better business apps and sites
Progress collects the Personal Information set out in our Privacy Policy and the Supplemental Privacy notice for residents of California and other US States and uses it for the purposes stated in that policy.
You can also ask us not to share your Personal Information to third parties here: Do Not Sell or Share My Info
We see that you have already chosen to receive marketing materials from us. If you wish to change this at any time you may do so by clicking here.
Thank you for your continued interest in Progress. Based on either your previous activity on our websites or our ongoing relationship, we will keep you updated on our products, solutions, services, company news and events. If you decide that you want to be removed from our mailing lists at any time, you can change your contact preferences by clicking here.