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.

Increase your Sitefinity skills by signing up for our free trainings. Get Sitefinity-certified at Progress Education Community to boost your credentials.

Web Security for Sitefinity Administrators

The free standalone Web Security lesson teaches administrators how to protect your websites and Sitefinity instance from external threats. Learn to configure HTTPS, SSL, allow lists for trusted sites, and cookie security, among others.

Foundations of Sitefinity ASP.NET Core Development

The free on-demand video course teaches developers how to use Sitefinity .NET Core and leverage its decoupled architecture and new way of coding against the platform.

Was this article helpful?