Customize Related Image thumbnail size

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.

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:

3. Register a template for the custom control in the Global asax file

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:

5. Add the control to the Views definition of the ImagesView like this:
 

  6. Build the solution and run the project

 Now you should have the desired behavior.