Adding “nopin=true” attribute to images with NO class in lightbox gallery

$(‘img:not([class])’).attr(‘data-pin-nopin’, ‘true’);

Thank you @joyously

Unfortunately it didn’t work. I’ve added the script to the website but the Pinterest Share window still picks up the same images. You can see it on the same page.

Any ideas?

Well, I was addressing the problem of selecting the images with no class, as you requested. It’s up to you to make sure that this script runs before the Pinterest script.

I see @joyously

If I target a specific class in the very same way, Pinterest does not see the images with that class. So not sure why it would see the images in this case if the script is completely the same and should work for the images with no class.

May I please ask you how do I ensure what you are talking about?

My end goal is to ensure that the images with no class are not seen by Pinterest share script.

If I use the Developer Tools on your page, and enter in the selector img:not([class]), it shows me a long list of images that match that selector.

Perhaps your script is not correct, or the images with no class is not the correct thing for the script to target. I do not know how your Pinterest script works. You could ask in the support forum for wherever you got the script.

OK. Thank you for explaining that. In that case, let’s imagine that you haven’t seen that script. How do I target those images (in any possible way) and hide them from Pinterest? Or in other words, how can I add a “nopin=true” attribute to those images? How would YOU do it? I am not tied to any scripts but I do need help in finding the way to target those images and hide from Pinterest (so I am open to ANY suggestions).

Try this version, the quotes were corrupted in Joy’s example:
jQuery('img:not([class])').attr('data-pin-nopin', 'true');

Hi @bcworkz – thank you. I have added it to the website but it doesn’t do anything.

Any ideas?

There are extra chars in the inline script after the code I posted above: });
You should alt least move the script to the footer or wrap it in a document ready wrapper to delay execution. Otherwise the script could run before all the target HTML is loaded. For example:

jQuery( document ).ready( function( $ ) {
    $('img:not([class])').attr('data-pin-nopin', 'true');
} );

@bcworkz This did the trick – thank you so much! The only image that is left is the YT cover even though it does not have a class either. Probably because it is part of the div style:

<div class="dummy-style" style="background-image: url(dummy-url-of-the-image)"; > </div>

Do you know how I would target it to add the nopin attribute as well?

The current code that I am using is:

<script>
   jQuery( document ).ready( function( $ ) {
   $(‘img:not([class]), img.wp-post-image’).attr(‘data-pin-nopin’, ‘true’);
   } );
</script>

• This reply was modified 5 years, 2 months ago by Vladi.
• This reply was modified 5 years, 2 months ago by Vladi.
• This reply was modified 5 years, 2 months ago by Vladi.

Add a similar line just above the closing } ); where the jQuery selector is 'div.ytp-cued-thumbnail-overlay-image'.

Maybe it’s OK but wouldn’t the added img.wp-post-image cause all images to be no-pinned? Even the one you want pinned? Or does the image you want pinned not have a “wp-post-image” class? If all is working well for you, you can ignore this, but it seems a little suspicious to me.

.

@bcworkz Thank you! I think I did try 'div.ytp-cued-thumbnail-overlay-image' before and it didn’t work. I’ve just added it again, and it doesn’t have any effect on the YT image.

Re: img.wp-post-image, if I delete it (I have just done it), you will notice how the Pinterest share script picks up 6 square images – all featured images of different posts (5 – related posts, 1 – “previous post”). What is a better way to exclude all 6 without using the img.wp-post-image?

And lastly, I don’t know if it has something to do with the code I am adding, but I’ve noticed that the Pinterest Share script has started to have a delay of a few seconds before it starts loading the share window. Do you know if it is normally an API thing or there could be something preventing it from loading locally?

Hi Vladi, sorry for the slow reply. The YT image may be difficult to target because I think it may be loading late, so late that your script runs before it appears in the DOM. But if you delay your script somehow, the Pinterest scraper may have run before that. It’s tricky getting everything to happen in the right order when different external resources or scripts are involved. I don’t know for sure this is in fact the case, it’s only speculation. The only solution I can think of is to determine the Pinterest scraper’s user agent and simply do not output the YT embed if the user agent is from Pinterest.

One way to exclude the featured images of other posts would be to have the featured image (or whatever it is) in the current page which should be pinned by Pinterest be inserted somehow without the wp-post-image class. Probably best done by altering the template code that generates the output. Then the img.wp-post-image selector would be fine. The other solution if you are altering templates anyway would be to include the no-pin attribute from the onset in the pertinent template code.

Hi @bcworks – no worries and thank you for trying to help me.

I have fixed the YT embed image issue by… changing the way I embed the video. I will do it manually now.

Re: the other images, for some reason, even the code above

jQuery( document ).ready( function( $ ) {
    $('img:not([class])').attr('data-pin-nopin', 'true');
} );

has stopped working so I can’t even target the images without the class.

Trying to figure out what happened now.

• This reply was modified 5 years, 2 months ago by Vladi.