Streaming live at 10am (PST)

Workaround relative links in CMS

Hello everybody,

Apparently people at Webflow are being very stubborn, and they don’t want to implement relative links in the CMS.

I’m asking for help if someone managed to find any workaround this bug.
I read about the possibility to convert a regular plain text in a relative link using some custom code, but I cannot figure how to make it work.

Any help would be really appreciated :slight_smile:

I’m 100% sure stubbornness has nothing to do with any of the decisions taken by Webflow :slight_smile:

When you place an Embed component in a Collection Page Template or inside of a Collection List, you can add fields as variables. You can access the variables in the top right corner of the Embed dialog.

Oh thanks Vincent, I didn’t think about it.

So basically I have to replace the link buttons or link boxes with embedded components.
Writing within them a html relative link, and overwriting it with a field text from the CMS.
Am I right?

Well, I understand they probably have priorities, but they allow you relative linking in the designer interface, but don’t inside the CMS. It does’t make sense to me.

Btw, do you know how to get the homepage by relative link? I tried using /home#element-id but it doesn’t work.

Thanks

I actually just found out that you can link relatively to the homepage just with “/”
So to autoscroll to a specific element id from another page: “/#element-id

I fixed this with JS, maybe it will be helpful to someone else. I added an embed inside the link block and wrote in a div with class=“relative-link”>

<script>
let caseStudyLinks = document.querySelectorAll('.relative-link');

caseStudyLinks.forEach(link => {
	link.closest('.link-block').href = link.innerText;
});

</script>

Same problem here, and since Webflow doesn’t seem to want to do that here’s a quick workaround using a global javascript without the use of embeds.

  1. Add on the link collection item an attribute : replace-host and value true

  2. In the project settings, go to “Custom Code” and add the following code :

<script>
  // Replace production domain names with current staging 
  // domain in all the links with the "replace-host" attribute.
 
  $(document).ready(function() {
    $('a[replace-host="true"]').each(function(){
      	var old_url = $(this).attr('href');
      	var new_url = new URL(old_url);
      	new_url.hostname = document.location.hostname;
      	$(this).attr('href', new_url.href)
	});
  });
</script>

This way, in your CMS data you can always use the real production absolute links, but you will be able to navigate normally the website in staging under any other domain name. Keep in mind that this will not affect your SEO nor navigation in production domain since it will be replaced with itself. (you can remove the code when in production too.)

Hope it will help.