Feather: Use Image gallery widget to display related images

This tutorial demonstrates how to generate a detail template for the MVC dynamic content widget that renders a MVC Image gallery widget within itself. In detail view, the gallery widget displays the related images of the dynamic content item.

Create a related images field

1. Create a dynamic module and a dynamic content type.
   For more information, see Overview: Dynamic modules and the Module Builder
2. Open the new content type for editing and click Add a field...
3. In Name, enter ImageGallery.
4. In Type, select Related media
5. In What kind of media this field will manage?, select Images.
6. Click Continue
7. Under Display selected items on the frontend using..., select Custom.
8. In Type or Virtual path of the custom widget , enter the full type name of the image gallery controller:
   Telerik.Sitefinity.Frontend.Media.Mvc.Controllers.ImageGalleryController, Telerik.Sitefinity.Frontend.Media
9. Click Done » Finish and select Update widget templates as well.

When you open the detail view of an item that has related images, you see its images rendered in an Image gallery widget in Overlay mode.

Modify the settings of the Image gallery

The Image gallery widget is called from the details view of the dynamic content widget and this is  where you can modify its settings.

To edit the detail view, navigate to Design » Widget templates and open the Detail.<Name of your type> widget template.
The following code shows how the Image gallery widget is rendered:

To render the RelatedData action of the ImageGalleryController, the template uses the ASP.NET MVC's helper method Html.Action. To modify the model of the Image gallery, you have to pass the desired settings as a parameters to the Html.Action method.

Change the list template of the Image gallery

To change the default OverlayGallery template, add a new parameter templateName to the Html.Action.
You can choose one of the following values:

• ImageGallery
• OverlayGallery
• SimpleList
• ThumbnailStrip
• Or you can enter the name of your custom template.

The following example demonstrates how to declare the templateName parameter:

Change the detail page for a related image

If you set a list template that displays the image details in a separate page, perform one of the following procedures:

Show the details of the image in an auto-generated page

To achieve this, you must drop another Image gallery widget on the page that will render the image details. This is required because the existing Image gallery widget is not part of the Sitefinity CMS MVC lifecycle and it is not aware that it has to render its Details action also.
For more information, see Feather: Image gallery widget.

After you have dropped the second Image gallery on the page, click its Edit button and under Which images to display? you must filter the images in a such a way that no images are displayed. This guarantees that the second Image gallery will display only an image's details when an image is selected from the first Image gallery.

Show the details of the image in an existing page

To configure the Image gallery to use an existing page, modify the Html.Action in the following way:

Make sure you have set the following parameters:

• detailPageId
  Set this to the ID of the page where you want to display the image details.
  

  NOTE: The page must have an Image gallery widget.

• openInSamePage
  Set this to false

Modify the list settings of the Image gallery

The Image gallery has a designer that you use to modify the widget's model. You can achieve the same effect by passing a view model with the required settings to the RelatedData action method of the ImageGalleryController. These are the same setting described Feather: Image gallery widget » Model settings.

Use the following code sample:

The settingsViewModel parameter is used for passing the view model.

The following view model classes are available in Feather:

ContentListSettingsViewModel

This is the base view model class for passing settings to the controller. It contains the following properties:

• DisplayMode
  Its value determines how the list is displayed and can be one of the following:

  • Telerik.Sitefinity.Frontend.Mvc.Models.ListDisplayMode.Paging
    This is the default option.
  • Telerik.Sitefinity.Frontend.Mvc.Models.ListDisplayMode.Limit
  • Telerik.Sitefinity.Frontend.Mvc.Models.ListDisplayMode.All
• EnableSocialSharing
  To enable users to share your content in Facebook, Google+, Twitter, etc., set the value of this property to true. By default, the value is false.

  NOTE: The way your content is shared also depends on the settings that you applied in Administration: Social sharing settings.

• FilterExpression
  Use this property to filters images based on an additional filter expression.

• ItemsPerPage
  This parameter defines the number of images per page when paging is enabled. The default value is 20.

• ListCssClass
  Use this property to sets additional CSS classes to the list view.

• SelectionMode
  This property gets the option that you have chosen for images under Narrow selection by... in the Content tab. The possible values are:

  • Telerik.Sitefinity.Frontend.Mvc.Models.SelectionMode.AllItems
    This is the default option.
  • Telerik.Sitefinity.Frontend.Mvc.Models.SelectionMode.FilteredItems

• SerializedAdditionalFilters
  In case images are filtered based on a date, tags, or categories, the IDs of the selected filter criteria are serialized and populated in this field.

• SortExpression
  This property adds additional sorting expression for the images.

ImageGallerySettingsViewModel

You can use this class, which inherits from ContentListSettingsViewModel, to add property SerializedThumbnailSizeModel. This property contains serialized settings for the size of the thumbnails. Th specified size is used on the frontend of the Image Gallery widget in list mode. The value of this property must be a JSON serialized object of type Telerik.Sitefinity.Frontend.Media.Mvc.Models.Image.ImageSizeModel.

NOTE: You must add the namespace of the class in the detail template of the dynamic widget by adding @using Telerik.Sitefinity.Frontend.Media.Mvc.Models.ImageGallery;