WordPress.org

Forums

jQuery Pin It Button For Images
[resolved] Code for nopin class (27 posts)

  1. karenstl
    Member
    Posted 1 year ago #

  2. Marcin Skrzypiec
    Member
    Plugin Author

    Posted 1 year ago #

    Hi karenstl,

    to be honest, the code looks just fine. Could you add the nopin class to an other image in some other post and leave a link to this post here? I will take a look on what might be wrong. Also, please activate debug mode (advanced settings).

  3. karenstl
    Member
    Posted 1 year ago #

    I figured out what was wrong I had two class= instead of just adding the nopin inside the quotes with a space between the items. That's what happens when you don't know code. You might want to put an example on your description on the plugin site of how to do this showing people how to add the nopin class to an image's html. Many of us don't know html at all.

  4. Marcin Skrzypiec
    Member
    Plugin Author

    Posted 1 year ago #

    Done.

  5. bcr8tive
    Member
    Posted 11 months ago #

    @karenstl Hi.

    Per Pinterest - you can block pinning whole sites or individual images.

    http://help.pinterest.com/en/articles/prevent-pinning-your-site

    For an image - add the nopin attribute

    <img src = "foo.jpg" nopin = "nopin" />

  6. canadianangelxo
    Member
    Posted 11 months ago #

    I had this same problem and fixed it like @karenstl did. I had

    <img class=nopin="nopin" in my photo code

    I deleted the extra nopin and made it

    <img class="nopin" and now those images I wanted to not have a pin it button, don't. Thanks @karenstl! :)

  7. bcr8tive
    Member
    Posted 11 months ago #

    @canadianangelxo

    I can't imagine how that could possibly work unless you actually defined a class for the function in css. I'd love to see it at work do you have a link?

  8. bcr8tive
    Member
    Posted 11 months ago #

    @karenstl all you have to do is add the code nopin="nopin" after the src= portion of the code - and it works.

    < img src="foo.jpg" nopin="nopin" / > (No spaces next to brackets)

    The other option is to use Phil Derksen's plugin "Pinterest Block".
    It has several options that allow you to block whole sites, categories, tags and individual posts and pages.

    Here ▶ http://wordpress.org/support/plugin/pinterest-block

  9. canadianangelxo
    Member
    Posted 11 months ago #

    @bcr8tive the image I didn't want to be able to be pinned was the Disclousre image I made at the very bottom of this post.

    http://canadianangelxo.com/2014/06/novica-handcrafted-home-decor-and-gifts-from-around-the-world.html

    <img class="nopin" worked and I didn't define a class for the function in css.

    The only thing that is in my jQuery Pin It Button For Images Options under Disabled classes is nopin and wp-smiley.

  10. bcr8tive
    Member
    Posted 11 months ago #

    Thanks for the link...

    As I suspected, it is not working. For all intents and purposes there isn't a way for it to, unless you found a way to write a function that was called by a class.

    Here's a screenshot - the red arrow is pointing to the image you want the no pin on -

    http://lrhcreative.com/misc-imgs/screen.jpg

  11. canadianangelxo
    Member
    Posted 11 months ago #

    Hmmm it works for me. My pin button doesn't show up on that image and when I copy and paste that url into Pinterest it doesn't show up as an image from that link either.

  12. bcr8tive
    Member
    Posted 11 months ago #

    @canadianangelxo

    I just showed you the screenshot - I can only suggest testing in more than one browser - the image is showing in the pin window - which demonstrates that the class thing is not working.

    And if you're referring to a hover pin it - I'm not seeing THAT at all.

    You may want to clear your cache too. Sounds like a local thing.

    I just pinned it

    http://www.pinterest.com/pin/196258496236814232/

  13. canadianangelxo
    Member
    Posted 11 months ago #

    That is very strange! I have tried 3 different browsers, cache has been cleared. I still don't see that image there.

    so for this image code where do I put the nopin="nopin"?

    <img src="http://canadianangelxo.com/wp-content/uploads/2014/06/canadianangelxo-disclosure1.jpg" here alt="canadianangelxo disclosure" height="100" width="700" or here>

  14. bcr8tive
    Member
    Posted 11 months ago #

    <img src="http://canadianangelxo.com/wp-content/uploads/2014/06/canadianangelxo-disclosure1.jpg" nopin="nopin" alt="canadianangelxo disclosure" title="canadianangelxo disclosure" height="100" width="700">

  15. bcr8tive
    Member
    Posted 11 months ago #

    @canadianangelxo Saw you edited it, reloaded the page, and tested it again. Now when I click the browser pinit, it is NOT showing up so nopin is working BUT you're pinit hover is also working now, so you still can pin it. That's going to be a conflict unless you use a normal pinit button.

  16. canadianangelxo
    Member
    Posted 11 months ago #

    @bcr8tive thank you for your help! :) Can you tell me how I disable my featured image thumbnails from showing up when people go to pin a post? For some reason it's picking up my related posts 150x150 images and also my featured images on each post... http://canadianangelxo.com/

  17. bcr8tive
    Member
    Posted 11 months ago #

    You're welcome,

    As for preventing pinning of main pages, categories, individual pages, etc - That's where you'd need to implement the plugin that I mentioned above...

    and in some cases some additional tweaking to the functions.php -

    http://docs.appthemes.com/tutorials/allow-html-in-wordpress-category-taxonomy-descriptions/

    and I was wondering, Is there a specific reason the disclosure is an image and isn't just text? That would prevent it from ever being pinned... If I were you, I'd remove the hover pinit and then the nopin attribute will work.

  18. canadianangelxo
    Member
    Posted 11 months ago #

    I thought the option to prevent pinning of main pages, categories etc was in my jQuery Pin It Button For Images Options??

    I disabled jQuery Pin It Button For Images. I wanted to keep it so I could put my own description into the images being pinned.

    I couldn't get the bigger "D" in the disclosure text to show up how I wanted it. I tried putting the text into a table and it just looked funny, lol so I just made an image, so it would be easier to just include it in my post.

    How do I just remove the hover pinit?

  19. canadianangelxo
    Member
    Posted 11 months ago #

    I don't want to block any images from being pinned from main pages, categories, individual pages, etc just the feature image post thumbanils.

  20. bcr8tive
    Member
    Posted 11 months ago #

    No, they're 2 different things... one is a BLOCK - yours is a hover pinit.

    You add descriptions to individual pins by adding the title tag (I demonstrated earlier)- you don't need a plugin to do that.

    The "D" is called a drop cap - and depending on the theme you're using, you may have that capacity already - with a short code...

    Disable and remove the Jquery-pin-it-button plugin...

    Last, the tutorial link I gave you, walks you through having the ability to write code into fields you wouldn't normally be able to - thus allowing you to muck around and prevent pinning your featured image -

    Since your image is embedded IN the post AND on the front page, you're not going to be able to prevent pinning it unless you do that.

    I have prevention of pinning from my main pages, categories etc - because users would pin from them and not INSIDE the post - then the rich pin attributes don't apply and the image isn't linked TO its post -

    Otherwise, I don't have issues with them pinning featured images.

  21. canadianangelxo
    Member
    Posted 11 months ago #

    Oh OK! I don't know a whole lot about short codes. Slowly learning! LOL!

    I also don't want to muck around too much with the css, as I only know what I am doing from instructions I see online. I will try my best with the tutorial link you gave to figure out how to prevent the featured image 150x150 thumbnail from being pinned. Hopefully it's not too difficult lol

    I see what you are saying about preventing pinning from your main pages, categories etc. I always wondered why one would disable those. Thank you for all the information and easy to understand instructions for this newbie :)

  22. bcr8tive
    Member
    Posted 11 months ago #

    If you're not comfortable with code - don't do it. It IS difficult.
    People that build sites can help and are available for contracts big and small

    Yes, you have all of the right open graph tags to have rich pins - but if they pin from the main pages - the pins won't have their rich pin attributes -

    and you're most welcome.

  23. canadianangelxo
    Member
    Posted 11 months ago #

    I will have a look and see if I feel comfortable or not :)

    So what should I disable from being pinned in the Pinterest Block Settings? What would you recommend?

  24. bcr8tive
    Member
    Posted 11 months ago #

    I recommend... poking around my site and Pinterest ツ

    http://bcr8tive.com/

    http://www.pinterest.com/bcr8tive/

  25. canadianangelxo
    Member
    Posted 11 months ago #

    HA! Will do! Thanks again! :)

  26. healingfamilyeats
    Member
    Posted 8 months ago #

    I'm struggling with the same issue. I've installed the JQuery PinIt Button for Images plug in. The Settings for this indicate that a Class of "nopin" will disable the button.

    On one specific picture, I've set the code:
    <img class="nopin" src="http://healingfamilyeats.com/wp-content/uploads/2014/09/JJ-squash.jpg" alt="Roasted Squash Soup [AIP] - Healing Family Eats" width="6000" height="4000" />

    The image can be seen at:
    http://healingfamilyeats.com/roasted-squash-soup-with-thyme-aip/
    The fifth image on this page is the one that is specially marked (immediately below "Hurrah for a winter of soup making!"

    It seems to be working, as no Pin It button appears on the picture. Also I've blocked the ability to open the jpg by double-clicking on the picture - also working.

    BUT I have a Javascript function that sits in my Safari bookmarks bar (presumably obtained directly from Pinterest), called Pin It, that when called shows all Pin'able pictures from any site. Weirdly first time I run this, it shows the picture I'm trying to block, but when you try to select it Pinterest picks up a different picture(!) The problem is that if I repeat the process, second time Pinterest displays the correct picture and allows it to be pinned. So we're not blocking the picture from being pinned after all. Any ideas?

  27. bcr8tive
    Member
    Posted 8 months ago #

    healingfamilyeats,

    First I can only suggest that you read this thread - since I already corrected how the no pin should be coded (at the very beginning of this thread) and there is NO class in it ...

    Second, I can't imagine why you would have so many images that are 6000 pixels wide on your page. That is ENORMOUS - they're print resolutions that bog your site down tremendously in page load time and speed. They don't have to be that big for any reason unless you have a drive in, in your backyard, and people come to watch the posts on the movie screen ;-)

    3rd, I dont know what "no pin it button' you're referring to - but I can tell you this - when you have a website you have to understand that your audience is viewing it from more than one browser and more than one kind of platform - Laptops, desktops, phones - AND Browsers= Chrome, Firefox, Safari, Opera, Internet Explorer etc - EACH of them have "pinterest extensions" that don't require or care if there is a pin it button on your site or not -

    You do NOT need a JQuery anything - and if you don't know what you're doing with it, I can only suggest that you probably shouldn't be installing it.
    It isn't necessary - it bloats your site more - it opens you to be vulnerable to people who will try to exploit your site thru JQuery etc etc

    You can get a pinterest button FROM Pinterest - and you can add the no pin code - to the image you don't want to be pinned.

    You could also try this plugin, its popular and safe - the developer is quite thorough, its simple and easy to use...
    https://wordpress.org/plugins/pinterest-pin-it-button/

    Good luck!

    PS: You also have your pinit button set to pin a SPECIFIED image - but if I click my browser pin it - I can access every image on the page.

Topic Closed

This topic has been closed to new replies.

About this Plugin

  • jQuery Pin It Button For Images
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic

Tags