Pin It Button

billshakes

Hello I have managed to add the pin it button inside the album image description field but it intermittently expands the 'pin it' image over the entire page (see attached) ie sometimes the button is the correct size, sometimes it expands over the image, see the first 2 pages at http://rochlinbespoke.com/album/edwin-bench/ for an example

Unfortunately I can't use the standard 'pin it' plug in as i think it only works in wp pages and posts

How do I prevent this image expansion occurring?

Many thanks

Toby

Attachment
Pin It.png

Air

Hello:-)

OK nice you have find your way in to make pin it button :-)

I think you are adding such code to your description:

<a data-pin-do="buttonPin" href="//pinterest.com/..." data-pin-config="none"><img src="//assets.pinterest.com/images/pidgets/pin_it_button.png"></a>

Am I right?
As we don't want to make big changes to CSS I would advise altering this code to such:

<a data-pin-do="buttonPin" href="//pinterest.com/..." data-pin-config="none" style="background-image: url(//assets.pinterest.com/images/pidgets/pin_it_button.png); display: inline-block; height: 20px; width: 40px;"></a>

With regards.

billshakes

Hi,

Thanks for the swift response, the code is similar but actually:

<a data-pin-config="none" href="//pinterest.com/pin/create/button/?url=http%3A%2F%2Frochlinbespoke.com%2Falbum%2Fedwin-bench%2F&media=http%3A%2F%2Frochlinbespoke.com%2Fwp-content%2Fuploads%2F2013%2F03%2FbDSC_01.jpg&description=Next%20stop%3A%20Pinterest" data-pin-do="buttonPin" ><img src="//assets.pinterest.com/images/pidgets/pin_it_button.png" /></a>

which is gen'd from http://business.pinterest.com/widget-builder/#do_pin_it_button

I tried adding the dimension restraints but same problem. I might be adding in the wrong place though, please can you advise? I'm also not sure if I should add the script code, if so where?

<script type="text/javascript" src="//assets.pinterest.com/js/pinit.js"></script>

Thanks again!

Toby

billshakes

lol works on the thread perfectly

billshakes

a data-pin-config="none" href="//pinterest.com/pin/create/button/?url=http%3A%2F%2Frochlinbespoke.com%2Falbum%2Fedwin-bench%2F&media=http%3A%2F%2Frochlinbespoke.com%2Fwp-content%2Fuploads%2F2013%2F03%2FbDSC_01.jpg&description=Next%20stop%3A%20Pinterest" data-pin-do="buttonPin" > so you can see code easily

Air

OK - I asked question about code cause I was interested if you write it "from finger" or use some generator(you do:-) ).

Code I gave you is just merge of this what is generated for you with something that won't react on album styles. So to make use of my code follow this steps:

1. Take my Code:-)
2. Generate code for your picture.
3. Take everything what is in href attribute in generated code and copy in to href in my code
4. Copy your final product to description in photo :-)

Looks like lot of work, but I know you can do it:-)

---

Hmmm I wanted to gave you other solution but I see that in current way that code is written it will attack any <img> that will be inserted in description.

I think for now it is only solution. If you won't be able to make it I will try to prepare temporary code for you that will fix it.

With regards.

billshakes

GREAT! Got it working perfectly on the two examples, will have to copy your code, generate each image code pin it and paste into each remaining album image which will be time consuming but it works so I'm happy, thanks again Air, really good support.

Air

Thanks!
I am very happy that it will work for you :-)