Multiple Templates for Collections / Custom Pages for Collection Posts

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:

  1. In the designer click on the settings for your collection and add a Link Field.
  2. 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
  1. 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>
  1. 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>

:grinning: 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!

3 Likes

Hmm interesting workaround :smiley: thanks for sharing

I abandoned Webflow’s CMS because it was too hard to work with Rich Text Elements to customize blog post content – I’m glad to see this solution!

(For the record, I haven’t found any CMS that allows you to customize dynamic blog post content to the extent that I need – this isn’t a limitation particular to Webflow.)

2 posts were split to a new topic: Invision over quota

Hi, I like this work around a lot Torin and thank you for posting it. I’m also wondering if re-directing your collection page to another non-collection page (styled of course to interact seamlessly as a virtual collection page) might be another way to accomplish this without iframes?

Anyway thanks!