Path to image isn't correct when using .less & CDN

We have a simple widget that contains a .less file for the styles.

WIDGET CONTENT

$core_v2_page.AddLink('stylesheet', $core_v2_widget.GetExecutedFileUrl('style.less'), "%{ Position = 'AfterTheme' }")

<div class="e14-ranked-locked-icon"></div>

WIDGET .LESS FILE (style.less)

.e14-ranked-locked-icon {
    width: 8px;
    height: 11px;
    float: right;
    margin-right: 8px;
    margin-top: -30px;
    background: url(/cfs-file/__key/e14core/images-icons/small_2D00_gray_2D00_padlock.png) no-repeat 0 0;
}

Our platform is using the CDN setting like this;

<?xml version="1.0"?>
<Overrides>
 <Override xpath="/CommunityServer/CentralizedFileStorage/fileStoreGroup[@name='default']" mode="remove" /> 
 <Override xpath="/CommunityServer/CentralizedFileStorage" mode="add" where="end">
  <fileStoreGroup name="Azure"
      default="true" 
      type="Telligent.Evolution.Azure.Filestorage.AzureBlobFilestorageProvider, Telligent.Evolution.Azure.Filestorage"
	  cdnUrl="https://mysite-storage.mydomain.com"
	  maximumSecureFileAccessDays="7"
      minimumSecureFileAccessHours="2"
      />
 </Override>    
</Overrides>

When the widget renders, the domain for the image file is getting rewritten to the -storage CDN domain, however the path to the file is then invalid so it 404s, i.e.

https://mysite-storage.mydomain.com/cfs-file/__key/e14core/images-icons/small_2D00_gray_2D00_padlock.png

If we simply put a <style> block inside the widget content, it doesn't rewrite the URL & everything works as expected.

How can we reference files from the .less which are in our CFS without them breaking like this?

Thanks,

Matt.

Top Replies

Parents

0 Steven Heffner over 2 years ago

I'm not sure I understand, as those settings are producing what seems to be the expected result - you've configured Azure for your filestorage, and it's looking there for the file. What is the actual valid url for the file?
Cancel
Vote Up 0 Vote Down

Sign in to reply

Verify Answer

Cancel
0 Matt over 2 years ago in reply to Steven Heffner
That's right.. Azure is used for filestorage, so the 'cfs-file' part of the URL doesn't match any 'container' in the storage account.. the container is called 'e14core' (the name of our custom CFS).

The correct URL would be;

https://mysite-storage.mydomain.com/e14core/images/icons/small-gray-padlock.png

So this goes to the correct container, and un-encodes the _2D00_ back to a dash like the file has on disk, and also has the correct sub-path (images/icons).
Cancel
Vote Up 0 Vote Down

Sign in to reply

Verify Answer

Cancel
+1 Steven Heffner over 2 years ago in reply to Matt

After further investigation, what I initially suggested is not possible. I've removed that reply.

Community does not support CDNs in any released version. The current implementation of Azure CDN support does not work with stylesheets. The workaround is to disable CDN for file stores that contain stylesheets.

Our upcoming version 12.1 adds CDN support, and what you are attempting would be possible there. I've also logged a bug to investigate possible resolutions of the issue in the current implementation of Azure CDN.

TE-17105: [Azure] CDN Url implementation does not work for files that reference other files (like stylesheets)
Declined as "Working As Designed":
Files should be embedded in specific widgets and referenced using -evo-widgetfile-url LESS function.
Cancel
Vote Up +1 Vote Down

Sign in to reply

Verify Answer

Reject Answer

Cancel

Reply

+1 Steven Heffner over 2 years ago in reply to Matt

After further investigation, what I initially suggested is not possible. I've removed that reply.

Community does not support CDNs in any released version. The current implementation of Azure CDN support does not work with stylesheets. The workaround is to disable CDN for file stores that contain stylesheets.

Our upcoming version 12.1 adds CDN support, and what you are attempting would be possible there. I've also logged a bug to investigate possible resolutions of the issue in the current implementation of Azure CDN.

TE-17105: [Azure] CDN Url implementation does not work for files that reference other files (like stylesheets)
Declined as "Working As Designed":
Files should be embedded in specific widgets and referenced using -evo-widgetfile-url LESS function.
Cancel
Vote Up +1 Vote Down

Sign in to reply

Verify Answer

Reject Answer

Cancel

Children

0 Matt over 2 years ago in reply to Steven Heffner

Thanks for coming back to this, even if it doesn't solve it. We'll work around the problem for now.
Cancel
Vote Up 0 Vote Down

Sign in to reply

Verify Answer

Cancel
0 Steven Heffner over 2 years ago in reply to Matt
I'm looping back again with another option to work around this issue.

Rather than storing the file in another filestore, you could embed the file within the widget (Upload Attachment) and then use the -evo-widgetfile-url LESS function to reference the file.

.e14-ranked-locked-icon { width: 8px; height: 11px; float: right; margin-right: 8px; margin-top: -30px; background: url(-evo-widgetfile-url("small_2D00_gray_2D00_padlock.png")) no-repeat 0 0; }
Cancel
Vote Up 0 Vote Down

Sign in to reply

Verify Answer

Cancel
0 Matt over 2 years ago in reply to Steven Heffner

Thanks for the suggestion, but we'd prefer to put assets like this in the filestore, since they'll be used across more than 1 widget. I can see this approach working fine for some folks, so it's good to highlight it here
Cancel
Vote Up 0 Vote Down

Sign in to reply

Verify Answer

Cancel
+1 Patrick M. over 2 years ago in reply to Matt

To clarify this, the use of this function is the required approach, not a work around. Referencing of physical files using the function and embedding the file in the widget is how the system should work as the widget is a portable container.
Cancel
Vote Up +1 Vote Down

Sign in to reply

Verify Answer

Reject Answer

Cancel
0 Matt over 2 years ago in reply to Patrick M.

Could you confirm that in 12.1 (which adds CDN support), I'd be able to reference an image in the CFS as per my original post (see code examples).
Cancel
Vote Up 0 Vote Down

Sign in to reply

Verify Answer

Cancel

Path to image isn't correct when using .less & CDN

Top Replies

TE-17105: [Azure] CDN Url implementation does not work for files that reference other files (like stylesheets)

TE-17105: [Azure] CDN Url implementation does not work for files that reference other files (like stylesheets)