jQuery Pin It Button For Images

jQuery Pin It Button For Images is a free plugin that allows your readers to easily pin images in your blog posts by simple hovering over them and clicking a button. It is highly customizable, so you can adjust it to your own needs. You can download it on the WordPress plugin repository. As you can obviously see, this page is in work in progress state and it will probably be this way for quite some time.

Options

Selection settings

Enabled and disabled classes

Enabled and disabled classes are an easy way to activate or deactive the “Pin it” button on certain images. The only tricky thing here might be adding a certain class to an image in a blog post. Here’s how to do this. After adding an image to the blog post/page, switch to the Text tab in the text editor. Code for a typical image looks similarly to this:
<img class="alignright" src="http://www.mrsztuczkens.me/wp-content/image.png" width="500" height="250" />
To add a class to the image, you just need to add it to the class attribute of the img element. Multiple classes need to be separated by spaces. For example, if you wanted to add a nopin class to the image, the result you’re looking for looks like this:
<img class="alignright nopin" src="http://www.mrsztuczkens.me/wp-content/image.png" width="500" height="250" />
If an image doesn’t have a class attribute, you need to add it. Make sure there isn’t more than one class attribute in an image.

Visual settings

Linked page

By default, the plugin links the image to the URL user is visiting. So, if he’s pinning an image while visiting the the home page, the pin will link to the home page. If he’s visiting a certain blog post, the image will link to that blog post, etc. If you will enable this option (Always link to individual post page), the pin will always link to the individual page with that image (if possible). That means if user pins an image from a blog post while visiting the home page, the pin will link to the blog post, not the home page. If you’ve selected Title as the description source for the pin and enabled this option, the title of that individual blog post will be used.

Translation

In the languages folder there is a jpibfi.pot file that allows you to translate the plugin. If you would like to translate the plugin to your language and then share it with the community, you can send it directly to me (use the Hire me form) and it will be added to the next version of the plugin. Translators:

Ideas to implement

There are a couple of things that I’m thinking about adding to the plugin:
  • Handling lazy loading
  • Ability to always show the ‘Pin it’ button (so one can choose if it should appear on hover or be always on)
  • Ability to darken the image on hover or add a background texture (right now one can only set the transparency)
  • Some additional effects (I’m not sure what effects though)

Downloading an older version of the plugin

Every released version of the plugin is available here, in the “Other versions” section.

Troubleshooting

If you have any issues with the plugin, report them in the plugin’s support forum. I do my best to help people who are experiencing issues with the plugin. Make sure you read sections “Before reporting a problem” and “Reporting a problem” before posting on the forum.

Before reporting a problem

Before reporting a bug please follow the steps listed below. They might actually fix the issue.
  • If you’re using a caching plugin (like W3 Total Cache) on your website, clear its cache.
  • Go to visual settings and change the display mode to dynamic. That often helps.

Reporting a problem

Few things I would like you to do when reporting a problem:
  • Follow the directions in Before reporting a problem section and let me know what happened.
  • In Advanced options enable debug mode (make sure to save changes after checking the checkbox). Debug mode doesn’t change the way the plugin works, but it gives information that helps with figuring out the issue.
  • One thread = one person + one problem. If you have a problem, start a new thread. Don’t post in a thread started by someone else saying “I have the same problem”. Any “me too” posts will be ignored. Start a new thread and answer only there. If another problem will occur somewhere in the future, start a new thread instead of reviving the old one.
  • Include a URL address of the website and make sure the plugin is activated. If you won’t give me the URL address of the website where the problem occurs, unless it’s a settings page issue, how can I check out what’s happening there? Threads like “I have this XXX problem, I deactivated the plugin and am waiting for the next version to fix it” will be ignored. If the plugin works but things aren’t rendering as they should, let me know which browser are you using.
  • If your issue is resolved, be kind enough to let me know about that.

ProPhoto theme users

ProPhoto theme has a feature that prevents users from downloading images. This feature interferes a little with the jQuery Pin It Button For Images plugin. To make things work you need to add pp-overlay to disabled classes (selection settings) and make sure the plugin works in static mode (visual settings). That should make the plugin work correctly with the ProPhoto theme.

Users about the plugin

Below you can find blog posts that feature jQuery Pin It Button For Images

Customization

If you like the plugin but you really need few new features to be perfectly happy with it, you can hire me (the author of the plugin) to customize it for you. Of course it’s a paid service (price depends on what are your needs). If you’re interested, go to the “Hire me” page.