How to configure ImageSharp to crop external images?
c
Does anyone know how (where?) to configure ImageSharp for allowing to process images from an external server? With ImageProcessor it was a setting in an XML file, but with ImageSharp, I just can't figure it out...
s
Usage instructions might change though (the InsetProvider part) - I have a suspicion that I've broken the Blob storage cache in cloud sites 🙂
And I want to make AllowedDomains able to read regexes too.
When it is setup, there is a helper method you can use to convert eg.

https://www.example.com/image.jpgâ–¾

to /remote/https://www.example.com/image.jpg according to your setup (https://github.com/skttl/ImageSharpCommunity.Providers.Remote/blob/main/src/ImageSharpCommunity.Providers.Remote/Helpers.cs#L64)
m
@skttl That looks useful! If you've not already seen.... I ran with something based on the GIST here but simplified for my needs.. https://gist.github.com/marklagendijk/e5fd1934391a515f8c974c87024ed39c https://github.com/SixLabors/ImageSharp.Web/discussions/167 PS I used
Copy code
csharp
 public class MatterportImageProviderComposer : IComposer
 {
     public void Compose(IUmbracoBuilder builder)
     {
         //https://github.com/umbraco/Umbraco-CMS/discussions/11938#discussioncomment-2654842
         var descriptors = builder.Services.Where(x => x.ServiceType == typeof(IImageProvider)).ToList();
         builder.Services.RemoveAll<IImageProvider>();
         descriptors.Insert(0, ServiceDescriptor.Singleton<IImageProvider, MatterportImageProvider>());
         builder.Services.TryAddEnumerable(descriptors);

         //builder.Services.Insert(0, ServiceDescriptor.Singleton<IImageProvider, MatterportImageProvider>());
     }
 }
To inject the additional imageProvider, so as not to have to
addImageSharp()
again and break anything Umbraco Core does? Might help not break Cloud blob storage cache?
s
Yes, that is also what I'm probably going to end up with. I am curious though, if I could just do the last line (builder.Services.Insert) instead of creating the list of all providers, and then adding them.
m
I think I tried a few things.. thinking like you I could just insert on the fly but couldn't get it to work so fell back to a working option. (was an early umb 10 when I last touched it)
could do with a core extension to allow adding options to imageSharp??I have IImageWebProcessors too.
Copy code
csharp
public class GrayscaleWebProcessorComposer : IComposer
 {
     public void Compose(IUmbracoBuilder builder)
     {
         //https://github.com/umbraco/Umbraco-CMS/discussions/11938#discussioncomment-2654842
         builder.Services.TryAddEnumerable(ServiceDescriptor.Singleton<IImageWebProcessor, GrayscaleWebProcessor>());   
     }
 }
Now I think, I think it was a priorty/order issue on the IImageProvider, as otherisse the crop proocessor got there first...
Overlay and tint as well..
s
Yes, so the remote image provider needs to go first, else WebRootProvider will take the request
c
Thanks @skttl and @Mike Chambers — confirmed my sad predictions... 🙈 I probably won't be able to do this... (I will try, of course, and spend a lot of time fiddling with builder/composer stuff I don't understand, and eventually give up 🤣)
s
Lucky you - my plan is to do an Umbraco package on top of that, so all you have to do is to add the necessary settings in appsettings.json 🙂
c
Now that makes sense! 🙌
s
If you want to try... https://www.nuget.org/packages/Umbraco.Community.ImageSharpRemoteImages This one installs an appsettings-schema file, so you should get intellisense in that too, else the config looks like this: "Umbraco": { "Community": { "ImageSharpRemoteImages": { "Settings": [ { "Prefix": "/remote", "AllowedDomains": [ "our.umbraco.org" ], } ] } }, You can also set "AllowAllDomains" to true if you like to take risks, or use "AllowedDomainsRegex" for regex'es. You can see the options here: https://github.com/skttl/ImageSharpCommunity.Providers.Remote/blob/main/src/ImageSharpCommunity.Providers.Remote/Configuration/RemoteImageProviderSetting.cs
c
🙌🙌
10 Views