How do I modify the Personify:Heading component so I can add HTML ID’s to them. I want to be able to add on-page navigation - i.e. a Table of Contents - and I need to use the #ID in the href for the link to that heading. This is what I need (from a regular heading element).
Hello @mlbass,
Thank you for the inquiry.
In the Components list, select #Atoms, look for the Personify: Heading component in the outline, then edit its parameters.
Add this parameter inside the first group labeled “Setup”.
"elID" : {
"label" : "ID",
"type" : "text",
"initial" : "",
"placeholder" : "Specify the element ID attr"
},
Go to the Customize tab, then add this dynamic content in the ID field.
{{dc:p:exp03HeroHeadingSetup.elID}}
To learn more how parameters work, please check this documentation: https://theme.co/docs/parameters#control-types-text
Let us know if you need more info.
Best regards,
Ismael
Thanks! Got it working. I know the basics but not so good at the actually code.
Glad to know it’s working! Feel free to open another thread if you have more questions. Have a nice day.
I spoke to soon. It’s not. I put the login in the secure notes.
I added “Headline” element at the end to test, that works. The personify components don’t on the live page when you click on a table of contents link.
Hey @mlbass,
We’re about the check your website but there’s a database connection error. Please resolve that first so that we can check on your setup properly.
Hello @mlbass,
The given user credentials is not working the main site.
Please double-check it.
Thanks.
Created new one, listed in secure notes
Thank you for the update.
We edited the Personify: Heading component and added the ID parameter. We also created a test page – link in the secure note. Let us know if you need more info.
Warm regards.
Go to https://idahoradio.com/privacy-policy/. You’ll see the TOC doesn’t work
Enter the URL: https://idahoradio.com/privacy-policy/#headlines and you’ll see this works and takes you to the bottom of the page. I entered this ID into a standard headline element.
Go to cornerstone for this page https://idahoradio.com/cornerstone/edit/104 You’ll see I have the ID function working in the component, and the ID’s for the TOC entered.
The issue is that everything looks as it should, but the ID’s don’t work on the live page.
Hey @mlbass,
It is not working because you used {{dc:p:exp03HeroHeadingSetup.elID}} instead of using the correct one which is {{dc:p:exp03HeadingSetup.elID}}.
Kindly let us know how it goes.
Ok. Not a huge deal, but look above in this chat and you’ll see I copy/pasted what I was given. Entered it and problem solved.