I’ve been doing some work using the ID created by the Bodycopy DIV style information. The basic jist is that I have an asset listing that creates a side nav of bookmark links for each bodycopy div that is created within a standard page.
My issue is that since we upgraded to Squiz 5.4, in the container properties, the bodycopy DIV description being used to generate the ID is now adding the container ID number thus breaking the links.
For example, instead of “#page_bookmark” it’s now “#page_bookmark_234098”.
My work-around is adding '_%asset_assetID% to the side nav url type format so that it appends the container number but I’d prefer not to keep this as I didn’t want a messy URL.
If anyone has experienced this or has a solution, please let me know!
The asset ID was added to ensure the IDs were always unique. As content containers are by default named “Content Container”, so if you had multiple containers on a page with the same name you’d have multiple HTML ID attributes which is invalid HTML.
Is having #page_bookmark_234098 in the URL really a bad thing? What about if you have containers that are named the same? You’d then need to separate them out somehow right?
I also agree that the IDs need to be kept unique on the page, but as Euan says, the container IDs are being changed manually. Would it be better to still automatically assign the ID as it currently does, but changing the ID manually removes the container number?
I guess the question is then also, do we want to support allowing users to have the same name for their containers whilst still keeping the ID unique?
Currently the default name is “Content Container”, so if we hardcode a check in the container output that goes something like
if (name == "Content Container"){
addAssetIDToID();
}
It’d feel a bit hacky and dirty, and it wouldn’t work if we then have those default names configurable or for localisation where the name might be different.
It also feels like it become inconsistent if some container IDs have the asset ID and others don’t.
Not sure if that’s the best way to solve it?
A workaround in the meantime at least might be to asset list the content containers in your Paint Layout and do a custom
wrapper with the ID where you print %asset_name% into it as part of the type format.
Another thing to try could be to remove the “_1234” part of the ID using SSJS, a replace keyword modifier, or just front-end JS?
I suppose if you get a lot of people saying that the addition of the ID numbers is causing issues it would be worth looking at the fix but if it’s just one or two of us then the other methods you’ve suggested are probably going to be the go-to options.
That’s a good shout Bart in terms of the replace keyword or front-end js. I’ll give that a go and see how I get on.
Will report back as to the solution that works best
One thing to consider is also that you might want your anchor links to go to headings instead of divs right?
So really, the ID should be applied to the heading so that the anchor goes there instead.
For example, on the Matrix docs site, I use a front-end JS script that simply looks at all H2 and H3 headings in the content and generates automatic anchor links at the top of the page and adds automatic IDs to each heading as well, example: https://matrix.squiz.net/tutorials/2018/how-to-create-an-esi-based-main-menu
let assetID = /_\d+/g; //targets any expression with _123456
var removeAssetID = document.body.innerHTML;
removeAssetID = removeAssetID.replace(assetID, ""); //replaces the asset ID with empty space
document.body.innerHTML = removeAssetID;
I need to do some more in depth testing with it across our site but it seems to work on page templates that use a side nav page that are being automatically assigned an ID on the bookmark link.
We are using Matrix v5.4.7.1 and unable to make anchor links to headings work. I can create the anchor link, but when I link to it from elsewhere on the page or on the site, it just takes me to the top of the page. Is this a known issue?
I don’t want to go to the first line of text under the heading because that hides my heading and sometimes I have a heading and the content below is a web part (like an accordion, image, video, etc) and I can’t create an anchor link to it anyway.
