Url is prefixed with assets

[sacredgeometry]

<add key="AzureCDNToolkit:UseAzureCdnToolkit" value="true" />
<add key="AzureCDNToolkit:Domain" value="http://virgin.dev" />
<add key="AzureCDNToolkit:CdnUrl" value="http://endpoint923705.azureedge.net" />
<add key="AzureCDNToolkit:CdnPackageVersion" value="0.0.1" />
<add key="AzureCDNToolkit:AssetsContainer" value="assets" />
<add key="AzureCDNToolkit:MediaContainer" value="media" />

This gives me a url of

http://endpoint923705.azureedge.net/assets/media/1018/2770e34200000578-0-image-m-49_1428712855691.jpg?v=0.0.1

Where it needs to be

http://endpoint923705.azureedge.net/media/1018/2770e34200000578-0-image-m-49_1428712855691.jpg?v=0.0.1

Am I configuring this wrong or is there a hard requirement for the blobs data structure to have media nested inside assets.

Kind Regards

Brian

[Jeavon]

Hi Brian,

That's not how it should be, could you post a snippet of what is giving you the incorrect path?

Thanks,

Jeavon

[Stuart-wmgc]

Hi, Looks like this post has died, but I am having this exact issue.

In my web.config under appSettings I have

    <add key="AzureCDNToolkit:UseAzureCdnToolkit" value="true" />
    <add key="AzureCDNToolkit:Domain" value="http://localhost:64906" />
    <add key="AzureCDNToolkit:CdnUrl" value="https://wmc-hexagon-cdn-endpint.azureedge.net" />
    <add key="AzureCDNToolkit:CdnPackageVersion" value="0.0.1" />
    <add key="AzureCDNToolkit:AssetsContainer" value="assets" />
    <add key="AzureCDNToolkit:MediaContainer" value="media" />

in my view I have

 @{
        var typedMediaPickerSingle = Model.Content.GetPropertyValue<IPublishedContent>("articleHeaderImage");
        if (typedMediaPickerSingle != null)
        {
            <img src="@Url.ResolveCdn(typedMediaPickerSingle)" />
        }
    }   

this outputs

<img src="https://wmc-hexagon-cdn-endpint.azureedge.net/assets/media/1002/simplecircle.png?rnd=131642048000000000">

[Jeavon]

@Stuart-wmgc I think you should be using the GetCropCdnUrl for this.

e.g.

 @{
        var typedMediaPickerSingle = Model.Content.GetPropertyValue<IPublishedContent>("articleHeaderImage");
        if (typedMediaPickerSingle != null)
        {
            <img src="@Url.GetCropCdnUrl(typedMediaPickerSingle, width:150)" />
        }
    }  

[Stuart-wmgc]

@Jeavon Thanks for this, I have been doing some playing around today and have found that both

<img src="@Url.GetCropCdnUrl(Umbraco.TypedMedia(typedMediaPickerSingle.Id))" />

and

<img src="@Url.GetCropCdnUrl(typedMediaPickerSingle)" />

both output a url like https://wmgc-hexagon.azurewebsites.net/media/1001/simplecircle.png?anchor=center&mode=crop&rnd=131643071610000000 which looks wrong as I was expecting to see the CDN url.

However, the images is displayed and in fiddler you can see a connection to the CDN, also in the Back Office under AzureCDNToolkit: Cached Image Path Status you can see the Cache URL so I think it is working as it should, just not quite how I - as someone whoes never used it before - expected.

[Jeavon]

Give it a try with a width parameter?

<img src="@Url.GetCropCdnUrl(typedMediaPickerSingle, width:150)" />

[ed-parry]

I'm seeing the same issue as the original comment - when just using @Url.GetCdnUrl() for a media item, it prepends the asset container name as well. Using @Url.GetCropCdnUrl does appear to be more in-line, but the standard GetCdnUrl doesn't look to be giving the expected results here.

[ed-parry]

Any updates available here? Using Url.GetCdnUrl() to fetch the URL of a PDF stored in /media. The call returns with the assets container in the middle, giving me something like /site/media/file.pdf rather than /media/file.pdf, where site is my asset container. Changing the asset parameter just gives me a relative link to the file itself, without the full CDN URL.

[Jeavon]

@ed-parry A PDF stored as Media should not use GetCdnUrl, instead you should use ResolveCdn

e.g.

<a href="@Url.ResolveCdn(Umbraco.TypedMedia(1081))">Download PDF</a>

[ed-parry]

Sorry, @Jeavon - we are using Url.ResolveCdn, but it does as above and appends the asset container even though it's a media item.

[wroughtec]

I am also seeing the same issue the Url.GetCropCdnUrl is getting the blob storage url rather than using the CDN url (even when I use the cdn url in all the settings):

@{
    int i = 0;
    var image = Model.GetPropertyValue<IPublishedContent>("image");
    var imageWidths = (int[])ViewData["imageWidths"];
    var breakpoints = new string[]
    {
      "min-width: 1504px",
      "min-width: 1200px",
      "min-width: 1024px",
      "min-width: 768px",
      "min-width: 560px",
      "min-width: 320px",
      "max-width: 319px"
    };
}
@if (image != null)
{
  <picture>
    @if (imageWidths != null)
    {
      foreach (var breakpoint in (dynamic)breakpoints) {
        int imageWidth = @imageWidths[i];
        <source srcset="@Url.GetCropCdnUrl(image, width: @imageWidth)" media="(@breakpoint)">
        i++;
      }
    }
    <img src="@Url.GetCropCdnUrl(image)">
  </picture>
}

which gives:

<picture>
  <source srcset="https://*.blob.core.windows.net/cloudcache/3/4/f/1/b/7/34f1b750bb6935c6b21d6c5e33c9f20ef67d6602.png" media="(min-width: 1504px)">
  <source srcset="https://*.blob.core.windows.net/cloudcache/3/4/f/1/b/7/34f1b750bb6935c6b21d6c5e33c9f20ef67d6602.png" media="(min-width: 1200px)">
  <source srcset="https://*.blob.core.windows.net/cloudcache/e/f/e/2/e/f/efe2ef45c5640f075ebc5e865169659553c30cdd.png" media="(min-width: 1024px)">
  <source srcset="https://*.blob.core.windows.net/cloudcache/3/3/c/7/b/f/33c7bfdaa50405bf68307d3e9719e1ea5f4fc6c7.png" media="(min-width: 768px)">
  <source srcset="https://*.blob.core.windows.net/cloudcache/3/3/c/7/b/f/33c7bfdaa50405bf68307d3e9719e1ea5f4fc6c7.png" media="(min-width: 560px)">
  <source srcset="https://*.blob.core.windows.net/cloudcache/e/a/6/b/f/f/ea6bff5b4bba37f36eee92e1379cb468029c694a.png" media="(min-width: 320px)">
  <source srcset="https://*.blob.core.windows.net/cloudcache/8/3/9/4/e/c/8394ecf4026c9707a0bb0f5d8c26a6399c67bacc.png" media="(max-width: 319px)">
  <img src="https://*.blob.core.windows.net/cloudcache/6/1/6/1/0/1/6161014c69b03521cea6cbdcf25f7dd8cd465789.png">
</picture>

rather than:

<picture>
  <source srcset="https://*.cdnurl.com/cloudcache/3/4/f/1/b/7/34f1b750bb6935c6b21d6c5e33c9f20ef67d6602.png" media="(min-width: 1504px)">
  <source srcset="https://*.cdnurl.com/cloudcache/3/4/f/1/b/7/34f1b750bb6935c6b21d6c5e33c9f20ef67d6602.png" media="(min-width: 1200px)">
  <source srcset="https://*.cdnurl.com/cloudcache/e/f/e/2/e/f/efe2ef45c5640f075ebc5e865169659553c30cdd.png" media="(min-width: 1024px)">
  <source srcset="https://*.cdnurl.com/cloudcache/3/3/c/7/b/f/33c7bfdaa50405bf68307d3e9719e1ea5f4fc6c7.png" media="(min-width: 768px)">
  <source srcset="https://*.cdnurl.com/cloudcache/3/3/c/7/b/f/33c7bfdaa50405bf68307d3e9719e1ea5f4fc6c7.png" media="(min-width: 560px)">
  <source srcset="https://*.cdnurl.com/cloudcache/e/a/6/b/f/f/ea6bff5b4bba37f36eee92e1379cb468029c694a.png" media="(min-width: 320px)">
  <source srcset="https://*.cdnurl.com/cloudcache/8/3/9/4/e/c/8394ecf4026c9707a0bb0f5d8c26a6399c67bacc.png" media="(max-width: 319px)">
  <img src="https://*.cdnurl.com/cloudcache/6/1/6/1/0/1/6161014c69b03521cea6cbdcf25f7dd8cd465789.png">
</picture>

[wroughtec]

Ah when deployed it points to the CDN only on localhost does it point to the blob storage :)

[quinlandm]

Hi all, I'm seeing paths being constructed as follows..

<img src="@Url.ResolveCdn(image)" alt="@altText" />

renders

.azureedge.net/assets//media/4379/t

I was expecting azureedge.net/media/4379 etc..

I understand if I need assets/media .. it's not a big problem, but the extra /... where is that coming from?

David

[quinlandm]

update! tweaked to access images using Model.GetPropertyValue<IPublishedContent> and // has been removed, still prefixing with assets ...

[idseefeld]

Hi @quinlandm, I'll like to explain how Url.ResolveCdn and Url.GetCropCdnUrl work: Good news first - both of them work properly with latest prerelease 0.1.2-beta. (You need to Update .Core manually!) I have tested Umbraco version 7.12.3.

Now let me explain:

1. For content images maintained in Media section and picked with e.g. MediaPicker you can use:

   var img = Model.Content.GetPropertyValue<Image>("image");
   <img src="@Url.GetCropCdnUrl(img)" alt="@img.Name" />

   You do not have to care about images within rich text editors. Umbraco's / AzureCDNToolkit's internal resolvers take care of these.

2. For content files e.g. PDFs, ZIPs etc. for download and again picked with e.g. MediaPicker you can use:

   var file = Model.Content.GetPropertyValue<Umbraco.Web.PublishedContentModels.File>("file");
   <a href="@Url.ResolveCdn(file)" target="_blank">Dowload File: @file.Name</a>

3. Static design files (so called assets) have to be uploaded to your Azure blob storage named 'assets'. The 'assets' blob is the root for these kind of files, which you do NOT maintain via Umbraco! Use @Url.ResolveCdn with their relative (but absolute to root) urls e.g '/css/sytles.css' or '/css/images/backgroung.jpg'. Compared to a full qualified url like 'https://ids-cdn.azureedge.net/assets/css/style.css' which you can use in your templates of course, this approach has the advantage of one single configuration change in case you move Azure Storage. Additionaly cachebuster parameter is added and we get: https://ids-cdn.azureedge.net/assets/css/style.css?v=0.0.1 from @Url.ResolveCdn("/css/style.css")

I guess the assets stuff has caused the confusion(?)

Yours Dirk

[quinlandm]

Hi,

Thanks for this, I understand now. However, I'm still hitting issues, files are not being served from my CDN from GetCroppedCdnUrl - exception below..

[MissingMethodException: Method not found: 'System.String ImageProcessor.Web.Helpers.ImageHelpers.GetExtension(System.String, System.String)'.] ImageProcessor.Web.Plugins.AzureBlobCache.<CreateCachedFileNameAsync>d__24.MoveNext() +0 System.Runtime.CompilerServices.AsyncTaskMethodBuilder1.Start(TStateMachine& stateMachine) +61 ImageProcessor.Web.Plugins.AzureBlobCache.AzureBlobCache.CreateCachedFileNameAsync() +110 ImageProcessor.Web.Plugins.AzureBlobCache.<IsNewOrUpdatedAsync>d2.MoveNext() +73 System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task) +99 System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task) +58 System.Runtime.CompilerServices.TaskAwaiter.ValidateEnd(Task task) +25 ImageProcessor.Web.HttpModules.<ProcessImageAsync>d34.MoveNext() +1867 System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task) +99 System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task) +58 System.Web.TaskAsyncHelper.EndTask(IAsyncResult ar) +71 System.Web.AsyncEventExecutionStep.System.Web.HttpApplication.IExecutionStep.Execute() +380 System.Web.HttpApplication.ExecuteStepImpl(IExecutionStep step) +48 System.Web.HttpApplication.ExecuteStep(IExecutionStep step, Boolean& completedSynchronously) +159 `

all images showing 500 ERROR Prior to this error, exceptions were related to being unable to parse storage connect string.

Any ideas?

Thanks,

David

[idseefeld]

Hm, the error message comes from another package: ImageProcessor.Web. Are you sure you are using the latest version of this? Have you checked all related configurations? ~\Web.config, ~\config\FileSystemProviders.config, ~\config\imageprocessor\cache.config and ~\config\imageprocessor\security.config need to be checked. You'll find all details on http://imageprocessor.org/.

[quinlandm]

@idseefeld thanks! that worked right out of the box! after setting my Azure connection and other config.

Maybe it's my way of working, step by step wanting to understand each individual component and it's impact on the site is getting in the way. The instructions to implement this plugin seem to be "big bang" and maybe a bit sunny day scenario... :) I want to control risk and understand impact before I push this to my clients site. However, trying to be mindful not to be to critical of developers of these useful plugins that at end of day, make our lives somewhat easier... :)

[idseefeld]

:) Indeed the setup of all this related packages is quite complex.

[idseefeld]

I guess this could be closed now - couldn't it?

[quinlandm]

yes, thanks.

[JamieTownsend84]

I am having the same issues with a MP4 file, am I doing something wrong?

var videoSource = Model.Content.GetPropertyValue<ContentModels.File>("mainPageVideo"); @Url.ResolveCdn(videoSource)

This then resolves

CDNURL/assets/media/1127/video.mp4?rnd=131925736920000000)

Should be

CDNURL/media/1127/video.mp4?rnd=131925736920000000)

Many thanks for this package, all other images/assets are working great

[AstuteMediaDev]

I can confirm we're also seeing what @UnitStack has described with an mp4 file.

We've had to do an ugly string replace to remove the /assets path prefix.