Ok I have to try on my own because I can’t on your site.
So let’s try.
I add a Text field for the Soundcloud Playlists ID. Not the full code, just the playlist ID.
I grab the embed code from Soundcloud playlists, compare them and identify what’s changing between them. What’s unique is only the part in bold. That’s the ID of the playlist. All the rest of the code is the embeded player.
So I grab the IDs and add them to my CMS item Soundcloud ID field.
I do that for all my items. It’s clean, I only have the minimum, relevant data.
Now I grab any of the entire embed code and copy it.
I go to my CMS Template Page and add a Custom Code Component. I paste my entire embed code inside it. I ignore the warning yellow message because for some reason it’s almost always there even if a code is very correct.
Now I select in the code the part that we identified before, the part that’s unique, the ID of the playlist. With the ID selected, I click on the
+Add Fieldpurple link on the top right of the dialog, and select my
Soundcloud Playlist ID field
I end up with a dynamic code where the dynamic part is only the playlist ID, not the entire embed code. So that if I want to modify the code later, dimensions, colors, etc, it will apply to all the player. Never place the entire embed code of anything in a CMS item.
Now if it works it should work right away in the designer, fingers crosed, let’s click on Save & Close…
It works! (wow a bellybutton…)
Let’s cycle between CMS items to see if playlists change like they should
They do. Let’s publish and see…
Works like a charm!
Now I honestly don’t really know why your method don’t work. It should, even if it’s a bad practice. But as the good practice works fine, do we care?
Most of the time, the ID of playlists, albums etc are right in the URL, like for Flickr albums etc. On Soundcloud you’re still obliged to open the embeded code box and locate the playlist ID, but that’s how it is and it’s a minor inconvenience.
As I said before, let’s try to modify the look of our player. Let’s look at the code again
height is a little narrow isn’t it?
Let’s increase that value to 500px
Hey that girl has a face now! Much better. What else? What’s that color? Could it be controlled? Could it be… the color of the label logo?
Let’s add a color field to the Label collection and define the label color for each item.
All the colors are now defined:
back to the custom code component, let’s replace the color code with the color field.
Let’s test on our three label’s CMS items… Ok, we broke it, it doesn’t work anymore, because Webflow is adding the # character to the color. Le’ts change the color field to a text field then
And update the data
Let’s update the custom code
Will it blend?
It does! The play button of the playlist is now of the color of the label’s logo
We could go on and one with customization of that code, by either changing static things, like the height of the player, or making dynamic changes, like we just did by adding a color field to our collection.