CustomWidget Layout with Images
Hello,
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="mailto:theatre@scr.org" 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="http://www.addthis.com/bookmark.php" onmouseover="return addthis_open(this, '', '[URL]', '[TITLE]')" onmouseout="addthis_close()" onclick="return addthis_sendto()" title="Share this Page" runat="server"> <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"> </div>
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.
App_Data is a protected folder, and you shouldn't need the relative tilde notation try just
/Sitefinity/WebsiteTemplates/srctemplate/App_Themes/srctemplate/Images/email.gif
/images/common/print.gif
/images/common/share.gif
(App_Data as a folder gets rewritten out of the url)
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
/sitefinitytest/images/default-album/share.gif
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.
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" />Thanks Patrick, the path you provided works for me.