Setting CMS link text as slug or full url

I realize this is an unusual question, but I’d like to create a page with a list of all my collection item urls. When I add a collection list and turn the items into links, I don’t see the option to display the full url or slug as the link text (screenshot attached). I can only set the link text as the CMS item name.

Is there a way to display the full url or a cms item? Custom code?

Hi @maxjoles ,

I’m not a coder, but I did think of a basic workaround.

If you don’t have a lot of CMS items, then you could add a link field to the collection and copy-paste the URL/slug to it and display that.

Hope this helps! :slight_smile:

That’s a solid thought, but I need a solution for hundreds of collection items :frowning:

2 Likes

The display url is not a value you can select for the anchor text with CMS binding; so the only way would be to use JavaScript to replace the anchor text with the destination URL. That’s custom code albeit not a lot of it.

Thanks Jeff. Any chance you can provide guidance on how to do that with javascript?

Hi Max,
Another solution would be to use an Embed element.

Add an Embed inside of the Collection Item element on your page. Paste in the following code:
<a href="/sample-items/{{wf {&quot;path&quot;:&quot;slug&quot;,&quot;type&quot;:&quot;PlainText&quot;} }}">/sample-items/{{wf {&quot;path&quot;:&quot;slug&quot;,&quot;type&quot;:&quot;PlainText&quot;} }}</a>

Replace sample-items (in both places) with your Collection Url. You can get this value from your collection settings:
Screen Shot 2019-12-17 at 11.21.30 AM

Note that the link will only work on your published site, not in the editor preview.

7 Likes

Example

<script>
$(function() {
  $(".link").each(function(i, e) {
    $(e).text($(e).attr("href"));
  });
});
</script>
1 Like

This is perfect. Exactly what I needed! Thanks Chris!

This is awsome just what i was looking for too. However how to i change the styling of the slug?

doesnt matter fixed it, i just removed the link and its all good

Works a treat, thanks Chris.

Chris, if we add w-inline-block i think it could be visible in the editor mode