How can I make a link field in a Webflow collection accept a relative path?
To make a link field in a Webflow collection accept a relative path, follow these steps:
Add a Link field to your collection: In the Webflow Designer, go to the Collections tab and click on the collection you want to modify. Click on the "+ Add Field" button and choose "Link" from the field types. Give the field a name.
Set the field value to accept a relative path: By default, Webflow's Link field only accepts absolute URLs. To allow relative paths, we need to utilize a custom attribute.
- Double-click on the Link field to edit its settings.
- Add a custom attribute named "data-wf-template" to the field.
- Set the value of the custom attribute to
{{slug}}, which represents the slug of the collection item. This will create a relative path link that will be dynamically generated based on the item's slug.
Connect the Link field to an element on your collection template: In your collection template page, select the element (e.g., text or button) that you want to link using the new field. In the settings panel, go to the Link field options and select the Link field you created in the collection.
- If you're using a text link, you can use the "Link Text" field to define the text to be displayed as the link.
- If you're using a button, you can style it as desired and the text inside the button will automatically be pulled from the Link field value.
Publish and test: Publish your Webflow project and test the link. When you create or update an item in the collection, the link field will generate a relative path based on the slug, allowing for dynamic and relative linking.
By following these steps, you can make a link field in a Webflow collection accept a relative path.
Additional questions:
- How do I create a relative path link in a Webflow collection?
- Can I set dynamic links using relative paths in Webflow?
- Is it possible to generate relative links in a Webflow collection based on item slugs?
