▼
Streaming live at 10am (PST)

Python script to embed dynamic lists in exported code


#1

I really enjoy using dynamic collections to build static sites. For example, on a "Team" page there are many team members. It's easy to manage team members via the dynamic collection UI, and style them once using a dynamic list. It is WAY easier for prototyping than copying/pasting elements because to make visual changes you can just make them once and they are updated for all collection items. However, when I export the site as static assets these dynamic lists are sadly gone.

I'm not the only one that enjoys this workflow, e.g.

I've built a Python script that replaces the sad, empty lists on your exported code with the content of your published site, so that this workflow can be accomplished. It doesn't export links to collection pages for individual items in a collection (although it is 100% possible), so any links to collection pages will be broken. But if you use it like I do, where you just use dynamic lists for ease of use and organizing content, this should suit you fine.

Here is an example site I've set up:
http://noahs-exceptional-site.webflow.io

Here is the share URL:
https://preview.webflow.com/preview/noahs-exceptional-site?preview=b415806649f2fc75484f81d5965df3cd

When I export it, I get this:

Here is an export ZIP of the site:
https://www.dropbox.com/s/hnhkizouldayk77/noahs-exceptional-site.webflow.zip?dl=0

Here is the Python script:
https://github.com/nsantorello/webflow-dynamic-list

If you unzip the exported code and open index.html, you'll see that despite the content on my published site, what Webflow exports is blank:

If you save the webflow-dynamic-list.py script inside the unzipped folder, you can run it like so:
python webflow-dynamic-list.py http://noahs-exceptional-site.webflow.io

The URL you pass in tells the script where to fetch the dynamic data from, so obviously your site should have the latest content published. Don't forget to swap out my site URL above in the command for your own. This also works with password-protected sites.

The script should run and inject the dynamic content into your local files:

After that, if you re-open index.html you'll see the site has your dynamic content!

So the script is pretty basic in that it only handles images, background images, and text. It doesn't handle collection detail templates (but again, 100% possible). But even with this alone it's managed to be very handy and makes Webflow a lot more useful to me!


#2

Wow, I think you just sufficiently hacked the CMS more than anyone! Honestly, being a novice at code, this is a bit like japanese to me, maybe I just need to sit down and try it. Nice work! I'd really like to see some kind of workaround to get the full functionality since I did plan on building my portfolio using dynamic pages along with the lists.


#3

@DFink Thanks for the feedback. I've enabled preliminary support for dynamic pages in the script (I had it working before privately but have cleaned it up a little). It's crude, but it works. I've updated the script on Github.

Open your collection template page:

After styling it, select the node that contains all of your dynamic content as low in the view hierarchy as possible, and apply the class "Exported Dynamic Content" to it. You can see an example of this in my demo project linked to above.

(By tagging the node with this class, you are telling the script "everything inside of this node should be copied from the published website.")

Now in Webflow you can set links on your dynamic content and the script will generate pages for each one, and patch your links in the code accordingly:

Here is my webflow site--I've updated the example site so you can click on the images to bring you to a dynamic content page:
http://noahs-exceptional-site.webflow.io/

And here is that same site exported from Webflow, processed with the script, and then uploaded to my own website:
http://seeddevs.com/webflow-dynamic/

Lastly, here are links to zips of the exported code before and after processing with the script, so you can see for comparison.
Before: http://seeddevs.com/webflow-dynamic/before-script.zip
After: http://seeddevs.com/webflow-dynamic/after-script.zip

I just want to add that all of this is experimental and not officially supported by Webflow (though we'd love it if it was!). Unfortunately the whole process is slightly technical for now. If there is enough positive response I may take the time to wrap the script in an app that makes it a little easier.


#4

Hi! I've tried download and excecuting the script but it always says "Found 0 dynamic collections", even with your site. After analyzing your code, I see that the github version doesn't check the style "Exported Dynamic Content", it maybe outdated?


#5