[Resolved] Force Pin on Featured Image

[Kelly]

Hello all,

I am using Tasty Pins to force use of my Pinterest pin instead of default images in my posts. It works great (adds the force pin code for me) but does not work on featured images.

The Tasty Pins Team said “That said, it may be worth reaching out to your theme developer to see if they can add the data-pin-media attribute to your featured image”.

Is there a way to add this via an element? What are the options?

Regards,

Kelly

GeneratePress 2.2.2

[Kelly]

… specific guidance from Tasty Pins is as follows:

“You may want to reach out to the theme developer and request that they add the data-pin-nopin=”true” attribute to those images”

Maybe this could be an option in a future release?

Short term, is there a way to do this with an element or another method?

[Tom]

Hi there,

Try this function:

add_filter( 'generate_featured_image_output', function( $output ) {
    return sprintf( // WPCS: XSS ok.
        '<div class="post-image">
            <a href="%1$s">
                %2$s
            </a>
         </div>',
         esc_url( get_permalink() ),
         get_the_post_thumbnail(
             get_the_ID(),
             apply_filters( 'generate_page_header_default_size', 'full' ),
             array(
                 'itemprop' => 'image',
                 'data-pin-media' => true,
             )
         )
    );
} );

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

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Kelly]

Thanks Tom!

I tried the code below using the Code Snippets plugin with the setting “Run snippet everywhere”, but it did not work. If I inspect the page, it does not show as a attribute in the image tag… but if I manually add it by inspecting the element adding it in browser to test, it works like a charm.

Any ideas on why this is not adding the attribute to the Featured Image. I suspected it may be the Div Class is different than your example, but I tried the Div Class presented via inspection and it didn’t work… which leads me to think we need to match the html inside the Div as well as its an img tag.

Here is a sample page: https://mytopfitness.com/index.php/2019/01/18/tips-gear-running-with-your-dog/

add_filter( 'generate_featured_image_output', function( $output ) {
    return sprintf( // WPCS: XSS ok.
        '<div class="post-image">
            <a href="%1$s">
                %2$s
            </a>
         </div>',
         esc_url( get_permalink() ),
         get_the_post_thumbnail(
             get_the_ID(),
             apply_filters( 'generate_page_header_default_size', 'full' ),
             array(
                 'itemprop' => 'image',
                 'data-pin-media' => true,
             )
         )
    );
} );

Appreciate all your assistance!

Kelly

[Leo]

Sorry to jump in.

I checked the page you linked above. Is this not what you are looking for?
https://www.screencast.com/t/qLkYAQBtHE

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Kelly]

Glad to have you jump in! The problem is that when someone tries to pin the header image, it doesn’t force it to use a hidden pin. All other images on the page work, the header image is not “in page”, per sa, so that is why Tom recommended the code to add an attribute to the image tag of the header.

If I manually add the tag while inspecting the page in a browser, it works like a charm and instead of seeing a lady running with a dog, you see a nice tall Pinterest Pin.

Regards,

Kelly

[Tom]

Ah sorry, my code is for the blog/archives.

Try this instead:

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

	return $atts;
} );

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Kelly]

Never apologize for being awesome! I learned a ton and it works like a charm. Thank you and Leo for all your support. Simply the best WordPress Theme and Team out there…

Regards,

Kelly

[Tom]

Glad we could help! 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Kelly]

This solution worked for a while, but was there some sort of GeneratePress update as now the Pinterest button is missing from the featured image all together?

Thank you for any assistance,

Kelly

[Tom]

Hi there,

We haven’t had a theme update since Jan 30 – did it break back then? Nothing featured image-related has changed since the above solution was suggested. Did anything change with the pin script/plugin maybe?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Kelly]

Thanks Tom,

Nothing changed with the plugin either… very odd. I wonder if this is something Pinterest side. Maybe I need to add an additional class or directive to the featured image to ensure the pin save button feature shows. As always, thanks for your assistance.

Regards,

Kelly

[Tom]

No problem. Just to confirm, the data-pin-media attribute still exists on your images 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Kelly]

Yes, it is set as data-pin-media=”1″ (1 for true). Here is where it gets fun. If I remove that attribute, the Save button shows up… however, I need this for forcing my desired pin that is hidden (this was what was working before). Here is a sample page: https://mytopfitness.com/index.php/2018/09/07/hill-repeats/

[Tom]

It looks like Pinterest wants the data-pin-media value to be the URL of the image.

I have no idea if this will work or not, but it’s worth a shot:

add_filter( 'wp_get_attachment_image_attributes', function( $atts ) {
	$atts['data-pin-media'] = $atts['src'];

	return $atts;
} );

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts