pinterest_blog_banner

Using Pinterest With JS Lightbox in WordPress

Intro

This blog post will teach you how to customize the placement of a Pinterest “Pin It” button, particularly when you are using a JavaScript lightbox.

So this problem came to be while I was working on a photography portfolio add on section to one of our client’s sites. The website featured a full width masonry-style layout of images, with each image opening in a JavaScript lightbox when clicked.

The client asked me to add Pinterest functionality (seems reasonable), so I accepted the challenge and was off to the races!

The Challenge

Here’s the problem. Pinterest’s Widget Builder only offers three options for adding a Pin It button.

  1. One Image – With this choice, you must provide an absolute URL to the image, as well as what page the image should link to (example: I link the E-Socialite logo to the E-Socialite home page). This wasn’t going to work, as the Pin It button needed to be added automatically as the client added images to their photography portfolio.
  2. Any Image – This is the choice I ended up going with. I had to fuddle with the code a little bit (I’ll show what I mean below), but it ended up working like a charm.
  3. Image Hover – As the name implies, when a user would hover over an image, the Pin It button would appear. The reason that this was not a viable solution was that the Pin It button was hidden behind the hover navigation for the Lightbox.

This blog post isn’t designed to teach you the inner workings of WordPress, or PHP code in general, so I’m going to copy and paste right from my source code (changing the name of the website to protect my client’s identity), so you can get a feel for my approach.

The Solution

Essentially what I needed to do was add to the <a> tag that Pinterest provided (check out the middle of line 10, right after data-title).

To accomplish what I needed, I used a combination of HTML URL Encoding and some PHP to deliver the final part of my URL as a variable (I called it $pinpath — see line 6).

In lines 1-7, you can see that I used some PHP to get the CURRENT POST’S (the image in question) year and month of upload (in accordance with their site’s permalink structure), concatenate those variables with a couple of / in between, and concatenate all of that with the image name of the 0 index in the array (which I used PHP’s basename() function to do).

You can see that in line 10, somewhere near the middle of that ridiculously long line of code, I used PHP to echo $pinpath. This means that whenever a site visitor clicks on an image to pull it open in a Lightbox, they will have the option of pinning it.

The Conclusion

I’ll wrap up this blog post by stating something that I hope was obvious from the start. Now that the Pin It button is created, you can place it wherever you’d like. If you note in the example below, I chose to put it under the image on the left side because the hover navigation in the image covered it up (I used Photoshop to show both navigation buttons to drive my point home).

pinterest-js-lightbox

That’s all for today folks. Thanks for reading!

Alex Manor

Comments