Force Pin on Featured Image

... 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?

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 :)

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

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

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

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;
} );

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

Glad we could help! :)

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

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?

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

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

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/

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;
} );