Topic: Dynamic, unique HTML Anchor and href value in Query Loop block.

Anonymous
April 1, 2024 at 2:34 pm

I’m attempting to create a Query Loop block that opens a dynamic modal. One thing I need is to have the HTML anchor (Container > Advanced > HTML ANCHOR) be dynamic; so that each instance in the loop has a unique ID. Similarly, the link to launch that modal instance should match that ID so that the two pieces communicate to each other.

For example, if the anchor on the container block was “uniqueID-01”, then the link href value would be “#uniqueID-01” so that those two things relate.

I hope this makes sense.

Thank you!

David

April 2, 2024 at 3:00 am

Hi there,

you can use the following snippet to add a ID attribute to every query loop item:


add_filter( 'generateblocks_attr_grid-item', function( $attributes, $settings ){
    if ( $settings['isQueryLoopItem'] && !is_admin()  ) {
        $attributes['ID'] = 'uniqueID-'.get_the_id();
    }
    return $attributes;
}, 10, 2 );

The ID will be uniqueID-# where the # is Posts ID.

And to add the same ID as a jump link then:

1. Add this PHP Snippet:


add_filter( 'render_block', function( $block_content, $block ) {
    if ( 
        !is_admin() && 
        ! empty( $block['attrs']['className'] ) && 
        strpos( $block['attrs']['className'], 'has-dynamic-link' ) !== false 
    ) {
        $post_id = get_the_ID();
        $find = '#link-placeholder';
        $replace = '#uniqueID-' . $post_id;
        $block_content = str_replace( $find, $replace, $block_content);
    }

    return $block_content;
}, 10, 2 );

2. Add a GB Button block
2.1 in Advanced > Additional CSS Classes add: has-dynamic-link
2.2 in the buttons link field add: #link-placeholder

Anonymous
April 2, 2024 at 8:19 am

This is absolutely magnificent David! Worked on the first try! Thank you so much!

Do you know if it is possible to have the dynamic post title (which in this case is the person’s name from a “person” CPT) have the link that spawns the modal? As opposed to a button?

I appreciate the GB/GP support so much… you guys are top-notch!!!
Anonymous
April 2, 2024 at 12:11 pm

Here’s a screenshot of the List View with some questions:
https://snipboard.io/4twMpX.jpg

David

April 3, 2024 at 3:16 am

1. for the title, you would use this snippet:


add_filter( 'generateblocks_dynamic_url_output', function( $url,$attributes) {
    if ( 
        ! empty( $attributes['className'] ) && 
        strpos( $attributes['className'], 'title-has-dynamic-link' ) !== false 
    ) {
        $post_id = get_the_ID();
        $url = '#uniqueID-' . $post_id;
    }
    return $url; 
}, 10, 2 );

Which generates our #uniqueID-xx URL
Then select the Headline block with the title and give it a class of title-has-dynamic-link

2. For the container. you could repurpose the 2nd snippet above, as its just a string replace.


add_filter( 'render_block', function( $block_content, $block ) {
    if ( 
        !is_admin() && 
        ! empty( $block['attrs']['className'] ) && 
        strpos( $block['attrs']['className'], 'has-dynamic-anchor' ) !== false 
    ) {
        $post_id = get_the_ID();
        $find = '#anchor-placeholder';
        $replace = '#uniqueID-' . $post_id;
        $block_content = str_replace( $find, $replace, $block_content);
    }

    return $block_content;
}, 10, 2 );

Give the Container a class of: has-dynamic-anchor
And in its HTML Anchor field add the placeholder: #anchor-placeholder

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

Are you a GenerateCustomer?

Just browsing?

Dynamic, unique HTML Anchor and href value in Query Loop block.