Skip to content
Grav 2.0 is officially stable. Read the announcement →

Community guidelines

Please keep discussions civil and on-topic. Repeated violations may lead to a temporary ban.

General

Modular page anchor link field

Started by Jared 8 years ago · 3 replies · 1609 views
8 years ago

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

8 years ago

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:

TWIG
<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
last edited 05/05/18 by Hugh Barnes
8 years ago

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.

3 years ago

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:

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

and on the modular page I did:

TXT
anchorname: a_xyz

in the frontmatter resp. header

Then, linking to it from a "features" page:

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

and the twig to render it is:

TWIG
 <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.

Suggested topics

Topic Participants Replies Views Activity
General · by Jerry Hunt, 4 days ago
2 80 9 hours ago
General · by pamtbaau, 14 hours ago
1 51 13 hours ago
General · by Andy Miller, 1 day ago
0 44 1 day ago
General · by Marcel, 12 months ago
6 346 5 days ago
General · by Duc , 5 days ago
3 40 5 days ago