Custom widget for responsive images: Add the markup of the ResponsiveImage widget
In Visual Studio, perform the following:
- From the context menu of Sitefinity CMS solution, click Add » New project ...
- From Visual C# select Class Lubrary.
- Name it ResponsiveImages and click OK.
- Create new folder in your project, name it Scripts, and put the picturefill.js in it.
- Right-click on the js file and set the Build Action property to Embedded Resource.
- Expand the Properties folder of the ResponsiveImages class library and click to edit the AssemblyInfo.cs.
- Add the following line:
[assembly: WebResource("ResponsiveImages.Scripts.picturefill.js", "application/x-javascript")]
- Open the context menu of the ResponsiveImages class and navigate to Add » New Item…
- Under C#, choose Code and then select Code File.
- Name the file ResponsiveImage.ascx
- From the context menu of file
ResponsiveImage.ascx
, clickProperties.
- In the Properties pane, set the BuildAction property of the file to Embedded Resource.
- Implement the markup.
GITHUB EXAMPLE: For more information about the content of the file, see the ResponsiveImage.ascx file of the downloaded sample project.