image cropper and azure bob cdn

Jake 7 posts 117 karma points

Mar 23, 2018 @ 16:01

I'm using an Azure storage account with CDN to store and serve all media items uploaded to my site.

When naming the Blob conatiner "Media" the image cropper works, however I want to use the same storage account for multiple sites. As such I renamed the the Blob container to the sites name and now the image cropper has stopped working, but all other images are served fine. This wasn't an issue until changing the Blob container name away from "Media".

My Cache Config as follows:

<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=NAME;AccountKey=KEY" />
            <setting key="CachedBlobContainer" value="cache" />
            <setting key="UseCachedContainerInUrl" value="false" />
            <setting key="CachedCDNRoot" value="https://CDN.azureedge.net" />
            <setting key="SourceStorageAccount" value="DefaultEndpointsProtocol=https;AccountName=NAME;AccountKey=KEY" />
            <setting key="SourceBlobContainer" value="newmedialocation" />
            <setting key="StreamCachedImage" value="false" />
        </settings>
    </cache>
</caches>

Any thoughts on this would be appreciated.

Thanks

Copy Link

Jeavon Leopold 3074 posts 13632 karma points MVP 11x admin c-trib

Mar 23, 2018 @ 16:31

Did you also update FileSystemProviders.config and imageprocessor/security.config?

Copy Link

Jake 7 posts 117 karma points

Mar 23, 2018 @ 18:36

Hi Jeavon,

I've updated them following the documentation on our and they are as follows:

<?xml version="1.0" encoding="utf-8"?>
<security>
    <services>
        <!--<service name="LocalFileImageService" type="ImageProcessor.Web.Services.LocalFileImageService, ImageProcessor.Web" />-->
        <service prefix="newmedialocation/" name="CloudImageService" type="ImageProcessor.Web.Services.CloudImageService, ImageProcessor.Web">
            <settings>
                <setting key="MaxBytes" value="8194304"/>
                <setting key="Timeout" value="30000"/>
                <setting key="Host" value="http://CDN.blob.core.windows.net/newmedialocation/"/>

            </settings>
        </service>
        <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="https://CDN.azureedge.net" />
                <add url="https://CDN.blob.core.windows.net/" />
                <add url="https://www.MYWEBSITE.co.uk" />
                <add url="http://localhost" />
                <add url="http://127.0.0.1" />
            </whitelist>
        </service>
    </services>
</security>


<FileSystemProviders>

  <!-- Media -->
  <Provider alias="media" type="Our.Umbraco.FileSystemProviders.Azure.AzureBlobFileSystem, Our.Umbraco.FileSystemProviders.Azure">
    <Parameters>
        <add key="containerName" value="newmedialocation"/>
        <add key="rootUrl" value="http://CDN.blob.core.windows.net/"/>
        <add key="connectionString" value="DefaultEndpointsProtocol=https;AccountName=NAME;AccountKey=KEY"/>
        <!--
        Optional configuration value determining the maximum number of days to cache items in the browser.
        Defaults to 365 days.
      -->
        <add key="maxDays" value="365"/>
        <!--
        When true this allows the VirtualPathProvider to use the deafult "media" route prefix regardless 
        of the container name.
      -->
        <add key="useDefaultRoute" value="true"/>
        <!--
        When true blob containers will be private instead of public what means that you can't access the original blob file directly from its blob url.
      -->
        <add key="usePrivateContainer" value="false"/>
    </Parameters>
  </Provider>

</FileSystemProviders>

Would I also need to set the umbracoMediaPath appSeting in my web.config?

Copy Link

Jeavon Leopold 3074 posts 13632 karma points MVP 11x admin c-trib

Mar 26, 2018 @ 08:57

In security.config this is not correct

  <service prefix="newmedialocation/" name="CloudImageService" type="ImageProcessor.Web.Services.CloudImageService, ImageProcessor.Web">

It should be

  <service prefix="media/" name="CloudImageService" type="ImageProcessor.Web.Services.CloudImageService, ImageProcessor.Web">

Copy Link

Jake 7 posts 117 karma points

Mar 27, 2018 @ 08:56

Awesome, that fixed the issue. As i assumed it to be the path to the image location, I changed it without fully understanding why.

Out of interest, why is that set to the Umbraco media path and not the blob container name?

Thanks for the help!

Copy Link

Jeavon Leopold 3074 posts 13632 karma points MVP 11x admin c-trib

Mar 27, 2018 @ 09:13

The prefix is the path that ImageProcessor.Web CloudService will monitor for requests so in this case your want requests to /media/* to be picked up and requested from blob storage

Copy Link

is working on a reply...

Flag this post as spam?

Image Cropper and Azure Bob CDN