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

Vladi
(@loveinlions)

4 years, 7 months ago
Hi Team,

Issue: I can’t find the way to add “nopin=true” attribute to images in lightbox galleries with no class.

Example: this page here, just as on many other ones, there are plenty of images. And none of them have any class assigned to them, which is why I can’t find the right way to use a script to add a “nopin-true” attribute to them.

What I have tried: I have tried adding the following script:

<script>
jQuery(function($){
$(‘img.dummyclass’).attr(‘data-pin-nopin’, ‘true’);
});
</script>

and it does work for those images I can add the “dummyclass” class to. However, most of the images do not have class and there is no way to add it to them. And changing “img.dummyclass” to something like “a.class img” or similar does not work.

Options: As far as I see it, there should be a way to either:

A. target the images without a class inside those a’s and div’s
B. add a class to such images (for example, .nopin)

This way I want to hide most of the images as well as the YT cover image from being picked up by the Pinterest Share window.

Question: What is the best way to solve A and/or B above?

Thank you!
- This topic was modified 4 years, 7 months ago by Vladi.
- This topic was modified 4 years, 7 months ago by Vladi.
- This topic was modified 4 years, 7 months ago by Steven Stern (sterndata).
The page I need help with: [log in to see the link]

Viewing 15 replies - 1 through 15 (of 17 total)

1 2 →

Joy
(@joyously)

4 years, 7 months ago

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

Thread Starter Vladi
(@loveinlions)

4 years, 7 months ago

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?

Joy
(@joyously)

4 years, 7 months ago

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.

Thread Starter Vladi
(@loveinlions)

4 years, 7 months ago

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.

Joy
(@joyously)

4 years, 7 months ago

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.

Thread Starter Vladi
(@loveinlions)

4 years, 7 months ago

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

Moderator bcworkz
(@bcworkz)

4 years, 7 months ago

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

Thread Starter Vladi
(@loveinlions)

4 years, 7 months ago

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

Any ideas?
Moderator bcworkz
(@bcworkz)

4 years, 7 months ago
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');
} );
```
Thread Starter Vladi
(@loveinlions)

4 years, 7 months ago
@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 4 years, 7 months ago by Vladi.
- This reply was modified 4 years, 7 months ago by Vladi.
- This reply was modified 4 years, 7 months ago by Vladi.
Moderator bcworkz
(@bcworkz)

4 years, 7 months ago

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.

Vassilenkoff
(@vassilenkoff)

4 years, 7 months ago

.

Thread Starter Vladi
(@loveinlions)

4 years, 7 months ago

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

Moderator bcworkz
(@bcworkz)

4 years, 7 months ago

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.
Thread Starter Vladi
(@loveinlions)

4 years, 7 months ago
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 4 years, 7 months ago by Vladi.