[Resolved] Add class to image source link

[Jochen]

Hi, I set the link source in an image bock to the source file and I need this link to have a specific class.
The additional class field adds a class to the image, but not the image link.

Do you have an idea how I can achieve that?

Best Jochen

[David]

Hi there,

i am not sure on this.
what block is it ? is it GenerateBlocks Image block or the core Image Block

[Jochen]

Hi David,
it is a GenerateBlocks Image block.

Here are 2 Screenshots:
1. Backend

GB Image Element is given a aditional class and it is linked to the single image.

2. Inspector

The custom Class “data-lity” is given to the image, but i need it on the link wrapping the image.

[David]

Ok, you would need to use the render_block filter to change the links HTML.

1. Add this PHP Snippet:

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

}, 10, 2 );

2. Select the block and give it a class of: add-lity-class

[Jochen]

Awesome, thank you very much

[David]

You’re welcome

[Author]

Posts