Remove width and height attributes of images

Scope

The following widgets automatically generate an img HTML tag with height and width attributes.

  • The MVC widgets Image widget when used with the Image dimensions template
  • The MVC Image gallery widget
  • The .NET Core Image widget

If you have complex page designs, you may want to remove these attributes to avoid altering them in unexpected ways.

You can do this for the MVC Image and Image gallery widgets. You cannot remove the automatic generation of width and height for the .NET Core Image widget. To do this, you need to modify the widget’s views. Perform the following:

For the MVC Image widget

  1. Open your Sitefinity CMS solution in Visual Studio.
  2. Navigate to the Image widget views.
    By default, it is named ImageDimensions.cshtml and stored in ~/ResourcePackages/Bootstrap4/MVC/Views/Image.
  3. Open the .cshtml file containing the view that you want to modify
  4. Delete the following code lines:
    @Html.GetWidthAttributeForImage(Model)
    @Html.GetHeightAttributeForImage(Model)
  5. Make sure that the .cshtml file is valid.

For the Image Gallery widget

The width and height attributes are in all templates of the Image Gallery widget. To remove them, delete the helper methods from your template.
To do this, perform the following:

  1. Open your Sitefinity CMS solution in Visual Studio.
  2. Navigate to the Image Gallery widget views.
    By default, it is stored in ~/ResourcePackages/Bootstrap4/MVC/Views/ImageGallery.
  3. Open the .cshtml file containing the template that you want to modify.
  4. Delete the code lines containing code similar to the following. The actual model names differ in the different .cshtml files:
    @Html.GetWidthAttributeForImage(ViewModel.Width)
    @Html.GetHeightAttributeForImage(ViewModel.Height)
  5. Make sure that the .cshtml file is valid.

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?