I am attempting to get Cloudinary product galleries integrated with the CMS on a test site but really struggling to dynamically insert everything that is needed from the CMS into the code.
To explain further:
Every instance of the Cloudinary product gallery requires a few things:
A script with:
a unique ID gallery ID - I have used the ‘add field’ function to insert this from CMS into a HTML embed, so have carried this out successfully.
A list of media - I am currently using placeholders called ‘atol’ and collage’ for every collection item but need this to be driven by the CMS, since I need a different list for every collection item.
A separate DIV with the same unique ID as referenced in script
But unfortunately I cannot assign the DIV with an ID which is driven by the CMS.
Assistance very much appreciated!
Here is my public share link: LINK
@Nicknak - just kind of shooting from the hip here, but could you create a CMS field to hold the ID, insert that field on the layout and hide it from view and then use some jQuery to find that value, and assign the value to the ID of the parent element?
Would probably be pretty simple jQuery to do that - I’m just not 100% sure I’m understanding the issue.
I’ve actually just managed to solve the unique ID DIV issue. I simply nested another DIV inside the embed element which then gave me the functionality to add in a dynamic field onto the div tag which seems to be working.
I guess my only concern with this is speed optimisation. With this solution is sounds like the loading process will look something like:
- Load CMS data
- Run jQuery which inserts media values into Cloudinary script
- Run Cloudinary script
Might not be a big issue though…I’m not an expert in speed optimisation but know that scripting can be factor so am a little wary. But sounds like a very promising workaround (thank you so much!) unless anyone knows of a better way?