Customize Related Image thumbnail size

Customize Related Image thumbnail size

September 29, 2014 0 Comments
Customize Related Image thumbnail size

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.

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.

Comments
Comments are disabled in preview mode.
Topics
 
 
Latest Stories in
Your Inbox
Subscribe
More From Progress
d12fcc0bdb669b804e7f71198c9619a7
5 Questions Automakers Should Ask to Improve Asset Uptime
Download Whitepaper
 
SF_MQ_WCM
2018 Gartner Magic Quadrant Web Content Management (WCM)
Download Whitepaper
 
What-Serverless-Means-For-Enterprice-Apps-Kinvey
What Serverless Means for Enterprise Apps
Watch Webinar