Description

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.

Solution

• To resize a GIF file on the client side, use CSS styles for the <img> tags.
  
  
• To skip resizing GIF files on the server side, you can follow these customization steps:
  
  
  1. Create a custom processor similar to the following. Note that the following code sample is given only as a starting point:

     using Microsoft.Extensions.DependencyInjection;
     using Sitecore.Abstractions;
     using Sitecore.DependencyInjection;
     using Sitecore.Diagnostics;
     using Sitecore.Resources.Media;
     using System;
     
     public class GifSkippingResizeProcessor : Sitecore.Resources.Media.ResizeProcessor
     {
      public ResizeProcessor()
       : base(ServiceLocator.ServiceProvider.GetRequiredService<BaseMediaManager>(), ServiceLocator.ServiceProvider.GetRequiredService<BaseLog>())
      {
      }
     
      public new void Process(GetMediaStreamPipelineArgs args)
      {
       Assert.ArgumentNotNull(args, "args");
       if (!string.Equals(args.MediaData.MimeType, "image/gif", StringComparison.OrdinalIgnoreCase))
       {
        base.Process(args);
       }
      }
     }

  2. To use the custom processor instead of the default one, create a configuration patch file in the \App_Config\Include\zzz folder:

     <?xml version="1.0" encoding="utf-8" ?>
     <configuration xmlns:patch="http://www.sitecore.net/xmlconfig/">
       <sitecore>
         <pipelines>        
           <getMediaStream>
             <processor patch:instead="*[@type='Sitecore.Resources.Media.ResizeProcessor, Sitecore.Kernel']" type="Custom.Resources.Media.GifSkippingResizeProcessor, Custom.Assembly" resolve="true"/>
           </getMediaStream>
         </pipelines>
       </sitecore>
     </configuration>