Safe attachment URLs resolution in srcset attribute in Page Builder in Kentico Xperience

In this post, I will provide you with a quick tip on how to fix the attachment URLs resolution in srcset attribute in Page Builder in Kentico Xperience.

Problem

In Page builder, attachment URLs always get resolved in their safe version starting with /cmsctx instead of /getattachment when used in the src attribute of an img tag for example.

Regrettably, this is not the case when the attachment URL is used in the srcset attribute of a source tag inside the picture tag.

This becomes a problem when the attachment is attached to a page that is unpublished and you try to load the image in a Page builder. URLs starting with /getattachment response with 404 which is wrong.  While URLs starting with /cmsctx response with 200 which is correct.

Solution

I spoke to Kentico support and they recognized that as a bug. However, the fix would not be easy and there is a workaround that works just fine. So it won't be fixed in a hotfix. Instead, they advised me to wrap my attachment URLs in the following method in my .cshtml files:

@Url.Kentico().AuthenticateUrlRaw(attachment_url)

So, in the end, you would end up with code like this:

<picture>
    <source media="(max-width: 480px)" srcset="@Url.Kentico().AuthenticateUrlRaw(Model.SmallImageUrl)">
    <source media="(min-width: 481px)" srcset="@Url.Kentico().AuthenticateUrlRaw(Model.MediumLargeImageUrl)">
    <img src="@Model.MediumLargeImageUrl" alt="@Model.Alt">
</picture>