Load cms item based on URL parameter?

Design help CMS
1

Hello everyone,

I’m using Webflow’s University to learn things as I really love the layout and design of that section.
One thing I’m very curious about is on any of the course pages such as: CSS layout & positioning | Webflow University
You’ll notice that be default, it opens a course summary page, but once you click on a video it takes you to the same page URL with an added parameter (CSS layout & positioning | Webflow University) but now a specific video loads (from the CMS I assume) and the page layout also slightly changes. Also the clicked lesson becomes highlighted.

How can I load specific CMS content based on page URL parameters (as well as highlighting button clicked)?

Upon inspecting the page, I noticed that each lesson button has data-vid-url attribute pointing to the video file (which I assume is tagged via custom code, as I don’t think Webflow allows setting dynamic attributes for CMS items). So could it be that custom code is used to read URL parameter, go through all links to check which data-vid-url ends with the same parameter, load that video, and somehow update “About this lesson” section with content of that CMS?

2

Hey Ala,

i was a little intrigued with your question, turns out your process is nearly correct!

university.js encapsulates the main logic here, have a look at it (formatted) in the devtools.

However, the raw original document comes already with the data-vid-url attr defined on the playlist links before js even kicks in… Maybe WF has some secret admin powers :D?