# Images

The Timeline can render an `<img />` tag for the first item from the `Images` collection in its data source. Its `src` attribute will be set to the value of the `src` field of the image literal.

The example below shows how you can add an image for the events.

> tip If you want to show more than one image, you need to customize the [template of the Timeline](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/navigation/timeline/templates).

```Razor HtmlHelper
    @(Html.Kendo().Timeline<Kendo.Mvc.Examples.Models.TimelineEventModel>()
               .Name("Timeline")
               .DataDateField("EventDate")
               .DataDescriptionField("Description")
               .DataSubTitleField("Subtitle")
               .DataTitleField("Title")
               .DataImagesField("Images")
               .Orientation("vertical")
               .DataSource(dt => dt.Read("GetTimelineData", "Timeline"))
    )
```

```Razor TagHelper
    <kendo-timeline name="Timeline" 
                    orientation="vertical"
                    datadatefield="EventDate"
                    datatitlefield="Title"
                    datasubtitlefield="Subtitle" 
                    datadescriptionfield="Description" 
                    dataactionsfield="Actions"
                    dataimagesfield="Images">
        <datasource>
            <transport>
                <read url="@Url.Action("GetTimelineData","Timeline")" />
            </transport>
            <schema>
                <model>
                    <fields>
                        <field name="EventDate" type="date"></field>
                        <field name="Title" type="string"></field>
                        <field name="Subtitle" type="string"></field>
                        <field name="Description" type="string"></field>
                    </fields>
                </model>
            </schema>
        </datasource>
    </kendo-timeline>
```

```C# Controller
public partial class Timeline : BaseController
{
    public JsonResult GetTimelineData()
    {
        List<TimelineEventModel> events = new List<TimelineEventModel>();

        events.Add(new TimelineEventModel() {
            Title = "Summer trip in Europe",
            Subtitle = "May 15, 2015",
            Description = "Lorem ipsum dolor sit amet",
            EventDate = new System.DateTime(2015, 5, 25),
            Images = new List<TimelineEventImageModel>() {
                new TimelineEventImageModel() { src = "https://demos.telerik.com/aspnet-mvc/tripxpert/Images/Gallery/Barcelona-and-Tenerife/Arc-de-Triomf,-Barcelona,-Spain_Liliya-Karakoleva.JPG?width=500&amp;height=500" }
            }
        });

        events.Add(new TimelineEventModel()
        {
            Title = "United States East Coast Tour",
            Subtitle = "Feb 27, 2018",
            Description = "The second event description.",
            EventDate = new System.DateTime(2018, 2, 27),
            Images = new List<TimelineEventImageModel>() {
                new TimelineEventImageModel() { src = "https://demos.telerik.com/aspnet-mvc/tripxpert/Images/Gallery/United-States/Boston-Old-South-Church_Ivo-Igov.JPG?width=500&amp;height=500" }
            }
        });

        
        return Json(events);
    }
}
```

```C# Model
public class TimelineEventModel
{
    public string Title { get; set; }
    public string Subtitle { get; set; }
    public string Description { get; set; }

    public DateTime EventDate { get; set; }

    public List<TimelineEventImageModel> Images { get; set; }
}

public class TimelineEventImageModel
{
    public string src { get; set; } // this field name must be "src"
}
```

## See Also

* [Templates in the Timeline](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/navigation/timeline/templates)
* [Basic Usage of the Timeline (Demo)](https://demos.telerik.com/aspnet-core/timeline/index)