Filter - put an anchor on post links.

Hi there,

tricky one.
But we have some hooks in GB that may work...

// Add post-id-{get_the_id} as ID Attribute on all query loop item
add_filter( 'generateblocks_attr_grid-item', function( $attributes, $settings ){
	if ( $settings['isQueryLoopItem'] && !is_admin()  ) {
    	$attributes['ID'] = 'post-id-'.get_the_id();
	}
	return $attributes;
}, 10, 2 );
// inject custom jump link after container-block open if block has custom-loop class
add_filter( 'generateblocks_after_container_open', function( $output, $attributes, $block ){
    if ( isset($attributes["className"]) && 'custom-loop' == $attributes["className"] && !is_admin() ) {
        $output .= '<a class="post-jump-link" href="some_url/#post-id-' . get_the_id() . '" aria-label="Go to the post titled ' . get_the_title() . '"></a>';
    }
    return $output;
},10,3);

Change the href base URL in $output .= '<a href="some_url/#post-id-'.....
Edit the query loop for your front page, select the Post Template block and give it a class of custom-loop

This should inject the custom anchor link into the containers HTML.

Hi Dave ,
Thank you very much for your reply with a hook.

Unfortunately, it doesn't work the way I want it to.

I have made a short screenrecording with some annotations fro you to see if you have the time.

A link is provided in the Private Informationa area.

I hope to hear from you soon.

Thank you!

Peter

Ooops, I should have written David instead of Dave - my mistake... David

Don't worry about the name :)
I made some edits to the code above:
https://generatepress.com/forums/topic/filter-put-an-anchor-on-post-links/#post-2519953

Can you update that code.
What it will do is:

1. All Query Loop posts post container HTML will be given a unique ID of their Post ID eg. id="post-id-123"

2. The Query Loop Post Template block with the Class of custom-loop will get an anchor link injected into its container.
Its HTML will look like this:

<a class="post-jump-link" href="some_url/#post-id-1463" aria-label="The current post title"></a>

Its a hidden link with an aria label containing the post title.

3. Add this CSS:

.custom-loop {
    position: relative;
}
.post-jump-link {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

It will position that button to make the entire container become that link.

So you can remove the Dynamic Single Post Link from the Headline block displaying the title

The smooth scroll on the archive. That i cannot do, maybe the Page Scroll to ID plugin can handle that for you

Hi David,

Thank you for all your immense help.

I have updated the code snippet with the changes to the script you have made.

But now there's a new issue.

It puts a anchorlink on the entire page - and it's an anchor to some arbitrary post-id, as far as I can see.

The link does go to the Latest News page - but it doea that no matter where I place my cursor on the frontpage.

Is it the CSS or is it in the new code? I can't really tell...

Please see the urls and screenshot in the Private information section.

Thanks again

Peter

That will be CSS related.
Where can i see this on the actual site ? The link provide i still see the older content ?

Hi David,

Again - thank you very much for your help - it's awesome!

I am sending you two urls.

On url no. 1 you can see the problem in full bloom.
Try and move your cursor around and down to also the second section (another Query Loop) on that page.
You'll see that the post-id is the same on all posts.

On url no. 2 I got it working :-).

So your code works!

It's more or less the same setup on both with a few more plugins on the first.

cheers Peter

No, the issue is there on both urls I sent you.

You mention it's a CSS thing - can you help me clarify that? :-)

Thanks again.

P.

Oh... its adding the jump links into every container .... which is what this code does:

// inject custom jump link after container-block open if block has custom-loop class
add_filter( 'generateblocks_after_container_open', function( $output, $attributes, $block ){
    if ( in_array( 'custom-loop', $attributes ) && !is_admin() ) {
        $output .= '<a class="post-jump-link" href="some_url/#post-id-' . get_the_id() . '" aria-label="Go to the post titled ' . get_the_title() . '"></a>';
    }
    return $output;
},10,3);

But it should only apply to containers that have the custom-loop class. I assume that code has not been changed ?

Hi David,
Sorry to keep returning about this.

I think I have the right code that you provided - will you please check the code in the Private Information?

I put the 'custom-loop' classname on both the top Container and the on the Post Template inside the Query Loop.

Maybe that's bad practice, but now it works on the dev-site. (See URL1)

That made the frontpage work, but moved the problem to the target page.(See URL2)

So for that I added the page-id classname on the CSS you provided, like so:
CSS:
.page-id-31 .custom-loop {
position: relative;
}
.page-id-31 .post-jump-link {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}

... and that made it all work... yeai...

BUT: On the client's website it still puts a link to a post-id on everything - even the logo... (See URL3). It's so sad...

What am I doing wrong?

Hi David,

The problem occurs as soon as there are more than one query loop on the page.

I just added another query loop to the frontpage on the dev-site and it's acting the same way with a post-id link on everything.

Peter

Hi David,

Is this the reason?

// Add post-id-{get_the_id} as ID Attribute on all query loop item
add_filter( 'generateblocks_attr_grid-item', function( $attributes, $settings ){
if ( $settings['isQueryLoopItem'] && !is_admin() ) {
$attributes['ID'] = 'post-id-'.get_the_id();
}
return $attributes;
}, 10, 2 );

Doesn't this code put a id link on all QueryLoop items?

cheers

Peter

It's everything in the viewport that get assigned to a podt-link

The issue is related to this code:

// inject custom jump link after container-block open if block has custom-loop class
add_filter( 'generateblocks_after_container_open', function( $output, $attributes, $block ){
    if ( in_array( 'custom-loop', $attributes ) && !is_admin() ) {
        $output .= '<a class="post-jump-link" href="some_url/#post-id-' . get_the_id() . '" aria-label="Go to the post titled ' . get_the_title() . '"></a>';
    }
    return $output;
},10,3);

It is what adds the <a> to the container blocks, but it should only affect the containers with the custom-loop class.
But i just tested it, and its affecting all containers. hmmm... i will need to do some testing... i did say it was Tricky :)