How to create template for a custom module?

I have a custom Module called "Homepage Slides", and it has a custom content-type "Homepage Slide" which has an image (MainImage), and a few other things. The design I have uses a custom jQuery plugin for the slideshow, so I need to output specific HTML markup. Heres what I need to output...

<div id="slideshow" class="homepageSlideshow">
        <div class="ls-slide">
            <img src="img/slide1.png" class="ls-bg">
        </div>
        <div class="ls-slide">
            <img src="img/slide2.png" class="ls-bg">
        </div>
</div>

However, I don't know how to output the URL of each HomepageSlides.HomepageSlide.MainImage.

I'm editing the Widget Template found in  Design->Widget Templates, "Homepage Slides - Homepage Slide: List of homepage slides". Here's whats in it now....

<%@ Control Language="C#" %>
<%@ Register TagPrefix="sf" Namespace="Telerik.Sitefinity.Web.UI.PublicControls.BrowseAndEdit" Assembly="Telerik.Sitefinity" %>
<%@ Register TagPrefix="sf" Namespace="Telerik.Sitefinity.Web.UI.ContentUI" Assembly="Telerik.Sitefinity" %>
<%@ Register TagPrefix="sf" Namespace="Telerik.Sitefinity.Web.UI.Comments" Assembly="Telerik.Sitefinity" %>
<%@ Register TagPrefix="sf" Namespace="Telerik.Sitefinity.Web.UI.Fields" Assembly="Telerik.Sitefinity" %>
<%@ Register TagPrefix="sf" Namespace="Telerik.Sitefinity.Web.UI" Assembly="Telerik.Sitefinity" %>
<%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Modules.Comments.Web.UI.Frontend" TagPrefix="sf" %>
<%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Modules.Libraries.Web.UI.Images" TagPrefix="sf" %>      
<%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Modules.Libraries.Web.UI" TagPrefix="sf" %>
<%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.DynamicTypes.Model" TagPrefix="sf" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ Import Namespace="Telerik.Sitefinity.Web.UI" %>
<%@ Import Namespace="Telerik.Sitefinity.Modules.Comments" %>
<sf:SitefinityLabel id="title" runat="server" WrapperTagName="div" HideIfNoText="true" HideIfNoTextMode="Server" CssClass="sfitemFieldLbl" />
<telerik:RadListView ID="dynamicContentListView" ItemPlaceholderID="ItemsContainer" runat="server" EnableEmbeddedSkins="false" EnableEmbeddedBaseStylesheet="false">
    <LayoutTemplate>
        <asp:PlaceHolder ID="ItemsContainer" runat="server" />
    </LayoutTemplate>
    <ItemTemplate>
        <div class="sfitem sflistitem sfClearfix"  data-sf-provider='<%# Eval("Provider.Name")%>' data-sf-id='<%# Eval("Id")%>' data-sf-type="Telerik.Sitefinity.DynamicModules.Model.DynamicContent">
           <sf:ImagesView ControlDefinitionName="ImagesFrontend" runat="server" Title="" UrlKeyPrefix="">
                <RelatedDataDefinition RelatedFieldName="MainImage" RelatedItemType="Telerik.Sitefinity.DynamicTypes.Model.HomepageSlides.HomepageSlide" RelationTypeToDisplay="Child" RelatedItemSource="DataItemContainer">
                </RelatedDataDefinition>
            </sf:ImagesView>
        </div>
    </ItemTemplate>
</telerik:RadListView>
<sf:Pager id="pager" runat="server"></sf:Pager>
<asp:PlaceHolder ID="socialOptionsContainer" runat="server"></asp:PlaceHolder>

How do I edit it to output the simple HTML markup I need?

Hello,

We have initiated the communication in a support ticket. Feel free to share your findings and approach with the community.
However, we would recommend to make any changes to the markup in the template itself but the server-side logic for querying or manipulating items to be in a code behind class. A server side controls added to the template can also be bound in the code behind

Regards,
Nikola Zagorchev
Telerik