More in this section

Forums / Developing with Sitefinity / HTML page as a custom widget

HTML page as a custom widget

3 posts, 0 answered
  1. Nivy
    Nivy avatar
    14 posts
    03 Dec 2014
    16 Jan 2015
    Link to this post


    I want to implement a working HTML page(with js and css) as a custom widget in Sitefinity. Can you suggest a way to do so?

    I had created a user control and implemented the HTML code but the images do not display in the front end .I had mentioned a physical location i.e ../images/planner.png for the src in <img> .Don't know if this is the correct approach. The HTML code I used in the user control is shown below:-

    <ul id="flexiselDemo3">
        <li><a href="#"><img src="images/1.png" /></a></li>
        <li><a href="#"><img src="images/2.png" /></a></li>
        <li><a href="#"><img src="images/3.png" /></a></li>
        <li><a href="#"><img src="images/4.png" /></a></li> 
        <li><a href="#"><img src="images/5.png" /></a></li> 
        <li><a href="#"><img src="images/6.png" /></a></li> 
        <li><a href="#"><img src="images/7.png" /></a></li> 
        <li><a href="#"><img src="images/8.png" /></a></li> 
        <li><a href="#"><img src="images/9.png" /></a></li> 
        <li><a href="#"><img src="images/10.png" /></a></li> 
    </ul>    <div class="clearout"></div><div id="box_left">
    <a href="#"><img src="images/planner.jpg"> <span><strong>Training 2014 Planner</strong><br>Bahrain</span></a>
    </div><div id="box_left">
    <a href="#"><img src="images/EANDT.jpg"><span><strong>Employment and Training Programme</strong></span></a>
    </div><div id="box_left">
    <a href="#"><img src="images/planner_1.jpg"><span><strong>New Training 2014 Planner</strong><br>for business professionals</span></a>
    </div><script type="text/javascript">
    $(window).load(function() {
            visibleItems: 6,
            animationSpeed: 1000,
            autoPlay: true,
            autoPlaySpeed: 3000,           
            pauseOnHover: true,
            enableResponsiveBreakpoints: true,
            responsiveBreakpoints: {
                portrait: {
                    visibleItems: 1
                landscape: {
                    visibleItems: 2
                tablet: {
                    visibleItems: 3

    Please advice




  2. Steve
    Steve avatar
    3037 posts
    03 Dec 2008
    16 Jan 2015
    Link to this post

    Image src needs to be relative to the site /images/file.jpg tells fhe browser to get it from regardless of where the widget lives.

    Whereas your method would tell the browser ro load the images folder from an images child folder of wherever you are in the sitemap.  So if you were on page then it'd try to load it from

     ...not sure about the widget as an html page thing though, thats another story

  3. Sabrie Nedzhip
    Sabrie Nedzhip avatar
    534 posts
    17 Aug 2017
    20 Jan 2015
    Link to this post
    Hello Nivy,

    Can you please try to rename the physical folder where you store the images to be different from images - for example fsimages and test the behavior again.

    You may also refer to the following forum thread where the same has been discussed.

    Sabrie Nedzhip
    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 Sitefinity CMS Ideas&Feedback Portal and vote to affect the priority of the items
3 posts, 0 answered