Use MVC Image gallery widget to display the related images of a dynamic item

In this article we will demonstrate how to generate a detail template for the MVC Dynamic content widget that renders a MVC Image gallery widget inside itself. The gallery widget will display the related images of the dynamic item that is shown in the details view.

##Create a related images field##

1. Go to Sitefinity's administration panel -> Administration-> Module builder and create a dynamic type. For more information how to use the Module builder, see Dynamic modules and the Module Builder
2. Open you type for edit, click the Add a field... button.
3. In the Add a field dialog enter a name for your field, set it to be of type Related media and select Images in the field What kind of media this field will manage?.
   For more information how to work with related data, see Content relations: Related data
4. Click Continue
5. In the field Display selected items on the frontend using... select Custom from the dropdown.
6. In the Type or Virtual path of the custom widget textbox enter the full type name of the Image gallery controller:

Telerik.Sitefinity.Frontend.Media.Mvc.Controllers.ImageGalleryController, Telerik.Sitefinity.Frontend.Media ``` 7. Click Done. 8. Click Finish and in the displayed dialog check the option Update widget templates as well.

Now when you open the details of an item with related images in the Dynamic content widget, you will see its images rendered by 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 the place where its settings could be modified.
To edit the details view go to Sitefinity's administration panel -> Design -> Widget templates and open the Detail.[Name of your type].
The following code shows how the Image gallery widget is rendered:

@*Start MyRelatedImages field*@
@Html.Action("RelatedData",
    "ImageGallery",
    new {relatedItem = Model.Item.DataItem,
        relatedDataViewModel = new RelatedDataViewModel()
        {
            RelatedItemType = "Telerik.Sitefinity.DynamicTypes.Model.MyModule.MyType",
            RelatedFieldName= "MyRelatedImages",
            RelationTypeToDisplay = "Child"
        }})
@*End MyRelatedImages field*@

We are using the ASP.NET MVC's helper method Html.Action to render the RelatedData action of the ImageGalleryController. To modify the model of the Image gallery we have to pass the desired settings as a parameters to the Html.Action method.

###Chage 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.

Here is an example how to declare the parameter:

@*Start MyRelatedImages field*@
@Html.Action("RelatedData",
    "ImageGallery",
    new {relatedItem = Model.Item.DataItem,
        relatedDataViewModel = new RelatedDataViewModel()
        {
            RelatedItemType = "Telerik.Sitefinity.DynamicTypes.Model.MyModule.MyType",
            RelatedFieldName= "MyRelatedImages",
            RelationTypeToDisplay = "Child"
        },
        templateName="ImageGallery"})
@*End MyRelatedImages field*@

###Change the related image's details page### If you set a list template that requires redirection to another page to show the image's details, you will have to perform one of the following procedures.

####Show the image's details on auto-generated page#### To achieve this scenario you will have to drag and drop another Image gallery widget in the page using the Sitefinity's page editor. This is required because the Image gallery that is rendered in the details template is not part of the Sitefinity's MVC lifecycle and it is not aware that it have to render its Details action too.

For more information how to configure the Image gallery, see MVC Image gallery widget.

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

####Show the image's details on existing page#### To configure the Image gallery to use an existing page, modify the Html.Action call to be similar as the one below:

@*Start MyRelatedImages field*@
@Html.Action("RelatedData",
    "ImageGallery",
    new {relatedItem = Model.Item.DataItem,
    relatedDataViewModel = new RelatedDataViewModel()
    {
        RelatedItemType = "Telerik.Sitefinity.DynamicTypes.Model.MyModule.MyType",
        RelatedFieldName= "MyRelatedImages",
        RelationTypeToDisplay = "Child"
    },
    templateName = "ImageGallery",
    detailPageId = new Guid("c932d7ac-1b58-68c8-81c1-ff00009bcc4f"),
    openInSamePage = false})
@*End MyRelatedImages field*@

The important parameters here are:

• detailPageId - the Id of the page you want to display the image's details
• openInSamePage - should be false

NOTE: The details page should contains configured Image gallery widget.

###Modify the Image gallery's list settings### The traditional way of using the Image gallery in the page editor allows us to use the widget's designer to modify the widget's model. Here we can achieve the same effect by passing a view model with the settings to the ImageGalleryController's RelatedData action method. These are the same setting described in the section Model settings of the article MVC Image gallery widget.

The code bellow demonstrates how to achieve this scenario:

@*Start MyRelatedImages field*@
@Html.Action("RelatedData",
    "ImageGallery",
    new {relatedItem = Model.Item.DataItem,
    relatedDataViewModel = new RelatedDataViewModel()
    {
        RelatedItemType = "Telerik.Sitefinity.DynamicTypes.Model.MyModule.MyType",
        RelatedFieldName= "MyRelatedImages",
        RelationTypeToDisplay = "Child"
    },
    settingsViewModel = new ImageGallerySettingsViewModel()
    {
  	     EnableSocialSharing = true,
  	     ItemsPerPage = 10,
  	     ListCssClass = "sf-related-images",
  	     SerializedThumbnailSizeModel = @"{""thumbnail"":{""url"":null,""name"":""thumb80""},""displayMode"":""Thumbnail"",""customSize"":null}"
    }})
@*End MyRelatedImages field*@

The settingsViewModel parameter is used for passing the view model.
The 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
  The value that determines how the list will be displayed:

  • Paging
    This is the default option.
  • Limit
  • All

• EnableSocialSharing
  To enable users to share your content in Facebook, Google+, Twitter, and so on, 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 Basic settings.

• FilterExpression
  Filters images based on an additional filter expression.

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

• ListCssClass
  Gets and sets additional CSS classes to the list view.

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

  • AllItems
    This is the default option.
  • FilteredItems

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

• SortExpression
  Adds additional sorting expression for the images.

####ImageGallerySettingsViewModel#### Specifically for the Image gallery you can use this class that inherits from ContentListSettingsViewModel and adds the property:

• SerializedThumbnailSizeModel
  Contains serialized settings for size of the thumbnails. Specified size is used in the frontend of the Image Gallery widget when displayed in List mode. The value of this property should be a JSON serialized object of type Telerik.Sitefinity.Frontend.Media.Mvc.Models.Image.ImageSizeModel.

NOTE: You have to add the namespace of the class in the Dynamic widget's details template:

@using Telerik.Sitefinity.Frontend.Media.Mvc.Models.ImageGallery;