HTML page as a custom widget

Posted by Community Admin on 04-Aug-2018 04:02

HTML page as a custom widget

All Replies

Posted by Community Admin on 16-Jan-2015 00:00

Hi

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:-

<body>
  
<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()
       $("#flexiselDemo3").flexisel(
        visibleItems: 6,
        animationSpeed: 1000,
        autoPlay: true,
        autoPlaySpeed: 3000,           
        pauseOnHover: true,
        enableResponsiveBreakpoints: true,
        responsiveBreakpoints:
            portrait:
                changePoint:480,
                visibleItems: 1
            ,
            landscape:
                changePoint:640,
                visibleItems: 2
            ,
            tablet:
                changePoint:768, 
                visibleItems: 3
           
       
    ););
</script>
   
   
</body> 

Please advice

 

Regards

Nivy

Posted by Community Admin on 16-Jan-2015 00:00

Image src needs to be relative to the site root...so /images/file.jpg tells fhe browser to get it from site.com/.../file.jpg 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 http://site.com/news then it'd try to load it from site.com/.../file.jpg.

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

Posted by Community Admin on 20-Jan-2015 00:00

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.

Regards,
Sabrie Nedzhip
Telerik

 
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
 

This thread is closed