Copied to clipboard

Flag this post as spam?

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


  • Topic author was deleted

    Apr 24, 2015 @ 19:47

    Image Cropper/Image Processor Crops

    First off, thx for the package, it's great.

    It seems that image processor isn't working with the images I have stored on Azure.

    For example, this won't work: blah.blob.core.windows.net/mendozaappmedia/1017/somepicture.png?anchor=center&mode=crop&width=1400&height=550&rnd=130743701050000000

    Guessing it's because the image processor handler can only run for things hosted locally.

    Have you run into this before?

    I'll also follow up with James South.

  • James Jackson-South 489 posts 1747 karma points c-trib
    Apr 24, 2015 @ 19:57
    James Jackson-South
    1

    Are you prefixing your image requests to tell ImageProcessor that you are pulling a remote file?

    e.g.

    http://yoursite.com/remote.axd/blah.blob.core.windows.net/mendozaappmedia/1017/somepicture.png?anchor=center&mode=crop&width=1400&height=550&rnd=130743701050000000
    

    Note no http:// in the relative url

    Also, for your cache storage are you using the Azure Blob Cache plugin to cache your images?

    http://imageprocessor.org/imageprocessor-web/plugins/azure-blob-cache/

  • Comment author was deleted

    Apr 24, 2015 @ 20:04

    I'm calling images like so:

     

    @image.GetCropUrl(height: 550, width: 1400)

    Do I simply need to prefix something somewhere?

    Do I install that package first? :)

    THx btw.

  • James Jackson-South 489 posts 1747 karma points c-trib
    Apr 24, 2015 @ 20:28
    James Jackson-South
    102

    No worries :)

    Hmmm... I don't know the ins-and-outs of the GetCropUrl API so I don't know for certain what overloads are available.

    You definitely need to prefix your urls so that the application can intercept the request.

    My steps would be.

    • Update to the latest ImageProcessor, ImageProcessor.Web and ensure you have ImageProcessor.Web.Config installed.
    • Add the domain for the source images to the whitelist in security config - (config/imageprocessor/security.config) docs example.
    • Install the AzureBlobCache plugin since there is no point caching your images in the file system if you are using blob storage.
    • Configure the cache provider in cache.config - (config/imageprocessor/security.config) docs example. - If you want to use a single blob container for the source and cached images you can copy the details from the cache account to the source account for better image identification.
    • Make sure all blob containers are public and you have a CDN set up.
    • Enjoy a nice cup of tea and celebrate a job well-done.

    If there is no built-in helper for getting the crop url with the remote prefix I would heartily recommend writing an extension method to manipulate the url to match what you need.

    Hopefully that should do it.

  • Comment author was deleted

    Apr 24, 2015 @ 20:30

    Super, I think that's the info I was looking for. I'll report back tomorrow. 


    Cheers!

  • Comment author was deleted

    Apr 24, 2015 @ 20:44

    Well I can give an early update.

    Installing the two packages and configuring the whitelist immediately fixed the GetCropUrl().

    Now I just have the issue that images embedded in the RTE are not prefixed (I suppose).

    I'll look into that more.

    Thanks again.

  • Comment author was deleted

    Apr 24, 2015 @ 20:52

    Looks like it's all good. I was doing some url intercepting for RTE images so I fixed that and it all works.  If anyone follows along, the core works as expected if you add those two package updates.

    Thanks James!

  • Comment author was deleted

    Apr 24, 2015 @ 22:00

    Final update for the day.  I think the core 'working just fine' was a false positive.

    The false positive is due to the fact the images were still in /media on the local file system.

    So come Monday I will be working to create extensions b/c it appears image processor is working fine given the right url.

  • James Jackson-South 489 posts 1747 karma points c-trib
    Apr 25, 2015 @ 12:46
    James Jackson-South
    0

    Glad you've made some progress. Shout me if any issues pop up. :)

  • Dirk Seefeld 126 posts 665 karma points
    Apr 25, 2015 @ 18:36
    Dirk Seefeld
    2

    Hi Kevin & James,

    I was curious about this issue and figure out what might be missing:

    The ImageProcessor plugin AzureBlobCache does not create the configured blob container automatically. Thus you have to create it manually.

    At least after all config settings in place and doing a little replacing on the GetCropUrl like:

    @typedMedia.GetCropUrl("myCropName").Replace("://", "://mydomain/remote.axd/")

    You get the cropped image from azure blob cache container.
    Actually it took me while to get all config settings right. So it might be helpfull to put my examples here:

    /config/imageprocessor/cache.config

    <?xml version="1.0" encoding="utf-8"?>
    <caching currentCache="AzureBlobCache">
        <caches>
            <cache name="DiskCache" type="ImageProcessor.Web.Caching.DiskCache, ImageProcessor.Web" maxDays="365">
                <settings>
                    <setting key="VirtualCachePath" value="~/app_data/cache" />
                </settings>
            </cache>
            <cache name="AzureBlobCache" type="ImageProcessor.Web.Plugins.AzureBlobCache.AzureBlobCache, ImageProcessor.Web.Plugins.AzureBlobCache" maxDays="365">
                <settings>
                    <setting key="CachedStorageAccount" value="DefaultEndpointsProtocol=https;AccountName=idseefeld;AccountKey=q4YVEx928VXHJCUz0MMAI7IPtU8FT5ajrlXNTT9W0C29Vu3QE9hDVJluuKxGQdkxrfxiIxu5s6Q8noNgQWt2JA==" />
                    <setting key="CachedBlobContainer" value="cache" />
                    <setting key="CachedCDNRoot" value="http://az750980.vo.msecnd.net" />
                    <setting key="SourceStorageAccount" value="DefaultEndpointsProtocol=https;AccountName=idseefeld;AccountKey=q4YVEx928VXHJCUz0MMAI7IPtU8FT5ajrlXNTT9W0C29Vu3QE9hDVJluuKxGQdkxrfxiIxu5s6Q8noNgQWt2JA==" />
                    <setting key="SourceBlobContainer" value="media" />
                </settings>
    
                <!--<settings>                
                    <setting key="CachedStorageAccount" value="UseDevelopmentStorage=true" />
                    <setting key="CachedBlobContainer" value="cache" />
                    <setting key="CachedCDNRoot" value="http://127.0.0.1:10000/devstoreaccount1" />
                    <setting key="SourceStorageAccount" value="UseDevelopmentStorage=true" />
                    <setting key="SourceBlobContainer" value="media" />
                </settings>-->
                
            </cache>
        </caches> 

    </caching>

    /config/imageprocessor/cache.config

    <?xml version="1.0" encoding="utf-8"?>
    <security>
        <services>
            <service name="LocalFileImageService" type="ImageProcessor.Web.Services.LocalFileImageService, ImageProcessor.Web" />
            <service prefix="remote.axd" name="RemoteImageService" type="ImageProcessor.Web.Services.RemoteImageService, ImageProcessor.Web">
                <settings>
                    <setting key="MaxBytes" value="4194304" />
                    <setting key="Timeout" value="3000" />
                    <setting key="Protocol" value="http" />
                </settings>
                <whitelist>
                    <add url="http://idseefeld.blob.core.windows.net" />
                    <add url="http://az750980.vo.msecnd.net" />
                    <add url="http://127.0.0.1" />
                </whitelist>
            </service>
        </services> 

    </security> 

    /config/FileSystemProviders.config

    <?xml version="1.0"?>
    <FileSystemProviders>
    
        <!-- Media -->
        <!--<Provider alias="media" type="Umbraco.Core.IO.PhysicalFileSystem, Umbraco.Core">
            <Parameters>
                <add key="virtualRoot" value="~/media/" />
            </Parameters>
        </Provider>-->
    
        <Provider alias="media"
                   type="idseefeld.de.UmbracoAzure.AzureBlobFileSystem, idseefeld.de.UmbracoAzure">
            <Parameters>
                <add key="containerName" value="media" />
                <add key="rootUrl" value="http://idseefeld.blob.core.windows.net/" />
                <add key="connectionString" value="DefaultEndpointsProtocol=https;AccountName=idseefeld;AccountKey=q4YVEx928VXHJCUz0MMAI7IPtU8FT5ajrlXNTT9W0C29Vu3QE9hDVJluuKxGQdkxrfxiIxu5s6Q8noNgQWt2JA=="/>
                <add key="mimetypes" value="" />
                <add key="cacheControl" value="*|public, max-age=31536000;js|no-cache" />
            </Parameters>
        </Provider>
    
        <!--using development storage emulator-->
        <!--<Provider alias="media"
                 type="idseefeld.de.UmbracoAzure.AzureBlobFileSystem, idseefeld.de.UmbracoAzure">
            <Parameters>
                <add key="containerName" value="media" />
                <add key="rootUrl" value="http://127.0.0.1:10000/devstoreaccount1/" />
                <add key="connectionString" value="UseDevelopmentStorage=true"/>
                <add key="mimetypes" value="" />
                <add key="cacheControl" value="*|public, max-age=31536000" />
            </Parameters>
        </Provider>--> 

    </FileSystemProviders> 

    Yours,
    Dirk 

  • Comment author was deleted

    Apr 25, 2015 @ 18:46

    @Dirk, thanks for that. I'll give that a try on Monday.  Without a working Image Processor cache, it negates the power of storing stuff on Azure.

    #h5yr

  • Comment author was deleted

    Apr 27, 2015 @ 17:22

    Ok fellas.  Working pretty well.

    However when I enable my AzureBlobStorage, I'm getting 404's on the frontend despite the files showing up in the cache when saving in the backend.

    When I switch back to DiskCache (in the cache.config), everything works fine.

    I'm not sure how the plumbing is setup for the CDN (if that's a factor), but I created a CDN url as well b/c I was getting 500 errors when I didn't have one configured.

    But crops and everything work fine, just can't get the cache to work.

     

    Secondly, it would be great if I could disable Azure caching when dev'ving locally.  Is there a way to indicate which cache to use in which environment? Typically I rely on the transforms for that.

  • Dirk Seefeld 126 posts 665 karma points
    Apr 27, 2015 @ 17:35
    Dirk Seefeld
    0

    Hi Kevin, did you wait about 60 minutes after creating the CDN? It takes up to this time to be available.

    Currently it is not poosible to use the Azure Development Storage Emulator (Azure SDK) with the ImageProccessor.Web Azure cache plugin.
    I already send James a pull request for this - not feedback yet...

    I am not sure how we can handle different environments as the UmbracoAzureBlobStorageProvider config is done in the /config/FileSystemProviders.config.

    Any ideas?

    Dirk 

  • Comment author was deleted

    Apr 27, 2015 @ 17:42

    Thx Dirk. I haven't waited long enough :)

    RE: the dev.  Perhaps a web.config appSetting could indicate which cache to use?  That way a transform of the web.config would handle the env switch.

    i.e.

    <add key="imageprocessor.cache:currentCache" value="DiskCache"/>

  • Dirk Seefeld 126 posts 665 karma points
    Apr 27, 2015 @ 17:49
    Dirk Seefeld
    0

    Ok, probably James could do that for the ImageProcessor plugin. We have to await his response...

    However, I dont see a way for the UmbracoAzureBlobStorageProvider as this controled by Umbraco.

    At least both packages sould to be in sync.

  • Dirk Seefeld 126 posts 665 karma points
    Apr 27, 2015 @ 22:29
    Dirk Seefeld
    0

    Hi Kevin,

    I found a solution to toggle Azure Cloud Storage and WAStorageEmulator by an optional appSetting:

    <add key="AzureBlobFileSystem.UseWAStorageEmulator" value="true" />

    This is for UmbracoAzureBlobStorageProvider version 1.0.10.4 or higher.

    Dirk

  • James Jackson-South 489 posts 1747 karma points c-trib
    Apr 28, 2015 @ 11:57
    James Jackson-South
    0

    Hi guys, sorry for the slow reply, super busy!

    Dirk, I've added some feedback to your pull request, a few tweaks and I think we can do something cool.

    As far as switching the cache depending on the environment?.... Eeeesh... I really don't know, I would have to ensure that each IImageCache can exist with or without that behaviour in order to prevent breaking everyone's sites.

    Can you do config transforms for files other than the web.config?

  • Comment author was deleted

    Apr 28, 2015 @ 15:23

    AFAIK you can only do transformation in the web.config.

  • James Jackson-South 489 posts 1747 karma points c-trib
    Apr 29, 2015 @ 13:25
    James Jackson-South
    0

    All my configuration, including caching is stored outside the web.config but their location is dictated by value in the web.config.

    You put a transform in your web.config pointing the custom section to a different config files in the /config/imageprocessor/folder.

    That should allow it.

  • Comment author was deleted

    Apr 29, 2015 @ 13:30

    PERFECT :)

    I'm already doing that for Dirk's file storage provider.  I just didn't notice that it added the configSource stuff to the bottom of my web.config.

    Brilliant, problem solved +1

    Thank you :)

  • James Jackson-South 489 posts 1747 karma points c-trib
    Apr 29, 2015 @ 14:00
    James Jackson-South
    0

    :) I can't believe it took me so long to realise.

    You should post a sample of the transforms here so I can steal them (I always mess them up).

  • Comment author was deleted

    Apr 29, 2015 @ 15:44

    Sooooo close to getting the cache working...

    However when I try to enable the cache store in Azure, every image throws a 500 on the frontend with this error:

    An unhandled exception occurred System.ArgumentNullException: Value cannot be null. Parameter name: key at System.Collections.Concurrent.ConcurrentDictionary`2.TryGetValue(TKey key, TValue& value) at ImageProcessor.Web.Extensions.TypeInitializationExtensions.InstanceCreationFactory`3.CacheInstanceCreationMethodIfRequired(Type type) at ImageProcessor.Web.Extensions.TypeInitializationExtensions.InstanceCreationFactory`3.CreateInstanceOf(Type type, TArg1 arg1, TArg2 arg2, TArg3 arg3) at ImageProcessor.Web.Extensions.TypeInitializationExtensions.GetInstance[TArg1,TArg2,TArg3](Type type, TArg1 argument1, TArg2 argument2, TArg3 argument3) at ImageProcessor.Web.HttpModules.ImageProcessingModule.<ProcessImageAsync>d__10.MoveNext() --- End of stack trace from previous location where exception was thrown --- at System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task) at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task) at System.Web.TaskAsyncHelper.EndTask(IAsyncResult ar) at System.Web.HttpApplication.AsyncEventExecutionStep.System.Web.HttpApplication.IExecutionStep.Execute() at System.Web.HttpApplication.ExecuteStep(IExecutionStep step, Boolean& completedSynchronously)

    Disabling the Azure cache makes it all work.

    Any idea what the 'key' property is?

    I'm configured just like Dirk (cache.config) except the containers and credentials are what they should be for my setup.

  • Comment author was deleted

    Apr 29, 2015 @ 15:55

    Ok nm that ==^ I had a copy/paste fail.

    Works now!

    Ok on to the transform.

  • Comment author was deleted

    Apr 29, 2015 @ 16:49

    Ok, 100% complete.

    As promised, here are the transforms and how i setup my cache config.  I removed my acct details:

    <!-- cache.config -->
    <?xml version="1.0" encoding="utf-8"?>
    <caching currentCache="DiskCache">
      <caches>
        <cache name="DiskCache" type="ImageProcessor.Web.Caching.DiskCache, ImageProcessor.Web" maxDays="365">
          <settings>
            <setting key="VirtualCachePath" value="~/app_data/cache" />
          </settings>
        </cache>
      </caches>
    </caching>
    
    
    <!-- cacheAzure.config -->
    <?xml version="1.0" encoding="utf-8"?>
    <caching currentCache="AzureBlobCache">
      <caches>
        <cache name="AzureBlobCache" type="ImageProcessor.Web.Plugins.AzureBlobCache.AzureBlobCache, ImageProcessor.Web.Plugins.AzureBlobCache" maxDays="365">
          <settings>
            <setting key="CachedStorageAccount" value="DefaultEndpointsProtocol=https;AccountName=;AccountKey=" />
            <setting key="CachedBlobContainer" value="" />
            <setting key="CachedCDNRoot" value="" />
            <setting key="SourceStorageAccount" value="DefaultEndpointsProtocol=https;AccountName=;AccountKey=" />
            <setting key="SourceBlobContainer" value="" />
          </settings>
        </cache>
      </caches>
    </caching>
    
    <!--web.Azure-Prod.config -->
      <imageProcessor>
        <caching configSource="config\imageprocessor\cacheAzure.config" xdt:Transform="SetAttributes(configSource)"/>
      </imageProcessor>
  • Dirk Seefeld 126 posts 665 karma points
    Apr 30, 2015 @ 13:41
    Dirk Seefeld
    1

    Hi all,

    I have just added a useful solution for local development with Windows Azure Storage Emulator to project documentation

    :) Dirk

  • James Jackson-South 489 posts 1747 karma points c-trib
    Apr 30, 2015 @ 15:05
    James Jackson-South
    0

    GO TEAM AWESOME! :)

  • John 18 posts 74 karma points c-trib
    Sep 02, 2015 @ 15:31
    John
    0

    In this scenario what is the CDN doing as far as I can see the image urls on the site are referring to the site rather than the CDN?

    Maybe be I am misunderstanding it and need to set the CDN origin to be http://yoursite.com/remote.axd/blah.blob.core.windows.net/mendozaappmedia/ ?

  • James Jackson-South 489 posts 1747 karma points c-trib
    Sep 03, 2015 @ 12:50
    James Jackson-South
    0

    Hi John,

    In this scenario ImageProcessor.Web is doing a 302 redirect to the CDN on caching so that subsequent requests come from there.

    It is possible though to set up ImageProcessor.Web to return as stream in the scenario where requests to the CDN redirect to an endpoint when an image is not found.

    There's some configuration information here and discussion on the scenario on Github.

    Cheers

    James

  • John 18 posts 74 karma points c-trib
    Sep 29, 2015 @ 09:08
    John
    0

    Hi

    Thank you for your reply, it had been working until I looked in a little deeper. I am finding the 302 direct is taking a very long time.

    enter image description here

    Is there a reason that this would be happening. Is it a latency issue with the blob storage or something else?

  • James Jackson-South 489 posts 1747 karma points c-trib
    Nov 05, 2015 @ 01:19
    James Jackson-South
    0

    Hi John,

    Sorry, didn't spot this. I imagine it would be latency. I've not noticed an issue myself testing.

  • Olivier 22 posts 115 karma points
    Nov 04, 2015 @ 22:09
    Olivier
    0

    Hi,

    I follow this thread for my setup,

    I got an 404 not found

    http://localhost:49909/remote.axd/intranet.blob.core.windows.net/media/1028/fred.jpg?width=200&height=200&center=0,509677419354839,0,63768115942029&mode=crop

    but if I open my browser I got my image : intranet.blob.core.windows.net/media/1028/fred.jpg?width=200&height=200&center=0,509677419354839,0,63768115942029&mode=crop

    The remote server returned an error: (404) Not Found.

    Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code.

    Exception Details: System.Net.WebException: The remote server returned an error: (404) Not Found.

    Source Error:

    An unhandled exception was generated during the execution of the current web request. Information regarding the origin and location of the exception can be identified using the exception stack trace below.

    Stack Trace:

    [WebException: The remote server returned an error: (404) Not Found.] System.Net.HttpWebRequest.GetResponse() +1465 ImageProcessor.Web.Plugins.AzureBlobCache.AzureBlobCache.RewritePath(HttpContext context) +484 ImageProcessor.Web.HttpModules.

    Do you have an idea ?

  • James Jackson-South 489 posts 1747 karma points c-trib
    Nov 05, 2015 @ 01:21
    James Jackson-South
    1

    Hi Oliver,

    I'd have to see how you have set up your configuration files.

    Could you possible post that, without the security keys obviously ;) so I could have a look?

    Cheers

    James

  • Olivier 22 posts 115 karma points
    Nov 05, 2015 @ 15:28
    Olivier
    0

    Hi,

    I think I was Impatient .. That works like charm !

    Thx anyway !

  • James Jackson-South 489 posts 1747 karma points c-trib
    Nov 06, 2015 @ 00:34
    James Jackson-South
    1

    Great to hear! :)

  • Mitch 42 posts 157 karma points
    Jan 12, 2016 @ 12:02
    Mitch
    0

    Hi Olivier. I'm getting the same error message as you, but patience is not fixing it. Did you do anything to resolve your issue apart from wait?

  • Olivier 22 posts 115 karma points
    Nov 29, 2015 @ 15:33
    Olivier
    0

    Hi,

    I would like to notice that I have the same issue as John. I am finding the 302 direct is taking a very long time.

  • Mitch 42 posts 157 karma points
    Jan 12, 2016 @ 11:30
    Mitch
    0

    Hi guys. I'm having issues setting this up. I'm getting a 404 for the cached images.

    <cache name="AzureBlobCache" type="ImageProcessor.Web.Plugins.AzureBlobCache.AzureBlobCache, ImageProcessor.Web.Plugins.AzureBlobCache" maxDays="365">
      <settings>
        <setting key="CachedStorageAccount" value="DefaultEndpointsProtocol=https;AccountName=cmsmediadev;AccountKey=" />
        <setting key="CachedBlobContainer" value="cache" />
        <setting key="CachedCDNRoot" value="https://digital-np-cache.azureedge.net" />
        <setting key="SourceStorageAccount" value="" />
        <setting key="SourceBlobContainer" value="" />
        <setting key="StreamCachedImage" value="false" />
      </settings>
    </cache>
    

    Not sure how this differs from everyone else's set up, apart from the fact that our CDN points to http://[BlobStorage]/cache, rather than the root. Could this be an issue?

  • Olivier 22 posts 115 karma points
    Jan 12, 2016 @ 14:37
    Olivier
    0

    Hi,

    here my config:

    <cache name="DiskCache" type="ImageProcessor.Web.Caching.DiskCache, ImageProcessor.Web" maxDays="365">
      <settings>
        <setting key="VirtualCachePath" value="~/app_data/cache" />
      </settings>
    </cache>
    <cache name="AzureBlobCache" type="ImageProcessor.Web.Plugins.AzureBlobCache.AzureBlobCache, ImageProcessor.Web.Plugins.AzureBlobCache" maxDays="365">
      <settings>
        <setting key="CachedStorageAccount" value="DefaultEndpointsProtocol=http;AccountName=KEY;AccountKey=SECRET" />
        <setting key="CachedBlobContainer" value="cache" />
        <setting key="CachedCDNRoot" value="http://XXXXX.vo.msecnd.net/" />
        <setting key="SourceStorageAccount" value="DefaultEndpointsProtocol=http;AccountName=KEY;AccountKey=SECRET" />
        <setting key="SourceBlobContainer" value="media" />
        <setting key="StreamCachedImage" value="true" />
      </settings>
    

    Note: StreamCachedImage are optional. It's because if I set to false the redirect take too long....

  • Mitch 42 posts 157 karma points
    Jan 12, 2016 @ 15:37
    Mitch
    0

    Thanks for the reply Olivier. Unfortunately I've tried a set up like that and I still had no joy.

    Do you know where your CDN points to? Is it source blob root, source blob container, or cached container?

    Does it matter?

  • Olivier 22 posts 115 karma points
    Jan 12, 2016 @ 15:38
    Olivier
    0

    Yes, It's public blob container

  • Mitch 42 posts 157 karma points
    Jan 12, 2016 @ 15:53
    Mitch
    0

    Thanks Olivier. I better confirm the containers are public...

  • Mitch 42 posts 157 karma points
    Jan 12, 2016 @ 22:24
    Mitch
    0

    Finally got it working. For anyone who's interested, the CDN's origin must be the root storage account, no container.

Please Sign in or register to post replies

Write your reply to:

Draft