Skip to main content

Animated GIF files become not animated after resizing in Sitecore

Maintaining websites in Sitecore helps you discover interesting issues. In this blog, we discuss one such issue :)

The Problem

We all know that Sitecore has the ability to resize images based on the query parameters that are supplied in a media item's URL. You must have already figured out that animated GIF files become not animated after resizing in Sitecore (it is in this blog's title itself). 

Wondering why it happens? According to Sitecore in KB1001735  - 

There is no built-in .NET functionality to resize a GIF file and keep its properties (for example, the delay between frames). In this case, only the first frame of the file is displayed. As a result, the animated GIF file might become not animated after resizing it using Sitecore.  

What this means is if you have a GIF like this - 


and if you want to resize it in Sitecore, it will appear like this - 


Sitecore has suggested a fix for it in the KB article which skips resizing of GIF files to prevent GIF files from becoming non-animated. If this solution suits you, you may go for it. But in our case, we did not want to loose the performance benefits which come with resized GIFs. So, we decided to find a way to resize the GIF files.

The Solution

I started understanding the processor mentioned in KB article which is - Sitecore.Resources.Media.ResizeProcessor, Sitecore.Kernel

While analyzing it, I was able to find that the below line is responsible for the transformation or resizing - 
Stream stream = this.MediaManager.Effects.TransformImageStream(mediaStream.Stream, transformationOptions, imageFormat);

This TransformImageStream() method goes to Sitecore.Resources.Media.ImageEffects which further calls Sitecore.Resources.Media.ResizeImageStream() method as in below line - 
return new ImageEffectsResize().ResizeImageStream(inputStream, options, outputFormat);

This ResizeImageStream() contains the code responsible for running the logics before resizing the image. This looked like a useful method to me which can be copied over into my processor. This method contains below line which actually resizes the image - 
Bitmap bitmap2 = resizer.Resize(bitmap1, resizeOptions, outputFormat)

This is where we want to add our logic to resize the GIF files.

If you are wondering, this is how resizer resizes a GIF - 
private Bitmap ResizeGif(Bitmap image, Size size, bool preserveResolution)
    {
      return image.Size == size ? image : new ThumbMaker(image).ResizeToGif(size, preserveResolution);
    }

Now, we needed a way to resize a GIF images. Little browsing suggested that it is possible to resize GIF images using a third party library like Magick.Net. It can be installed as a NuGet in the project.

I started testing the Magick.Net NuGet for GIF resizing in Sitecore and after a few exceptions, I was able to resize a GIF image successfully in Sitecore. Here is the code from the proof of concept -

Disclaimer - This is just a proof of concept work and it should be properly refined before deploying to production

Custom Processor code -
using Sitecore.Abstractions;
using Sitecore.Diagnostics;
using scResources = global::Sitecore.Resources.Media;
using Sitecore.Resources.Media;
using Sitecore.ImageLib;
using Sitecore.IO;
using Sitecore.Configuration;
using ImageMagick;
using System;
using System.IO;
using System.Drawing.Imaging;
using System.Drawing;

namespace <Your Namespace>
{
    public class GifResizeProcessor : scResources.ResizeProcessor
    {
        public GifResizeProcessor(BaseMediaManager mediaManager, BaseLog log) : base(mediaManager, log)
        {
        }

        public new void Process(GetMediaStreamPipelineArgs args)
        {
            Assert.ArgumentNotNull(args, "args");
            if (!string.Equals(args.MediaData.MimeType, "image/gif", StringComparison.OrdinalIgnoreCase))
            {
                base.Process(args);
            }
            else
            {
                MediaStream outputStream = args.OutputStream;
                string extension = args.MediaData.Extension;
                MediaStream mediaStream = outputStream;
                TransformationOptions transformationOptions = args.Options.GetTransformationOptions();
                ImageFormat imageFormat = this.MediaManager.Config.GetImageFormat(extension, (ImageFormat)null);
                Stream stream = ResizeImageStream(mediaStream.Stream, transformationOptions, imageFormat);
                args.OutputStream = new MediaStream(stream, extension, mediaStream.MediaItem);
            }
        }

        public Stream ResizeImageStream(
      Stream inputStream,
      TransformationOptions options,
      ImageFormat outputFormat)
        {
            Assert.ArgumentNotNull((object)inputStream, nameof(inputStream));
            Assert.ArgumentNotNull((object)options, nameof(options));
            Assert.ArgumentNotNull((object)outputFormat, nameof(outputFormat));
            ResizeOptions resizeOptions = GetResizeOptions(options);

            if (resizeOptions.IsEmpty)
                return inputStream;

            if (inputStream.Length > Settings.Media.MaxSizeInMemory)
            {
                Tracer.Error((object)"Could not resize image stream as it was larger than the maximum size allowed for memory processing.");
                return (Stream)null;
            }

            Resizer resizer = new Resizer();
            MemoryStream memoryStream = new MemoryStream();
            FileUtil.CopyStream(inputStream, (Stream)memoryStream, 8192);
            inputStream.Close();
            memoryStream.Seek(0L, SeekOrigin.Begin);

            // Save the result            
            using (Bitmap bitmap1 = new Bitmap((Stream)memoryStream))
            {
                bool proportionsAreSaved;
                Size frameSize = resizer.GetFrameSize(bitmap1, resizeOptions, out proportionsAreSaved);
                Size imageSize = GetImageSize(bitmap1, frameSize, resizeOptions, proportionsAreSaved);
                if (bitmap1.Size.Equals((object)frameSize))
                {
                    memoryStream.Seek(0L, SeekOrigin.Begin);
                    return (Stream)memoryStream;
                }

                memoryStream.Seek(0L, SeekOrigin.Begin);
                //here resize using magick
                var readSettings = new MagickReadSettings() { Format = MagickFormat.Gif };
                //var image = new magickimage(svgstream, readsettings);
                using (var collection = new MagickImageCollection(memoryStream, readSettings))
                {
                    collection.Coalesce();

                    // Resize each image in the collection to the width
                    foreach (var image in collection)
                    {
                        image.Resize(imageSize.Width, imageSize.Height);
                    }
                    MemoryStream resizedMemoryStream = new MemoryStream();
                    collection.Write(resizedMemoryStream);
                    resizedMemoryStream.Seek(0L, SeekOrigin.Begin);
                    memoryStream.Close();
                    return (Stream)resizedMemoryStream;
                }
            }
        }
///////////////ALL METHODS BELOW THIS POINT HAVE BEEN JUST COPIED OVER FROM SITECORE DLLS TO MAKE THIS CODE WORK. NO CUSTOMIZATION DONE IN THERE/////////////////////
        private static ResizeOptions GetResizeOptions(TransformationOptions options)
        {
            return new ResizeOptions()
            {
                AllowStretch = options.AllowStretch,
                BackgroundColor = options.BackgroundColor,
                IgnoreAspectRatio = options.IgnoreAspectRatio,
                MaxSize = options.MaxSize,
                Scale = options.Scale,
                Size = options.Size,
                PreserveResolution = options.PreserveResolution,
                CompositingMode = options.CompositingMode,
                InterpolationMode = options.InterpolationMode,
                PixelOffsetMode = options.PixelOffsetMode
            };
        }

        private Size GetImageSize(
      Bitmap image,
      Size frameSize,
      ResizeOptions options,
      bool proportionsAreSaved)
        {
            if (proportionsAreSaved || options.IgnoreAspectRatio)
                return frameSize;
            float val1 = (float)frameSize.Width / (float)image.Width;
            float val2 = (float)frameSize.Height / (float)image.Height;
            float amount = Math.Min(val1, val2);
            if (!options.AllowStretch && (double)amount > 1.0)
                return new Size(image.Width, image.Height);
            bool flag = (double)val2 < (double)val1;
            return new Size(!flag ? frameSize.Width : Scale(image.Width, amount, frameSize.Width), flag ? frameSize.Height : this.Scale(image.Height, amount, frameSize.Height));
        }

        private int Scale(int value, float amount, int maxValue)
        {
            int num = this.Scale(value, amount);
            if (maxValue - num == 1)
                num = maxValue;
            return num;
        }

        private int Scale(int value, float amount)
        {
            return (int)Math.Round((double)value * (double)amount);
        }
    }
}
 
And here is the config to make this processor work - 
<configuration xmlns:patch="http://www.sitecore.net/xmlconfig/" xmlns:environment="http://www.sitecore.net/xmlconfig/environment/">
  <sitecore>    
    <pipelines>      
  <getMediaStream>
        <processor patch:instead="*[@type='Sitecore.Resources.Media.ResizeProcessor, Sitecore.Kernel']" type="<Your Namespace>.GifResizeProcessor, <Your DLL Name>" resolve="true"/>
      </getMediaStream>
    </pipelines>
  </sitecore>
</configuration>

Once you have the above code in place, if you resize the GIF, you will see the resized GIF with animation.




Thanks for reading this. Hope it helps you!!
Labels:

Comments

Post a Comment

POPULAR POSTS

Sitecore PowerShell Script to create all language versions for an item from en version

  We have lots of media items and our business wants to copy the data from en version of media item to all other language versions defined in System/Languages. This ensures that media is available in all the languages. So, we created the below powershell script to achieve the same -  #Get all language versions defined in System/Languages $languages = Get-ChildItem /sitecore/System/Languages -recurse | Select $_.name | Where-Object {$_.name -ne "en"} | Select Name #Ensuring correct items are updated by comparing the template ID  $items = Get-ChildItem -Path "/sitecore/media library/MyProjects" -Recurse | Where-Object {'<media item template id>' -contains $_.TemplateID} #Bulk update context to improve performance New-UsingBlock (New-Object Sitecore.Data.BulkUpdateContext) { foreach($item in $items){    foreach($language in $languages){ $languageVersion = Get-Item -Path $item.Paths.Path -Language $language.Name #Check if language versi...
Post a Comment
Read more

Export Sitecore media library files to zip using SPE

If you ever require to export Sitecore media files to zip (may be to optimize them), SPE (Sitecore Powershell Extension) has probably the easiest way to do this for you. It's as easy as the below 3 steps -  1. Right click on your folder (icons folder in snap)>Click on Scripts> Click on Download 2. SPE will start zipping all the media files placed within this folder. 3. Once zipping is done, you will see the Download option in the next screen. Click Download Zip containing the media files within is available on your local machine. You can play around with the images now. Hope this helps!! Like and Share ;)
Post a Comment
Read more

Make Sitecore instance faster using Roslyn Compiler

When we install the Sitecore instance on local, the first load is slow. After each code deploy also, it takes a while for the Sitecore instance to load and experience editor to come up. For us, the load time for Sitecore instance on local machines was around 4 minutes. We started looking for ways to minimize it and found that if we update our Web.config to use Roslyn compiler and include the relevant Nugets into the project, our load times will improve. We followed the simple steps - Go to the Project you wish to add the NuGet package and right click the project and click 'Manage NuGet Packages'. Make sure your 'Package Source' is set to nuget.org and go to the 'Browse' Tab and search Microsoft.CodeDom.Providers.DotNetCompilerPlatform. Install whichever version you desire, make sure you note which version you installed. You can learn more about it  here . After installation, deploy your project, make sure the Microsoft.CodeDom.Providers.DotNetCompilerPlatform.d...
1 comment
Read more

Experience of a first time Sitecore MVP

The Journey I have been working in Sitecore for almost 10 years now. When I was a beginner in Sitecore, I was highly impressed by the incredible community support. In fact, my initial Sitecore learning path was entirely based on community written blogs on Sitecore. During a discussion with my then technology lead Neeraj Gulia , he proposed the idea that I should start giving back to developer community whenever I get chance. Just like I have been helped by many developers via online blogs, stackoverflow etc., I should also try to help others. Fast forward a few years and I met  Nehemiah Jeyakumar  (now an MVP). He had a big archive of his technical notes in the form Sitecore blogs. I realized my first blog dont have to be perfect and it can be as simple as notes to a specific problem for reference in future. That's when I probably created my first blog post on Sitecore. At that time, I didn't knew about the Sitecore MVP program. Over the years, I gained more confidence to writ...
2 comments
Read more

Clean Coding Principles in CSharp

A code shall be easy to read and understand. In this post, I am outlining basic principles  about clean coding after researching through expert recommended books, trainings and based on my experience. A common example to start with is a variable declaration like - int i  The above statement did not clarify the purpose of variable i. However,  the same variable can be declared as -  int pageNumber The moment we declared the variable as int pageNumber, our brain realized that the variable is going to store the value for number of pages. We have set the context in our brain now and it is ready to understand what the code is going to do next with these page numbers. This is one of the basic advantages of clean coding. Reasons for clean coding -  • Reading clean code is easier - Every code is revisited after certain amount of time either by the same or different developer who created it. In both the cases, if the code is unclean, its difficult to understand and u...
Post a Comment
Read more