This quick and simple demo uses a collection list displayed on the page and loads the full bio from each CMS Item via the CMS Template. It does not cache the data, just simply loads it. The panel on the right gets the injected bio unless the screen is smaller then a tablet. in that case the bio is injected below each collection list item so it is stacked. The layout is one example of a way to do this and there are many. The code is written to leverage jQuery since it's currently loaded on all projects. It is a good starting point if you need something similar. Best way to understand how this works is inspect it in devtools.

Load Team Member Bios from Collection via Ajax

Resource guide for lazy loading implementation via lazysizes and built in browser lazy loading support

wf-images

This project is an example of connecting to an external API from a Webflow site to retrieve data and display it on the page.

Retrieving data from an external API - todo list

This site shows how to connect a CMS multi image field to a slider using custom code.

CMS Multi-Image Slider Demo

The site used in the playlist https://www.youtube.com/watch?v=x8OV8UJZWCA&list=PL4TuDUnZkkhx3v4U1zLmEOLEHQfprf-gp

If you clone this then head to the site wide settings and update the Firebase project IDs to match yours.

Jeff Webdev

Skills