+1-888-365-2779
Try Now
More in this section
Categories
Bloggers
Blogs RSS feed

Customize Related Image thumbnail size

by Svetoslav Manchev

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.

3 comments

Leave a comment
  1. Guilherme Nov 06, 2015
    How can i get just the related Image Url from the template?
  2. Svetoslav Nov 09, 2015

    Hi Guilherme,

    You can use/eval the "MediaUrl". For example as on that code sample: http://screencast.com/t/O2gTXEEz

    It is generated for you in the Detiles Item view, in case you select Simple link, when create/edit the related image filed (Administration > Module Builder > <your module> > <your content type> > then Create or Edit the desired field).

    You can also update the template manually as per your needs.

    " runat="server">

  3. David Dec 16, 2015

    Added the ThumbnameNails="" to ImagesFrontendThumbnailsListStrip view, however this doesn't actually change the size of the thumbnails when the control is rendered.  I presume it means it "loads" the Thumbnail size, but CSS is still setting width/height on the front end?

    Also in the ImagesFrontendThumbnailsListStrip, how do I set what size of picture will be used for the main image.  Again I can set CSS for this, but wanted to load the appropriate image size?

    Leave a comment