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/

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.

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

Cheers!

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.

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!

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.

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

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 

@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

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.

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 

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"/>

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.

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

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?

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

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.

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 :)

:) 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).

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.

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

Works now!

Ok on to the transform.

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>

Hi all,

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

:) Dirk

GO TEAM AWESOME! :)

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/ ?

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.

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

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 ?

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.

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?

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?

Yes, It's public blob container

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

is working on a reply...