I created a portfolio website using CMS and wanted to make an interactive page for one of my projects that extended the template, but webflow only allows 1 template for collections. I also wanted the project to still use the /projects/project_name rout and the data associated with my Projects collection so that I could display a dynamic list of projects.
My solution allows you to simply add a url in your CMS post that points to another page that you create and design with webflow, which will be rendered with your post. This allows you to add custom html/css designed with webflow on posts that you want to customize, while keeping your collection template clean.
A working example of my solution is available here.
The following takes into account that you have already created a collection and a post:
- In the designer click on the settings for your collection and add a Link Field.
- Navigate to your collection and drag and drop a Link Block into the document.
- Give the Link Block a class
- Set its style to Display None
- In the Link Block Settings connect the Link Settings ‘Get URL From:…’ to the link you added to the collection
- Set the ID for in-page-linking to custom-template-link
- You can set the id to what you like, but make sure to change it later in the code inside the html embed element
- Drag an HTML Embed element onto the document, double click on it and add the following code
<script type="text/javascript">
(function() {
var url = document.getElementById('custom-template-link');
if (url.length != 0) {
var iframe = document.createElement('iframe');
iframe = document.createElement('iframe');
iframe.setAttribute('src', url);
iframe.setAttribute('onload', 'resizeIframe(this)');
iframe.setAttribute('frameBorder', '0');
iframe.style.width = '100%';
iframe.style.height = '3740px';
document.body.appendChild(iframe);
}
})();
</script>
- Add the following script to your head file in Custom Code so that the iframe resizes after the content is loaded
<script type="text/javascript">
function resizeIframe(obj){
obj.style.height = 0;
obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}
</script>
Now all you need to do to add custom content to your posts is design a new page in webflow and paste the url into the CMS post that you want to add it to.
One draw back that I noticed is that scrolling events are not triggered when using an iframe. If anyone knows of a work around I’d greatly appreciate it!