In this article is shown the way how to show different thumbnail sizes static and dynamic when display the related images of Dynamic Module content type (example).
The scenario:
You have related images added to a Content Item. They could be shown by adding a custom fled of type Related Media (Images) and Display selected Items on the frontend using Images widget.
In case you have generated different thumbnail sizes for that images you can choose which of them to be shown on the frontend.
There are two possible solutions:
A. Static – one size for all the thumbnails
This is the simplest way – by setting the field: ThumbnailName=”thumbXX”, where thumbXX is the name for developers of that thumbnail: Administration > Settings > Basic > Thumbnails > <your thumbnail size>.
Adding of custom field in Widget template is described in that article.
<
sf:ImagesView
ID
=
"ImagesView1"
ControlDefinitionName
=
"ImagesFrontend"
runat
=
"server"
MasterViewName
=
"CustomMasterThumbnailLightBoxView"
Title
=
""
UrlKeyPrefix
=
""
>
<
RelatedDataDefinition
RelatedFieldName
=
"Thmbl"
RelatedItemType
=
"Telerik.Sitefinity.DynamicTypes.Model.TestModule1.Contentone"
RelationTypeToDisplay
=
"Child"
RelatedItemSource
=
"DataItemContainer"
>
</
RelatedDataDefinition
>
<
ControlDefinition
ControlDefinitionName
=
"ImagesFrontend"
runat
=
"server"
ProviderName
=
"OpenAccessDataProvider"
>
<
Views
>
<
sf:ImagesViewMasterDefinition
SortExpression
=
""
ViewName
=
"ImagesFrontendThumbnailsListBasic"
runat
=
"server"
ThumbnailsName
=
"thumb80"
>
</
sf:ImagesViewMasterDefinition
>
<
sf:ImagesViewMasterDefinition
SortExpression
=
""
ViewName
=
"ImagesFrontendThumbnailsListLightBox"
runat
=
"server"
ThumbnailsName
=
"thumb80"
>
</
sf:ImagesViewMasterDefinition
>
<
sf:ImagesViewMasterDefinition
SortExpression
=
""
ViewName
=
"ImagesFrontendThumbnailsListSimple"
runat
=
"server"
ThumbnailsName
=
"thumb80"
>
</
sf:ImagesViewMasterDefinition
>
<
sf:ImagesViewMasterDefinition
SortExpression
=
""
ViewName
=
"ImagesFrontendThumbnailsListStrip"
runat
=
"server"
ThumbnailsName
=
"thumb80"
>
</
sf:ImagesViewMasterDefinition
>
<
sf:ImagesViewDetailDefinition
ViewName
=
"ImagesDetailView"
runat
=
"server"
>
</
sf:ImagesViewDetailDefinition
>
</
Views
>
</
ControlDefinition
>
</
sf:ImagesView
>
Now all the thumbnails displayed have the thumb size you have set, in our case 80x80px.
B. Dynamic – different sizes depending of your criteria (in that example: Based on the index)
The Images View has several predefined views (see the code above): ImagesFrontendThumbnailsListBasic, ImagesFrontendThumbnailsListLightBox, ImagesFrontendThumbnailsListSimple, ImagesFrontendThumbnailsListStrip, ImagesDetailView, which set the thumb size as discussed in part A (static). So now we need to create our own View and register it in order to be used in the widget template.
To do so we have to:
1. Extend a specific view (In the example we are extending the MasterThumbnailLightBoxView)
2. Override the ConfigureDetailLink method that will be called on ItemDataBound event of the ImagesView. In this method you will be able to provide a custom logic for setting the ImageUrl of each image according to the current item position. In our case we have:
using
System;
using
System.Collections.Generic;
using
System.Linq;
using
System.Web.UI;
using
Telerik.Sitefinity.Modules.Libraries.Web.UI;
using
Telerik.Sitefinity.Modules.Libraries.Web.UI.Images;
using
Telerik.Sitefinity.Modules.Libraries;
namespace
SitefinityWebApp.Controls.ImageViews
{
public
class
CustomMasterThumbnailLightBoxView : MasterThumbnailLightBoxView
{
protected
override
void
ConfigureDetailLink(System.Web.UI.WebControls.HyperLink singleItemLink, Telerik.Sitefinity.Libraries.Model.Image dataItem, Telerik.Web.UI.RadListViewItem item)
{
base
.ConfigureDetailLink(singleItemLink, dataItem, item);
var itemIndex = (item
as
Telerik.Web.UI.RadListViewDataItem).DataItemIndex;
var mcMasterDefinition =
this
.MasterViewDefinition
as
MediaContentMasterDefinition;
if
(mcMasterDefinition !=
null
)
{
if
(itemIndex % 2 == 0)
{
// Set thumbnail 80x80px
singleItemLink.ImageUrl = dataItem.ResolveThumbnailUrl(
"thumb80"
);
}
else
{
// Set thumbnail 36x36px
singleItemLink.ImageUrl = dataItem.ResolveThumbnailUrl(
"thumb36"
);
}
}
}
public
override
IEnumerable<ScriptDescriptor> GetScriptDescriptors()
{
return
new
[] {
new
ScriptControlDescriptor(
typeof
(MasterThumbnailLightBoxView).FullName,
this
.ClientID) };
}
public
static
Guid TemplateId =
new
Guid(
"F33C907E-DA31-46A1-B3F4-E1265351470A"
);
}
}
3. Register a template for the custom control in the Global asax file
private
void
Bootstrapper_Initialized(
object
sender, Telerik.Sitefinity.Data.ExecutedEventArgs e)
{
if
(e.CommandName ==
"Bootstrapped"
)
{
ControlTemplates.RegisterTemplatableControl<CustomMasterThumbnailLightBoxView, Image>();
RegisterControlTemplate(
"Telerik.Sitefinity.Resources.Templates.Frontend.Libraries.Images.MasterThumbnailLightBoxView.ascx"
,
typeof
(CustomMasterThumbnailLightBoxView).FullName,
ImagesDefinitions.FrontendMasterThumbnailLightBoxViewFriendlyName,
CustomMasterThumbnailLightBoxView.TemplateId);
}
}
4. Add configuration in the Libraries config for the newly created CustomMasterThumbnailLightBoxView. You can achieve this either through going the Administration > Settings > Advanced > ContentView > Controls > ImagesFrontend > View > Create New > (type of) ImagesViewMasterElement
- or –
Through pasting this settings directly in your LibrariesConfig.config:
<
contentViewControls
>
<
contentViewControl
definitionName
=
"ImagesFrontend"
>
<
views
>
<
view
prevNextLinksDisplayMode
=
"Text"
allowPaging
=
"True"
allowUrlQueries
=
"True"
disableSorting
=
"False"
filterExpression
=
"Visible = true AND Status = Live"
itemsPerPage
=
"50"
canUsersSetItemsPerPage
=
"False"
sortExpression
=
"PublicationDate DESC"
detailsPageId
=
"00000000-0000-0000-0000-000000000000"
templateEvaluationMode
=
"None"
itemsParentId
=
"00000000-0000-0000-0000-000000000000"
renderLinksInMasterView
=
"True"
enableSocialSharing
=
"False"
displayMode
=
"Read"
resourceClassId
=
"ImagesResources"
isMasterView
=
"False"
viewType
=
"SitefinityWebApp.Controls.ImageViews.CustomMasterThumbnailLightBoxView, SitefinityWebApp"
viewName
=
"CustomMasterThumbnailLightBoxView"
type:this
=
"Telerik.Sitefinity.Modules.Libraries.Configuration.ImagesViewMasterElement, Telerik.Sitefinity"
>
<
commentsSettingsDefinition
postRights
=
"None"
/>
</
view
>
</
views
>
</
contentViewControl
>
</
contentViewControls
>
5. Add the control to the Views definition of the ImagesView like this:
<
sf:ImagesView
ID
=
"ImagesView"
ControlDefinitionName
=
"ImagesFrontend"
runat
=
"server"
MasterViewName
=
"CustomMasterThumbnailLightBoxView"
Title
=
""
UrlKeyPrefix
=
""
>
<
RelatedDataDefinition
RelatedFieldName
=
"Thmbl"
RelatedItemType
=
"Telerik.Sitefinity.DynamicTypes.Model.TestModule1.Contentone"
RelationTypeToDisplay
=
"Child"
RelatedItemSource
=
"DataItemContainer"
>
</
RelatedDataDefinition
>
<
ControlDefinition
ControlDefinitionName
=
"ImagesFrontend"
runat
=
"server"
ProviderName
=
"OpenAccessDataProvider"
>
<
Views
>
<
sf:ImagesViewMasterDefinition
SortExpression
=
""
ViewName
=
"ImagesFrontendThumbnailsListBasic"
runat
=
"server"
ThumbnailsName
=
"thumb80"
>
</
sf:ImagesViewMasterDefinition
>
<
sf:ImagesViewMasterDefinition
SortExpression
=
""
ViewName
=
"ImagesFrontendThumbnailsListLightBox"
runat
=
"server"
ThumbnailsName
=
"thumb80"
>
</
sf:ImagesViewMasterDefinition
>
<
sf:ImagesViewMasterDefinition
SortExpression
=
""
ViewName
=
"CustomMasterThumbnailLightBoxView"
runat
=
"server"
ThumbnailsName
=
"thumb80"
>
</
sf:ImagesViewMasterDefinition
>
<
sf:ImagesViewMasterDefinition
SortExpression
=
""
ViewName
=
"ImagesFrontendThumbnailsListSimple"
runat
=
"server"
ThumbnailsName
=
"thumb80"
>
</
sf:ImagesViewMasterDefinition
>
<
sf:ImagesViewMasterDefinition
SortExpression
=
""
ViewName
=
"ImagesFrontendThumbnailsListStrip"
runat
=
"server"
ThumbnailsName
=
"thumb80"
>
</
sf:ImagesViewMasterDefinition
>
<
sf:ImagesViewDetailDefinition
ViewName
=
"ImagesDetailView"
runat
=
"server"
>
</
sf:ImagesViewDetailDefinition
>
</
Views
>
</
ControlDefinition
>
</
sf:ImagesView
>
6. Build the solution and run the project
Now you should have the desired behavior.
Svetoslav Manchev
Svetoslav Manchev is a Technical Support Officer at Telerik since 2013.