How to create dynamic anchors (content menu links) within each CMS Collection item (blog post)?

Hello!

I’d appreciate any suggestion/help regarding the following:

I’m trying to create a dynamic content menu within each cms collection item (blog post). Meaning, dynamically connect sections withing the post to the anchors/links in the content menu.

I’ve tried to use F’in sweet guide for anchors but with inserting html embed into separate rich text field within the collection item (blog post collection item) to achieve this.

But, of course, it doesn’t work. Because I don’t know what I’m doing with the code.

I wonder if there’s a better or more efficient way to achieve this?

Not sure if it works for blog posts too but you can copy the elements used for this progress bar - the progress bar has anchor links for on-page cms items.

Here’s the link (clone able): https://preview.webflow.com/preview/dynamic-collection-progressbar?utm_medium=preview_link&utm_source=dashboard&utm_content=dynamic-collection-progressbar&preview=7da505203efd6606ee3fe14581758765&mode=preview

Hope this works.

Cheers,

Lucas

1 Like

Thank you very much Lucas!

It’s just that I need the anchor’s names in the menu to be dynamically updated depending on the section-name INSIDE the cms item that I’ve assigned using separate text fields.

Not sure if that make sense. I’m almost at the point of giving up on this for now.

@Finsweet has a great tool that may work out for you—just keep in mind it will require a light amount of custom code but they walk you through everything to get it setup:

https://cmsdocs.webflow.io/anchor

Hi @pavelkotlykov,

I might misunderstand your concern, but definitely here to help out any way! Could you please share your read only link so I can see what you’ve made so far, and take it from there.

Thank you @egenix

So far, I’ve tried to mimic F’insweet dynamic anchoring guidelines but implemented within individual cms item.

CMS collection (blog posts). I’ve created separate rich text fields for this collection (to divide the blog post in sections). I’ve inserted html embed into each rich text field with the code that mimics F’insweet code for each section.

[Here’s published site with blog post page opened] (https://vertigo-511529.webflow.io/post/what-is-vertigo#text-1)

[Here’s the the read-only share] (https://preview.webflow.com/preview/vertigo-511529?utm_medium=preview_link&utm_source=dashboard&utm_content=vertigo-511529&preview=27fe3f23444f0027c88a6332ef9c6f95&mode=preview)

@mikeyevin thank you.

That’s exactly what I was using before realizing that it doesn’t work for individual cms item. Meaning, I don’t know how to create dynamic anchors for sections within each cms item.

I’ve tried to create rich text fields with html embed for each cms item to create sections with id’s that I manually apply. But it doesn’t work.

Hi @pavelkotlykov,

I managed to get it working in your current project using F’in Sweet technique. You were only a few steps away from it!

1940

Here’s what I did

  1. Copy F’in sweet CMS library for Webflow and paste it before tag of the CMS page

     <script>
     // immediately/self invoked function. This function executes right away
     (function() {
       // create a new Library instance and store it in a variable called "fsAnchor"
       var fsAnchor= new FsLibrary('.anchor-data-feed')  // Class of your CMS collection list
    
       // run anchor on our instance
       fsAnchor.anchor({
         anchorButton: ".anchor-link-button",  // class of the button that will be put in buttonsTarget
         anchorId: ".anchor-url-and-section-id",  // class of the href #section this anchor button will scroll to
         buttonsTarget: ".anchor-put-links-in-here",  // class of the div to place the anchorButton
         activeClass: "active-link" // class of the active state added to anchorButton
       })
     })();
     </script>
    
  2. Copy the structure with same class name (unless you like to change them - don’t forget to change it within the body code as well)

  3. Associate the ID (top right) with the anchor content, this will be the ‘chapters’ you’re referring to

  4. Create to links for the chapters that you’ve created, add the #‘whatever-your-chapter-name-is’ in the link settings url

Hope this worked out for you, if thing remain unclear give me a ping!

Cheers,

Lucas

Hi @egenix
Wow! I appreciate your efforts very much!

The problem was/is that I’d like the content menu (anchor links) to update dynamically their text depending on the particular cms item (blog post) ‘chapters’.

Meaning, I would manually name ‘chapters’ inside cms item and the code would pull out the ‘chapter-name’ and would create an anchor link to the ‘chapter’. For that, I thought, I need to divide blog post into many parts and give each of them an ‘id’ and ‘name’ for the code to create a dynamic anchor links (content menu).

I’ve attached screenshots from cms for the reference.

I really hope I’ve managed to explain myself this time :slight_smile: thank you again for the help!

Pavel K.

Now I understand what you were trying! Unfortunately I’m not sure if it will work that way.

Yet you can still try to give your class inside of the html embed, a selector ID. And make sure the menu link(s) on the blog page are named the same after it’s ID in the embed so it has a reference.

Hope this helps!

Thank you for attempting to help, Lucas! I appreciate that.

1 Like

@pavelkotlykov in case you’re still interested, I figured out a reasonably easy way to make this work:

I’m using two different Collection Lists, one for the table of contents/navigation, another for the content of the post itself.

The secret is to use an HTML Embed element to create the dynamic links, since Webflow does support embedding dynamic fields into these elements. Here’s how it works:

1. Create anchor links in your CONTENT Collection List:

Basically, instead of grabbing an off the shelf link element, we’ll use an HTML embed element and build our own link.

Here’s the code to create the anchor link:

Notice the list of fields in the top right of the code editor window.

2. Create navigation links in your TABLE OF CONTENTS Collection List:

Now, we’ll repeat the process for the nav links, but instead of using dynamic fields to create a link ID, we’ll use them to set the HREF attribute of the link:

And here’s the code:

Hope this helps you or the next person! I banged my head against this one for a while…:slight_smile:

5 Likes

Thank you so much, Austin! You’re a genius!

had the same issue, and this solution solved my problem, thank you so much, austin!

Sooooo good!! I’ve been looking for a solution to this for ages. Thanks Austin