Update the output URL for a webpage preview

An output URL is the URL your SSG outputs your files to during a Site build. CloudCannon automatically determines the output URL to match a webpage preview to a file for the Visual Editor and screenshots in the Collection Browser.

If CloudCannon has incorrectly determined your output URL, you can specify the output URL for each Collection using a template string.

To update the output URL CloudCannon uses to match a webpage preview to a file:

1. Navigate to the Collection for which you want to update the webpage previews CloudCannon uses.
2. Turn on Configuration Mode using the switch on the right of the Site Header. Purple Edit Configuration buttons will appear in the Collection Browser.
3. Click the Edit Advanced in the top right of the Collection Browser. CloudCannon will open the Edit Advanced data panel.
4. Identify the URL text field and enter the template string for the correct output URL.
5. Save the change to your Site.

CloudCannon will automatically update which webpage previews it uses for that Collection.

Template string placeholders#

You can use a template string to define the correct output URL for webpage previews in a Collection. Template strings allow you to use placeholders as well as plain text.

You can use fixed or data placeholders, and filters to modify the value of data placeholders, allowing you to reference structured data from your files to create the correct URL format.

Fixed placeholders#

The following fixed placeholders are available for your output URL template string:

• [filename] — Populated by the original filename including the file extension.
• [slug] — Populated by the original filename excluding the file extension. If the filename is "index", this will result in an empty string.
• [relative_path] — Populated by the original file name including the file extension, relative to the Collection path.
• [relative_base_path] — Populated by the original file name excluding the file extension, relative to the Collection path.
• [full_slug] — An alias for the template path [relative_base_path]/[slug].
• [path] — Populated by the original file name including the file extension, relative to your Site source.
• [base_path] — Populated by the original file name excluding the file extension, relative to your Site source.
• [collection] — Populated by the key for the Collection to which the file belongs.
• [ext] — Populated by the last file extension in the original file path.

Let's go through an example.

The url template string /[relative_bath_path]/[slug]/ for our "Pages" Collection will resolve to the following output URLs:

• The file /pages/index.md becomes the output URL / (e.g., a Home landing page).
• The file /pages/about.md becomes the output URL /about.
• The file /pages/contact/index.md becomes the output URL /contact/.
• The file /pages/contact/book-an-appointment.md becomes the output URL /contact/book-an-appointment

Data placeholders#

You can reference any front matter field from your file in your output URL template string by using the key name in curly brackets (e.g., {key}).

You can also apply filters to your data placeholders by using the | character after your front matter key name, followed by the name of the filter.

Let's go through an example.

The url template string /news/{date|year}/{date|month}-{date|day}_{title|slugify}/ for our "News" Collection will resolve to the following output URLs:

• The file /news/our-next-feature.md with the front matter fields title: Our next feature! and date:05/11/2026 becomes the output URL /2026/05-11_our-next-feature.

For a complete list of filters available for data placeholders in your output URL template string, please read our documentation on template strings.