[Resolved] Adding a data/dataset element to header logo

[lunatrix]

I’m using a plugin (TastyPins) to add an automatic Pinterest pinning hover button to images. When adding images through the post editor there is a checkbox to disable the pin functionality.

To manually turn off the hover button for an image pinning can be by setting data-pin-nopin=”true” attribute. How can I add this to my logo? It seems that it is only an issue on mobile, the hover button is not present when viewing on the desktop.

[lunatrix]

Also, it only seems to show up on an actual device – I don’t see this behaviour when viewing the site in responsive design mode in Firefox Developer Edition.

[Tom]

Hi there,

Try this function:

add_filter( 'generate_logo_attributes', function( $atts ) {
    $atts['data-pin-nopin'] = true;

    return $atts;
} );

Adding PHP: https://docs.generatepress.com/article/adding-php/

Let me know 🙂

[lunatrix]

Your code works. Except that I needed ” ” around true because it was converting to 1. I can see the data- attribute when I view source, but it’s still not working. Looks like I will have to take it up with the TastyPins folks because the attribute is there, just not honoured.

Thanks for your help! I love this theme so much, and the support is excellent 🙂

[Tom]

No problem! Hopefully they’re able to resolve it for you 🙂

[lunatrix]

Is there a way to inject the data attribute using css?

[Tom]

I don’t think so, unfortunately.

[lunatrix]

I didn’t think so, but thought I’d ask 🙂

[Angel]

Hey,
This solution only works for the desktop logo. Can it be made to work for the mobile header logo?
Thanks

[David]

Hi there,

you can use the PHP Snippet provided here:

https://docs.generatepress.com/article/generate_mobile_header_logo_output/#avoid-lazy-loading

Edit this line to adjust the data attribute:

<img src="%3$s" data-no-lazy="1" alt="%4$s" />

[Angel]

Thanks!

[David]

Glad to be of help

[Angel]

.

[Angel]

Thanks again.

I added the snippet and the no pin attribute is working perfectly, however, now pagespeed says the logo doesn’t have explicit weight and height. Is there a way to fix it?
Cheers

[Ying]

Hi Angel,

For this problem, you can use this PHP snippet Tom provided here:
https://generatepress.com/forums/topic/logo-does-not-have-explicit-width-and-height/#post-1762272

Adding PHP: https://docs.generatepress.com/article/adding-php/

[Author]

Posts