Bodycopy DIV Presentation - Asset ID Numbers

(Rob) #1

Hi all,

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!

Cheers

Rob

(Euan Hawthorne) #2

Yes, this has caused us some problems as well. We had js and css code looking for div ids’. Not sure why the inclusion of the asset id was necessary?

(Bart Banda) #3

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?

(Euan Hawthorne) #4

Agree that IDs should be unique. But if the container id is manually changed, do we have to have squiz append a number?

(Rob) #5

Hi all,

Thanks for replying to this!

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?

(Bart Banda) #6

Yea I see your points.

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?

(Rob) #7

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 :slight_smile:

(Bart Banda) #8

Good call Rob.

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

(Rob) #9

Hi all,

My work around for this at the moment is:

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.

Cheers

Rob

(Bart Banda) #10

FWIW, we’re planning on addressing the Content Container ID issues in this feature tracker: https://squizmap.squiz.net/matrix/12024

(David Wallace) #11

Okay… I’ve had a look at /12024 in tracker but I can’t see anywhere I can check anything to customise the IDs. (v5.4.5.1)

This is being a right pita.

What am I missing? I need to get control back of IDs on divs.

Thanks.

#12

It was added in 5.4.6 :zipper_mouth_face:
https://matrix.squiz.net/releases/5.4/5.4.6.0

(Jennifer Weiley) #13

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.

(Bart Banda) #14

There’s no reason that shouldn’t work on that version of Matrix. Is the anchor ID there in the source code on the frontend when you view the page?