0

I'm rendering the image like :

@Html.Sitecore().Field(Model.ImageId, Model.InnerItem)

which is rendering the image like this:

<img src="/-/media/finance.png?h=400&amp;iar=0&amp;w=592&amp;hash=3A3B586AFFE041EA4614989C119A8387" alt="finance" width="592" height="400">

I would like to remove all the query string params and also the width, height attributes.

The following approach has no effect. The else condtion does gets hit though.

public class RemoveImageHeightWidthAttributes
    {
        public void Process(RenderFieldArgs args)
        {
            if (args.FieldTypeKey != "image")
            {
                return;
            }
            else
            {
                string imageTag = args.Result.FirstPart;
                imageTag = Regex.Replace(imageTag, @"(<img[^>]*?)\s+height\s*=\s*\S+", "", RegexOptions.IgnoreCase);
                imageTag = Regex.Replace(imageTag, @"(<img[^>]*?)\s+h\s*=\s*\S+", "", RegexOptions.IgnoreCase);
                imageTag = Regex.Replace(imageTag, @"(<img[^>]*?)\s+width\s*=\s*\S+", "", RegexOptions.IgnoreCase);
                imageTag = Regex.Replace(imageTag, @"(<img[^>]*?)\s+w\s*=\s*\S+", "", RegexOptions.IgnoreCase);
                imageTag = Regex.Replace(imageTag, @"(<img[^>]*?)\s+iar\s*=\s*\S+", "", RegexOptions.IgnoreCase);
                imageTag = Regex.Replace(imageTag, @"(<img[^>]*?)\s+hash\s*=\s*\S+", "", RegexOptions.IgnoreCase);                    
                args.Result.FirstPart = imageTag;
            }
        }
    }

using Sitecore 10.1

3
  • Would seem like removing the height and width would go against best practices. Those would allow the browser to maintain the proper dimensions before the image downloads. Jul 14 at 16:41
  • I don't think you can/should remove the hash -- it's there for security reasons. Can you share why you want to remove all the query strings? Perhaps there is a better solution. Jul 14 at 16:55
  • @SashaKachanov Ok then can keep the hash. The image doesn't look good with the params & the attributes. If I replace it with the url of image in server, it looks good.
    – Qwerty
    Jul 14 at 17:33
1

You can edit your query string by these ways

-The hash in the query string comes from Sitecore and can be triggered with the setting "Media.RequestProtection.Enabled" (originally set in Sitecore.Media.RequestProtection.config),it isn't recommended to remove the hash

-The width and height in the query string can also be modified in the same config file if you have custom image scaling.

-If you don't have the custom scaling and you want to remove it then you can done it with some properties here, or by adding patch config files [refer here]

0

The issue seems with the RegEx. Here is the complete solution that worked for me.

1. Create a patch config

enter image description here

2. And the class:

    namespace MyProject.Foundation.Common.Pipelines
    {
    using HtmlAgilityPack;
    using Sitecore.Pipelines.RenderField;
    using System;
    using System.Reflection;
    using System.Text.RegularExpressions;

    public class RemoveImageAttributes
    {
        public void Process(RenderFieldArgs args)
        {
            try
            {
                if (args.FieldTypeKey != "image")
                {
                    return;
                }
                else
                {
                    string imageTag = args.Result.FirstPart;

                    if (!string.IsNullOrEmpty(imageTag) && (imageTag.ToLower().Contains("width=") || imageTag.ToLower().Contains("height=")))
                    {
                        /// Approach 1:
                        HtmlDocument document = new HtmlDocument();
                        document.LoadHtml(imageTag);
                        HtmlNode image = document.DocumentNode.SelectNodes("//img")[0];

                        if (image != null)
                        {
                            if (image.Attributes["width"] != null)
                            {
                                image.Attributes["width"].Remove();
                            }
                            if (image.Attributes["height"] != null)
                            {
                                image.Attributes["height"].Remove();
                            }

                            args.Result.FirstPart = image.OuterHtml;
                        }
                        
                        /// Approach 2: to remove attributes using Regex
                        //imageTag = Regex.Replace(imageTag, @"(<img[^>]*?)\s+width\s*=\s*\S+", "$1", RegexOptions.IgnoreCase);
                        //imageTag = Regex.Replace(imageTag, @"(<img[^>]*?)\s+height\s*=\s*\S+", "$1", RegexOptions.IgnoreCase);
                        //args.Result.FirstPart = imageTag;
                    }
                }
            }
            catch (Exception ex)
            {
                //log error
            }
        }
    }
    }
0
@{

string imgURL = "";
string altText = "";
Item item = Model.InnerItem;

if (item != null)
{
    ImageField imgField = ((ImageField)item.Fields["ImageFieldName"]); //Add your image field name here.

    if (imgField != null && imgField.MediaItem != null)
    {
        imgURL = Sitecore.Resources.Media.MediaManager.GetMediaUrl(imgField.MediaItem);

        altText = imgField.Alt;
    }
}}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.