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.

Want to learn more?

Sign up for our free beginner training. Boost your credentials through advanced courses and certification.
Register for Sitefinity training and certification.

Was this article helpful?