[Resolved] Adding link attributes (?) within blocks (without code)

[scometamus]

Dear GP-support,

I hope I use the term “link attribute” correctly here.

To show what I mean, here’s my code for the html-block containing a simple Lightbox tool that is installed in the website header.

<figure class="wp-block-image size-full"><a href="https://test-site/wp-content/uploads/_pda/2023/03/image.jpg" data-lity=""><img src="https://test-site/wp-content/uploads/2023/03/image.jpg" alt="" class="wp-image-268"></a></figure>

The data-lity="" in the code makes the image pop up in a nice light box.

However this is a bit tiring to set up, as I need to convert every image or video etc. to function as a pop up to html.

Is there a built-in solution within the blocks maybe?

Many thanks in advance!

[Ying]

Hi there,

No, there’s no such built-in function, and these are WP core blocks, the theme doesn’t have control over it.

However, you can give this PHP filter a try:

add_filter( 'render_block', function( $block_content, $block ) {
    if ( 'core/image' === $block['blockName']  ) {
        $block_content = str_replace( '<a', '<a data-lity', $block_content );
    }

    return $block_content;
}, 10, 2 );

[scometamus]

Thanks so much! And based on this code, how would I potentially be able to implement that?

Like adding data-lity to the link url or additional css?

Some attempts didn’t work, so I’m curious 🙂

[Fernando]

You just need to add the code through any of the methods here: https://docs.generatepress.com/article/adding-php/#code-snippets

Let us know how it goes.

[scometamus]

Hi Fernando, thanks, but I am not talking about how to implement php, I managed to do that.

I was wondering how to make data-lity work within GeneratePress based on the implemented code.

Thanks a lot in advance!

[Fernando]

It’s a filter. It just adds data-lity to WP Image Blocks upon rendering.

Are you wanting to add to other data-lity Blocks?

[scometamus]

I see, then it does not seem to work. I tried both original WP image blocks as well as the GP Blocks.

I’d like to add the link attribute data-lity (in code it looks like this)

<figure class="wp-block-image size-full"><a href="https://test-site/wp-content/uploads/_pda/2023/03/image.jpg" data-lity=""><img src="https://test-site/wp-content/uploads/2023/03/image.jpg" alt="" class="wp-image-268"></a></figure>

within a block, so I don’t need to use code all the time in order to implement data-lity.

[Fernando]

Try this snippet:

function db_rerender_image_url( $block_content, $block ) {
	if(!is_admin()){
    if ( ! empty( $block['attrs']['className'] ) && 'add-data-lity' === $block['attrs']['className']  ) {
		$block_content = str_replace( '<a', '<a data-lity', $block_content );
    } 
	}
    return $block_content;
}
 
add_filter( 'render_block', 'db_rerender_image_url', 10, 2 );

Give the Image Blocks a class of add-data-lity.

Adding Custom Classes: https://wordpress.com/support/wordpress-editor/adding-additional-css-classes-to-blocks/

[scometamus]

Unfortunately didn’t show any effect. Super difficult to solve.

[Fernando]

That’s odd. Can you provide admin login credentials and point us to where we can see the Image Block you added to the class to?

Please use the Private Information field for this: https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information

[scometamus]

Absolutely! Attached.

Btw: I tested it on another website, and there it worked without a problem. Maybe something is blocking the code?

[David]

Hi there,

remove the link from the image and in the Additional CSS Classes add: do-lity

Then create a hook element, set the Hook to wp_footer and add this script:

<script>jQuery(document).on('click', '.do-lity', lity);</script>

Set the display rules to where you want the lightbox to work.

Leet us know if that works.

[scometamus]

Hi am I supposed to disable the other script from Fernando?

For your information, on another website, Fernando’s solution worked like a charm, only on this website not.

I disabled Fernandos script, and the hook solution didn’t work unfortunately. Also with Fernando’s script enabled, no change.

I will do some more tests why Fernando’s script work on one website, but not on the one I’ve sent you. Curious if you also have some ideas!

[Fernando]

It’s a different solution.

How did you add the PHP snippet I provided? Can you try adding it through a plugin called Code Snippets to test?

[scometamus]

You figured out the root of the problem, Fernando, incredible!

With the plugin you suggested, your script performs well. However, wenn I run it from the functions.php in the child theme, no success. There seems something preventing the functions.php to be executed.

But that’s a great start! I will investigate and give feedback once I know more.

If you have ideas, looking forward!

[Author]

Posts