More in this section

Forums / General Discussions / CustomWidget Layout with Images

CustomWidget Layout with Images

5 posts, 1 answered
  1. Nilesh Thakkar
    Nilesh Thakkar avatar
    19 posts
    28 Sep 2012
    05 Oct 2012
    Link to this post


    I'm evaluating sitefinity 5.1 and would love to know how can I create usercontrol (widget) that can have few images in it with static content. That I would like to place on the template I created.

    I registered the widget in toolbox using Sitefinity Thunder and I've set the path for all the images but images are not appearing while dragging and dropping the widget on my template.

    Below is my widget code, please guide me through this?

    <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="SidebarWidgetTest.ascx.cs"
        Inherits="SitefinityWebApp.WidgetTemplates.Views.SideBarWidget.SidebarWidgetTest" %>
    <img id="Img8" src="~/images/common/sidebar/purchasetickets.gif" alt="Purchase Tickets"
        width="250" height="24" runat="server" /><br />
    <%--<asp:Literal ID="minCalendarMenu" runat="server" />
    <asp:Label ID="miniCalendar" runat="server" Text="" CssClass="minicalendar"></asp:Label>
    <br />
    <a href="" title="Email This Page" onclick="javascript:emailfriend(); return false;">
        <img id="Img4" src="~/App_Data/Sitefinity/WebsiteTemplates/srctemplate/App_Themes/srctemplate/Images/email.gif" alt="Email This Page" width="121"
            height="15" vspace="3" border="0" runat="server" /></a><br />
    <a href="" id="aContactEmail" title="Email Box Office" runat="server">
        <img id="Img9" src="~/images/common/Emailus.gif" alt="Email Us" width="78" height="15"
            border="0" runat="server" /></a><br />
    <a href="javascript:window.print()" title="Print this Page">
        <img id="Img10" src="~/images/common/print.gif" alt="Print" width="62" height="19"
            border="0" runat="server" /></a><br />
    <a id="A12" href="" onmouseover="return addthis_open(this, '', '[URL]', '[TITLE]')"
        onmouseout="addthis_close()" onclick="return addthis_sendto()" title="Share this Page"
        <img id="Img11" src="~/images/common/share.gif" alt="Share" width="62" height="19"
            border="0" runat="server" /></a><br />
    <br />
    Box Office<br />
    Phone: (714) 708-5555<br />
    <br />
    655 Town Center Drive<br />
    Costa Mesa, CA 92626
    <asp:Literal ID="lTestData" runat="server"></asp:Literal>
    <div id="clearsidebar">

    Apart from that I've one custom calendar control in one of the existing website, how can I include it in SiteFinity? That control relies on .cs file in App_Code folder in existing website.

    Any help would be appreciated. 

  2. Steve
    Steve avatar
    3037 posts
    03 Dec 2008
    05 Oct 2012
    Link to this post
    App_Data is a protected folder, and you shouldn't need the relative tilde notation try just


    (App_Data as a folder gets rewritten out of the url)
  3. Nilesh Thakkar
    Nilesh Thakkar avatar
    19 posts
    28 Sep 2012
    06 Oct 2012
    Link to this post

    Yes, I do understand that App_Data folder is protected, then why in documentation they show that images should be in theme folder and theme folder should be in App_Data folder.

    And I already tried all the paths you mentioned but it is not working.

    Virtual Directory : SiteFinityTest

    I've also created Images folder in root but it is still not able to find out the images. I'm trying this in development environment.

    Is it that I've to upload all the images first and then I can reference those images otherwise not. Because I uploaded few images in sitefinity and when I check the path generated for them, it shows


    When I check it in solution explorer, I can not find above structure. So it seems sitefinity can only reference files uploaded. Please shed some light on this.

  4. Patrick Dunn
    Patrick Dunn avatar
    237 posts
    03 Nov 2014
    07 Oct 2012
    Link to this post
    Hi Nilesh,

     Thank you for contacting us. Steve is right that the App_Data gets rewritten out of the URL. However, you can still use the tilde notation to reach your images if the directory is not relative to your template location. In this case the root would be the Sitefinity folder. You also need to append the runat="server" tag to your image. You could reach your images by using the following:

    <img src="~/Sitefinity/WebsiteTemplates/ThemeName/App_Themes/Standard/Images/MyImage.png" runat="server" class="myClass" />

    Let me know if you have any further problems with this!

    All the best,
    Patrick Dunn
    the Telerik team
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  5. Nilesh Thakkar
    Nilesh Thakkar avatar
    19 posts
    28 Sep 2012
    08 Oct 2012
    Link to this post
    Thanks Patrick, the path you provided works for me.
5 posts, 1 answered