How to pin hidden images to Pinterest

[Ayla]

Hi guys,

I hope this is gonna make sense and you can help me out.

On my blog I use images that are quite different in size to the rest as to optimize for Pinterest. I want these pictures to be hidden on my blog, but I want them to appear when people hit the ‘Pin’ button.
(See bottom of https://aylovelife.nl/get-healthy/oververmoeid-burn-out-wat-doen/ to check out how large these images are and why I thus want to hide them)

I’ve tried hiding the images using Cornerstone’s ‘hide during breakpoints’ button and then selecting all screen formats. The picture is obviously hidden then, but won’t show when I try to pin.
So now I’ve tried adding CSS to this specific image: $el {display:none;}, which also hides the image, but also doesn’t display when I try to pin.

I found this topic: https://theme.co/apex/forum/t/hidden-pinterest-image/20694 with the exact same question, but the answer there doesn’t make sense to me. The footer widget area is something that would display on my entire website wouldn’t it? And what I’m trying to achieve is to create one image per blogpost that is specifically for Pinterest. I don’t want to fill my footer area with a widget for each post, I want to do this within the post itself.

As I said, I hope that you understand what I’m trying to achieve here and of course I hope you can help!

[ruenel]

Hello @Ayla,

Thanks for writing in!

To resolve your issue, you will need to force an image to save to Pinterest.
Please check out this link instead: https://www.wptasty.com/blog/force-pin-image

Instead of adding an image element, you will need to use a text element and then you insert your image where you can modify the image code to look like what has been discuss in the article above:

<img src="example.com/myimage.jpg" data-pin-media="example.com/pinterest-image.jpg" />

If you do not want to display the image, you can utilize the “Hide During Breakpoints” option of the text element.

We would loved to know if this has work for you. Thank you.

[Ayla]

HI RueNel,

Thanks for this! It works and doesn’t work at the same time

When I use the Pinterest button in my Chrome browser it works, hurray! It shows the picture that I want people to pin, while it is hidden in the post itself.

However, when I use the Pinterest-button in the classic social share it still gives me the featured image of the blogpost. I’ve looked into this: https://www.wptasty.com/blog/nopin-images, but since I’m using Cornerstone to build everything I don’t where I should add this no-pin code. I’ve tried using the exact same thing; adding the featured image in text and using the nopin=true thing. But that doesn’t work.

Hope you have a good idea for this last thing as well!

[rad]

Hi Ayla,

Since it’s a featured image, then please add this code to your child theme’s functions.php

  function x_featured_image( $cropped = '' ) {

    $stack     = x_get_stack();
    $fullwidth = ( in_array( 'x-full-width-active', get_body_class() ) ) ? true : false;

    if ( has_post_thumbnail() ) {

      if ( $cropped == 'cropped' ) {
        if ( $fullwidth ) {
          $thumb = get_the_post_thumbnail( NULL, 'entry-cropped-fullwidth', array( 'data-pin-nopin' => 'true' ) );
        } else {
          $thumb = get_the_post_thumbnail( NULL, 'entry-cropped', array( 'data-pin-nopin' => 'true' ) );
        }
      } else {
        if ( $fullwidth ) {
          $thumb = get_the_post_thumbnail( NULL, 'entry-fullwidth', array( 'data-pin-nopin' => 'true' ) );
        } else {
          $thumb = get_the_post_thumbnail( NULL, 'entry', array( 'data-pin-nopin' => 'true' ) );
        }
      }

      switch ( is_singular() ) {
        case true:
          printf( '<div class="entry-thumb">%s</div>', $thumb );
          break;
        case false:
          printf( '<a href="%1$s" class="entry-thumb" title="%2$s">%3$s</a>',
            esc_url( get_permalink() ),
            esc_attr( sprintf( __( 'Permalink to: "%s"', '__x__' ), the_title_attribute( 'echo=0' ) ) ),
            $thumb
          );
          break;
      }

    }

  }

The thumbnail will now have attributes data-pin-nopin="true" as recommendation from your provided URL.

Thanks!

[Ayla]

Hi Rad,

Sorry, my code-reading is not fluent yet

Does this code then apply to all featured images on my website? And do I still need to do the hidden-text element for the featured image with the ‘no-pin=true’ code. i.e.: I would like a bit more explanation on what this code does and what I need to do after Ive added it…

Thanks in advance!

[rad]

Hi Ayla,

It will be applied to all featured images, but not all images are featured so it may still pick other images within the page.

The code only excludes the featured images so you would sill need to add data-pin-nopin="true" to images that you don’t wish to display on Pinterest. Example, let’s say you have 4 images on a page and you only wish to display a specific one on Pinterest then

<div class="entry-featured"><img src="" data-pin-nopin="true"></div> /*the above code is for this */
<img src="" data-pin-nopin="true"> /* image that you don't like to be in Pinterest and not featured, so you have to do add no-pin manually*/
<img src="" data-pin-nopin="true"> /* image that you don't like to be in Pinterest and not featured, so you have to do add no-pin manually*/
<div class="hidden-text"><img src="example.com/myimage.jpg" data-pin-media="example.com/pinterest-image.jpg" /></div> /* the one you wish to display on Pinterest and also hidden since you don't want to display it on the page */

Thanks!