Topics

All topics

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.
NEW TO SITEFINITY?

Want to learn more?

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

Get started with Integration Hub | Sitefinity Cloud | Sitefinity SaaS

This free lesson teaches administrators, marketers, and other business professionals how to use the Integration hub service to create automated workflows between Sitefinity and other business systems.

Web Security for Sitefinity Administrators

This free lesson teaches administrators the basics about protecting yor Sitefinity instance and its sites from external threats. 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?

Next article

Custom widget for responsive images: Implement the code-behind of the ReponsiveImage widget