Modular page anchor link field

1

Hi
I’m looking for some advice on how people handle this situation - I’ve got some modular pages that I want to create anchor links to from other pages on the site. How do you create the links?

I’ve been using the slug field and adding {{ page.slug }} to my templates. This works but slug url isn’t ideal for a number of reasons, one of which is the url itself starts with a _ which isn’t really user friendly.

So how are other people doing this - custom field, js/php script, something else?
Thanks

2

Hi

I did this some time ago and didn’t end up using it, so had to dig to find it. Sorry it took so long.

To create the anchor links in the template, I used an id property in the modular frontmatter. So custom field, yes.

I set in my modular template like this:

<ul id="{{page.header.id}}" class="teasers profiles">

When I had a tabbed display on the parent of the modular pages (landing/index page), I also wanted the option to link to specific tabs from the menu. Basically, I had fragment links in my menu. I didn’t end up doing that anyway, but here’s what my navigation.html.twig partial template looked like, and I think it worked. For the modular pages I wanted visible in the menu, I just set a visible property in the frontmatter and queried that. Modulars are not visible by default.

Hope that helps if not too late.

1 Like
3

Hi @hughbris I was hoping for some built in field I missed for the id but I guess custom field is the most flexible. Thanks for taking a look.

4

Hi,
I am absolutely not a web developer, just followed the grav manual and some other things.
I did sth similar, linking to modular pages by using anchors.
I used a twig template to create the anchors, like so:

<a name={{ page.header.anchorname|raw }}></a>

and on the modular page I did:

anchorname: a_xyz

in the frontmatter resp. header

Then, linking to it from a “features” page:

---
title: Homepage Features
menu: Features
class: small
features:
    - thumbnail: abc.jpg
      text: hello world
      anchorname: a_xyz

and the twig to render it is:

 <a href={{ feature.target|raw }}#{{ feature.anchorname|raw }} >

Maybe that helps.

M own problem is, that the anchors are not precisely enough positioning my page,
i.e. it works, but the link goes a bit too low, so I dont go exactly where I wanted.