Custom widget for responsive images: Add the markup of the ResponsiveImage widget

In Visual Studio, perform the following:

  1. From the context menu of Sitefinity CMS solution, click Add » New project ... 
  2. From Visual C# select Class Lubrary.
  3. Name it ResponsiveImages and click OK.
  4. Create new folder in your project, name it Scripts, and put the picturefill.js in it.
  5. Right-click on the js file and set the Build Action property to Embedded Resource.
  6. Expand the Properties folder of the ResponsiveImages class library and click to edit the AssemblyInfo.cs.
  7. Add the following line:
    [assembly: WebResource("ResponsiveImages.Scripts.picturefill.js", "application/x-javascript")]
  8. Open the context menu of the ResponsiveImages class and navigate to Add » New Item…
  9. Under C#, choose Code and then select Code File.
  10. Name the file ResponsiveImage.ascx
  11. From the context menu of file ResponsiveImage.ascx, clickProperties.
  12. In the Properties pane, set the BuildAction property of the file to Embedded Resource.
  13. Implement the markup.

GITHUB EXAMPLE: For more information about the content of the file, see the ResponsiveImage.ascx file of the downloaded sample project.

Was this article helpful?