Is there a way to automatically add a class to in-page anchor tags?

General
1

I’m working on trying to fix the in-page anchors within modx. I’ve already added a plugin that fixes the problem. But my pages have a fixed header with a search bar that I’m trying to code some css for to fix it.

How can I change modx to automatically add a class to that <a> tag? Something like .anchor-fix or something.

thanks

2

How are you generating the <a> tags? If through getresources or pdoResources can use the snippet template and class properties.

3

it’s added in automatically when creating the link. But instead, i’m selecting the anchor from the dropdown.

2021-03-10_14-18-57
2021-03-10_14-18-57495×362 6.71 KB

4

Is that Tinymce? There should be a way to configure it to have a Class dropdown in that Insert Link modal.

This what I have on a site with TinymceWrapper installed:

upload
upload525×372 30.3 KB

Edit: I see that you had asked about a way to automatically add the class though… This won’t help with that.

5

You should be able to target the anchor tags even without a class by using something like this in your css:

a[href*="#"] { your:styles; }

(untested, but it should look for all anchor tags that have # in the href)

1 Like
6

This basically works without the extra work for something that is not often used. Modx is weird about it though in that it creates an <a> tag with an ID only rather than an href. So as long as my IDs contain the word “bookmark” this will work fine. Maybe making a template variable that automates some of this too.

thanks!

7

Oh, I thought you wanted to put a class on the link to the anchor, not the anchor in the page.

That’s Tinymce creating the page anchor as a link tag plus ID, no href. (It’s valid, but kinda ugly imo. Technically any element on the page with an ID is an anchor, so why use a link tag when it’s not actually a link.) Redactor lets you use IDs on any element as anchors.

Anyway, Tinymce does have a setting called visual_anchor_class that allows for a custom class on anchors, which I think is exactly what you’re looking for. Don’t know if your Tinymce extra allows for configuring it though. Probably TinymceWrapper would.

https://www.tiny.cloud/docs-4x/configure/content-appearance/#visual_anchor_class
Edit: nevermind it looks like that class is only for the appearance within the editor window. :frowning:

8

Also, i had to amend the CSS for the empty anchor tags a bit. For some reason iOS Safari doesn’t accept empty <a> tags that use padding. So instead of this:

.anchor {padding-top: 5em;}

I did this and it worked fine:

.anchor {
display: inline-block;
height: 5em;
margin-top: -5em;
}