Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • George Phillipson 108 posts 286 karma points
    Feb 10, 2022 @ 11:03
    George Phillipson
    0

    Umbraco 9.3.0 ImageSharp.web Webp

    Hi

    With Umbraco 9.3.0, ImageSharp has been updated, I'm trying to find the docs for how to change the image format. The only doc's I can find are https://docs.sixlabors.com/api/ImageSharp.Web/SixLabors.ImageSharp.Web.Processors.ResizeWebProcessor.html

    Does anyone know if ImageSharp can now support Webp so that I can convert jpg to webp depending on the user's browser?

    Thanks

    George

  • Greg Fyans 139 posts 341 karma points
    Feb 10, 2022 @ 15:45
    Greg Fyans
    0

    According to this thread, WebP support is close but not released yet (a development build is available from their MyGet):

    https://github.com/SixLabors/ImageSharp/issues/121

  • George Phillipson 108 posts 286 karma points
    Feb 10, 2022 @ 15:57
    George Phillipson
    0

    Hi Greg

    Thanks for the reply, ImageSharp V2.0 is now released and Umbraco updated ImageSharp.Web to V1.05

    I just can't get it to work, commands are here https://docs.sixlabors.com/articles/imagesharp.web/processingcommands.html#format with

    {PATH_TO_YOUR_IMAGE}?format=webp
    
    The error I get is below:
    System.MissingMethodException: Method not found: 'System.Threading.Tasks.Task`1<SixLabors.ImageSharp.Formats.IImageFormat> SixLabors.ImageSharp.Image.DetectFormatAsync(SixLabors.ImageSharp.Configuration, System.IO.Stream)'.
       at SixLabors.ImageSharp.Web.Middleware.ImageSharpMiddleware.ProcessRequestAsync(HttpContext context, IImageResolver sourceImageResolver, ImageContext imageContext, IDictionary`2 commands)
       at System.Runtime.CompilerServices.AsyncMethodBuilderCore.Start[TStateMachine](TStateMachine& stateMachine)
       at SixLabors.ImageSharp.Web.Middleware.ImageSharpMiddleware.ProcessRequestAsync(HttpContext context, IImageResolver sourceImageResolver, ImageContext imageContext, IDictionary`2 commands)
       at SixLabors.ImageSharp.Web.Middleware.ImageSharpMiddleware.Invoke(HttpContext context)
       at Microsoft.AspNetCore.Diagnostics.StatusCodePagesMiddleware.Invoke(HttpContext context)
       at StackExchange.Profiling.MiniProfilerMiddleware.Invoke(HttpContext context) in C:\projects\dotnet\src\MiniProfiler.AspNetCore\MiniProfilerMiddleware.cs:line 119
       at Umbraco.Cms.Web.Common.Middleware.UmbracoRequestMiddleware.InvokeAsync(HttpContext context, RequestDelegate next)
       at Microsoft.AspNetCore.Builder.UseMiddlewareExtensions.<>c__DisplayClass6_1.<<UseMiddlewareInterface>b__1>d.MoveNext()
    --- End of stack trace from previous location ---
       at Umbraco.Cms.Web.Common.Middleware.PreviewAuthenticationMiddleware.InvokeAsync(HttpContext context, RequestDelegate next)
       at Microsoft.AspNetCore.Builder.UseMiddlewareExtensions.<>c__DisplayClass6_1.<<UseMiddlewareInterface>b__1>d.MoveNext()
    --- End of stack trace from previous location ---
       at Umbraco.Cms.Web.Common.Middleware.UmbracoRequestLoggingMiddleware.InvokeAsync(HttpContext context, RequestDelegate next)
       at Microsoft.AspNetCore.Builder.UseMiddlewareExtensions.<>c__DisplayClass6_1.<<UseMiddlewareInterface>b__1>d.MoveNext()
    --- End of stack trace from previous location ---
       at Microsoft.AspNetCore.Diagnostics.DeveloperExceptionPageMiddleware.Invoke(HttpContext context)
    

    George

  • Mark Drake 120 posts 408 karma points c-trib
    Feb 10, 2022 @ 16:52
    Mark Drake
    0

    Umbraco.Cms.Web.Common v9.3.0 has a dependency for SixLabors.ImageSharp.Web v1.0.5, which has a dependency for SixLabors.ImageSharp v1.0.4.

    Webp support was just introduced a few days ago in version 2.0 of ImageSharp.

    Anytime I try to upgrade these 2 packages from SixLabors to their latest and greatest (2.0) my site blows up and shows me the exact error message you've posted above. Anytime I try to engage with ImageSharp (example: resize an image) I'm met with the same exact error.

    Now a few months ago I pulled in the dev branch of ImageSharp and got webp support. I had to download it and reference it in my solution to do so. I'll see if I can repeat the steps to get it to work.

  • George Phillipson 108 posts 286 karma points
    Feb 10, 2022 @ 17:00
    George Phillipson
    0

    Hi Mark

    Thanks for the reply, if you can let me know how you get on that will be great

    George

  • Mark Drake 120 posts 408 karma points c-trib
    Feb 10, 2022 @ 19:08
    Mark Drake
    1

    So previously, I was able to do this because there were no breaking changes. Moving from ImageSharp.Web v1.0.4 to v2.0(alpha) has resulted in some other things that need to be fixed first.

    Upgrade SixLabors.ImageSharp.Web

    I updated the nuget package to v2.0.0-alpha.0.18. This resulted in just a few errors in the build, taken care of below:

    (1) UmbracoBuilderExtensions

    There used to be an ImageSharp setting named CachedNameLength and this needs to be updated to CacheHashLength. I assumed that this property is the same logically, so I just renamed it quickly for testing.

    (2) CropWebProcessor

    The method definition (?) for Process has changed. Instead of a Dictionary of values for the commands, it uses CommandCollection. Quick update again.

    Webp works great now but...

    I'm just a frontend guy. I can't tell you exactly when 2.0 will have a real release, and I don't know what (if any) testing needs to be done in Umbraco before they'll accept a PR.

  • Jeavon Leopold 3042 posts 13382 karma points MVP 8x admin c-trib
    Feb 10, 2022 @ 19:09
    Jeavon Leopold
    1

    You will have to wait for Umbraco v10 for official ImageSharp v2 and WebP support. However, it's possible to make "special" NuGet packages that can be installed to your solution. I have these for Umbraco v9.2.0 & just added (and tested v9.3) available at https://github.com/Jeavon/Slimsy/tree/feature/ImageSharp2/LocalNugetPackages

  • Marian 2 posts 72 karma points
    Apr 01, 2022 @ 10:03
    Marian
    0

    Hello Jeavon,

    Could you please make such a "special" NuGet package for Umbraco ver. 9.4.1, and upload it to https://github.com/Jeavon/Slimsy/tree/feature/ImageSharp2/LocalNugetPackages as well?

    Thanks.

  • Marian 2 posts 72 karma points
    16 days ago
    Marian
    0

    Hi Jeavon,

    Please let us know if this "special" NuGet package for Umbraco ver. 9.4.1, which I have requested earlier, is already made? If yes - could you please upload it and share the link here?

    Thanks.

  • Jeavon Leopold 3042 posts 13382 karma points MVP 8x admin c-trib
    Feb 10, 2022 @ 19:11
    Jeavon Leopold
    0

    This is using ImageSharp.Web 2.0.0-alpha.0.16 - you will need to add a NuGet.config like this https://github.com/Jeavon/Slimsy/blob/feature/ImageSharp2/NuGet.config

  • Jeavon Leopold 3042 posts 13382 karma points MVP 8x admin c-trib
    Feb 10, 2022 @ 19:25
    Jeavon Leopold
    0

    Also worth noting is that it's likely the Storage Provider package https://github.com/umbraco/Umbraco.StorageProviders will require some changes before being v2 compatible if you go down this road and I've not got there yet....

  • George Phillipson 108 posts 286 karma points
    Feb 10, 2022 @ 22:07
    George Phillipson
    0

    Hi All

    Rolled back ImageSharp to 1.0.4, as V2 does not display the image uploaded in the media folder BackOffice

    Regards George

  • George Phillipson 108 posts 286 karma points
    Feb 14, 2022 @ 11:29
    George Phillipson
    1

    If anyone comes across this post, below is a quick fix for adding WebP images to Umbraco 9, the code below works with the MediaPicker3, I have not had time to work out using it with the image cropper. But for the time being this works, I wrote a quick blog about it at https://www.intuwebdesign.com/blogs/umbraco-cms/how-to-add-webp-support-to-umbraco-9/ and the code is

    using System.IO;
    using ImageMagick;
    using Microsoft.AspNetCore.Hosting;
    using Newtonsoft.Json;
    using Umbraco.Cms.Core.Events;
    using Umbraco.Cms.Core.Models;
    using Umbraco.Cms.Core.Notifications;
    using Umbraco.Cms.Core.Services;
    
    namespace Web.Controller.UmbracoBackoffice
    {
        public class ImageSrc
        {
            public string Src { get; set; }
        }
        public class SubscribeToMediaSavedNotifacations : INotificationHandler<MediaSavedNotification>
        {
            private readonly IMediaService          _iMediaService;
            private readonly IWebHostEnvironment    _iHostingEnvironment;
    
            public SubscribeToMediaSavedNotifacations(IMediaService mediaService, IWebHostEnvironment hostingEnvironment)
            {
                _iMediaService          = mediaService;
                _iHostingEnvironment    = hostingEnvironment;
            }
    
            public void Handle(MediaSavedNotification notification)
            {
                foreach (var mediaItem in notification.SavedEntities)
                {
                    if (mediaItem.ContentType.Alias.Equals("Image"))
                    {
                        var id      = mediaItem.Id;
                        IMedia media    = _iMediaService.GetById(id);
                        var jsonUrl     = media.GetValue("UmbracoFile").ToString();
    
                        if (jsonUrl != null)
                        {
                            var originalImage = JsonConvert.DeserializeObject<ImageSrc>(jsonUrl);
                            if (originalImage != null)
                            {
                                string relativeImagePath         = originalImage.Src;
                                string currentDirectory          = Path.GetDirectoryName(relativeImagePath);
                                string imageNameWithExt          = Path.GetFileName(relativeImagePath);
                                string imageNameNoExt            = Path.GetFileNameWithoutExtension(imageNameWithExt);
                                string pathToWwwRoot             = Path.Combine(_iHostingEnvironment.ContentRootPath, "wwwroot");
    
                                var fullImagePathAndNameWithExt  = $"{pathToWwwRoot}{currentDirectory}\\{imageNameWithExt}";
                                string pathToImageFolder         = $"{pathToWwwRoot}{currentDirectory}";
    
                                using var createWebpImage        = new MagickImage(fullImagePathAndNameWithExt);
                                string pathToNewImage            = pathToImageFolder;
                                string newWebpImage              = $"{pathToNewImage}\\{imageNameNoExt}.webp";
                                createWebpImage.Format           = MagickFormat.WebP;
    
                                createWebpImage.Write(newWebpImage);
                                notification.Messages.Add(new EventMessage("success", "Created WebP Image", EventMessageType.Success));
                            }
                            else
                            {
                                notification.Messages.Add(new EventMessage("error", "Default image is NULL", EventMessageType.Error));
                            }
                        }
                        else
                        {
                            notification.Messages.Add(new EventMessage("error", "Default image not in JSON format", EventMessageType.Error));
                        }
                    }
    
                }
            }
            public void Terminate() { }
        }
    }
    

    If you delete the image from the CMS, remember to hook it into the

    INotificationHandler<MediaDeletedNotification> and also delete the WebP image

  • Nick Kronenberg 10 posts 93 karma points c-trib
    16 days ago
    Nick Kronenberg
    0

    Does this still work? and if it still works are you using any other package to make it work?

  • Alex Skrypnyk 6055 posts 23216 karma points MVP 5x admin c-trib
    30 days ago
    Alex Skrypnyk
    0

    ImageSharp.Web 2 was released, but it's not working with umbraco 9.3

    Getting an exception on application start:

    TypeLoadException: Method 'Process' in type 'Umbraco.Cms.Web.Common.ImageProcessors.CropWebProcessor' from assembly 'Umbraco.Web.Common, Version=9.3.1.0, Culture=neutral, PublicKeyToken=null' does not have an implementation.
    Unknown location
    
    ReflectionTypeLoadException: Could not load all types from "Umbraco.Web.Common, Version=9.3.1.0, Culture=neutral, PublicKeyToken=null" due to LoaderExceptions, skipping:
    . System.TypeLoadException on Umbraco.Cms.Web.Common.ImageProcessors.CropWebProcessor: Method 'Process' in type 'Umbraco.Cms.Web.Common.ImageProcessors.CropWebProcessor' from assembly 'Umbraco.Web.Common, Version=9.3.1.0, Culture=neutral, PublicKeyToken=null' does not have an implementation.
    
  • Nick Kronenberg 10 posts 93 karma points c-trib
    16 days ago
    Nick Kronenberg
    1

    They did not include it in the current umbraco because it counts as a breaking change. I found other forum posts basically saying the same. I am not sure when and how they are going to implement it but currently i am not holding my breath.

  • Jeavon Leopold 3042 posts 13382 karma points MVP 8x admin c-trib
    16 days ago
    Jeavon Leopold
    2

    ImageSharp.Web v2.0.0 and ImageSharp v2.1.1 are included in Umbraco v10-rc1

  • Nick Kronenberg 10 posts 93 karma points c-trib
    16 days ago
    Nick Kronenberg
    2

    Thanks! I was actually looking for this info!

Please Sign in or register to post replies

Write your reply to:

Draft